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

1次阅读

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

开发浏览器插件集成大语言模型时，开发者常遇到以下几个核心挑战：

Token 限制问题 ：ChatGPT API 有严格的 token 上限，长对话时需智能截断历史记录
跨域请求障碍 ：插件默认禁止跨域访问，需特殊配置才能调用外部 API
状态持久化困难 ：浏览器插件生命周期特殊，需妥善管理对话上下文
响应延迟明显 ：直接等待 API 完整响应会导致界面卡顿
认证流程复杂 ：需要安全存储 API 密钥且支持用户级授权

安全性提升 ：
移除 eval 等危险函数
强制内容安全策略 (CSP)
网络请求需声明权限
性能改进 ：
Service Worker 替代常驻后台脚本
按需唤醒机制节省资源
新特性支持 ：
chrome.scripting API 动态注入
改进的存储管理接口

生命周期可控：空闲时自动休眠
事件驱动架构：响应消息 / 网络请求
内存占用更低：不阻塞浏览器主线程
支持流式处理：适合长时 AI 对话

// 使用 chrome.identity 获取 OAuth 令牌
async function getAccessToken() {
  try {const { token} = await chrome.identity.getAuthToken({ interactive: true}
    );
    return token;
  } catch (error) {console.error('Auth failed:', error);
    // 指数退避重试
    await new Promise(r => setTimeout(r, 2 ** retryCount * 1000));
    return getAccessToken();}
}

// 使用 EventSource 处理流式响应
const eventSource = new EventSource(`https://api.openai.com/v1/chat/completions?stream=true`);

eventSource.onmessage = (event) => {const data = JSON.parse(event.data);
  // 增量更新 DOM
  requestAnimationFrame(() => {outputDiv.textContent += data.choices[0].delta.content;
  });
};

// IndexedDB 存储对话历史
const db = await idb.openDB('chatHistory', 1, {upgrade(db) {
    db.createObjectStore('conversations', {
      keyPath: 'id',
      autoIncrement: true
    });
  }
});

await db.add('conversations', {timestamp: Date.now(),
  messages: chatContext
});

// worker.js
self.onmessage = ({data}) => {const result = heavyProcessing(data);
  self.postMessage(result);
};

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(inputData);
worker.onmessage = ({data}) => {updateUI(data);
};

// 使用 session 存储临时状态
await chrome.storage.session.set({tempContext: currentChat});

// 读取时
const {tempContext} = await chrome.storage.session.get('tempContext');

声明式注入 ：manifest.json 中声明匹配模式
编程式注入 ：chrome.scripting.executeScript 动态注入
iframe 桥接 ：通过隐藏 iframe 传递消息

在 manifest.json 声明 host 权限
使用 chrome.webRequest 修改请求头
通过后台服务中转请求

明确声明所有权限用途
提供清晰的隐私政策
禁止隐藏功能开关
界面需符合商店规范

/**
 * 获取 AI 对话响应
 * @param {Array} messages - 对话消息数组
 * @param {number} [retry=3] - 重试次数
 * @returns {Promise<string>} - 生成的响应内容
 */
async function getAIResponse(messages, retry = 3) {// 实现逻辑...}

创建 content script 捕获页面文本
设计摘要提示词模板
实现流式结果显示在浮动面板
添加保存摘要到本地的功能

完整 manifest.json 模板：

{
  "manifest_version": 3,
  "name": "AI Assistant",
  "version": "1.0",
  "permissions": [
    "identity",
    "storage",
    "scripting"
  ],
  "background": {"service_worker": "background.js"},
  "content_scripts": [{"matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

通过本教程的实践，开发者可以构建出响应迅速、安全可靠的 AI 浏览器插件。建议先实现核心对话功能，再逐步添加高级特性如多轮对话记忆、个性化设置同步等。遇到性能瓶颈时，优先考虑 Web Worker 分流和响应流式处理。

正文完