ChatGPT浏览器插件开发实战：从零构建高效AI助手扩展

1次阅读

没有评论

共计 3141 个字符，预计需要花费 8 分钟才能阅读完成。

在浏览器扩展中集成大型语言模型时，开发者常遇到三个技术瓶颈：

API 限速问题：免费版 ChatGPT API 存在每分钟 3 次的严格调用限制，突发流量会导致 429 错误
上下文丢失：传统 content script 每次页面刷新后需重新建立会话，无法维持多轮对话记忆
DOM 操作冲突：MV3 版本中 isolated world 机制导致常规 DOM 注入方法失效

优势：
1. 独立运行环境不依赖页面生命周期
2. 天然支持后台持续运行
3. 可通过 chrome.storage 实现上下文持久化

劣势：
1. 无法直接访问 DOM
2. 需要复杂的消息传递机制

优势：
1. 直接操作页面 DOM
2. 与页面 JavaScript 共享执行环境

劣势：
1. 受页面刷新影响
2. 内存占用较高

建议采用混合架构：Service Worker 处理 API 通信 + 状态管理，Content Script 专注 UI 交互

{
  "manifest_version": 3,
  "permissions": [
    "storage",
    "scripting",
    "activeTab"
  ],
  "background": {
    "service_worker": "sw.js",
    "type": "module"
  },
  "content_scripts": [{"matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

// sw.ts
const callAPI = async (prompt: string, retries = 3): Promise<string> => {
  const baseDelay = 1000;

  try {
    const res = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {'Authorization': `Bearer ${API_KEY}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        model: "gpt-3.5-turbo",
        messages: [{role: "user", content: prompt}]
      })
    });

    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();} catch (err) {if (retries <= 0) throw err;
    const delay = baseDelay * Math.pow(2, 3 - retries);
    await new Promise(r => setTimeout(r, delay));
    return callAPI(prompt, retries - 1);
  }
};

// content.ts
function injectUI(html: string) {const shadowHost = document.createElement('div');
  document.body.appendChild(shadowHost);

  const shadowRoot = shadowHost.attachShadow({mode: 'open'});
  shadowRoot.innerHTML = html;

  return {update: (newHtml: string) => shadowRoot.innerHTML = newHtml,
    destroy: () => shadowHost.remove()
  };
}

// 使用 chrome.storage.local 实现 LRU 缓存
const MAX_CACHE_SIZE = 50;

async function getCachedResponse(prompt: string) {const cache = await chrome.storage.local.get('chatCache');
  return cache[promptHash(prompt)];
}

async function updateCache(prompt: string, response: string) {const { chatCache = {} } = await chrome.storage.local.get('chatCache');

  if (Object.keys(chatCache).length >= MAX_CACHE_SIZE) {delete chatCache[Object.keys(chatCache)[0]];
  }

  chatCache[promptHash(prompt)] = response;
  await chrome.storage.local.set({chatCache});
}

// 处理 SSE 数据流
async function* streamResponse(res: Response) {const reader = res.body?.getReader();
  if (!reader) throw new Error('No reader available');

  const decoder = new TextDecoder();
  let buffer = '';

  while (true) {const { done, value} = await reader.read();
    if (done) break;

    buffer += decoder.decode(value, { stream: true});
    const lines = buffer.split('\n');
    buffer = lines.pop() || '';

    for (const line of lines) {if (line.startsWith('data:')) {yield line.slice(6);
      }
    }
  }
}

// 使用 chrome.identity 进行 OAuth 认证
const getToken = () => {return new Promise<string>((resolve, reject) => {chrome.identity.getAuthToken({ interactive: true}, (token) => {if (chrome.runtime.lastError) reject(chrome.runtime.lastError);
      else resolve(token);
    });
  });
};