使用豆包大模型开发 AI 浏览器插件实战

必须用后台脚本中转，因其拥有 manifest 中 host_permissions 声明后的完整网络权限，可直调豆包 API；而内容脚本受同源策略与扩展安全模型限制，即使配置 permissions 也无法发起跨域请求。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

直接用豆包大模型开发浏览器插件，不需要自己搭后端、不用维护 API 代理层，但必须绕开两个硬限制：chrome.runtime.sendMessage 无法直连豆包 HTTPS 接口（CORS + 权限拦截），且 fetch 在内容脚本中默认无 https://api.doubao.com/ 白名单权限。所以核心路径只有一条：走后台脚本中转。

为什么必须用 background script 做中转

内容脚本（content script）运行在网页上下文里，受同源策略和扩展权限双重约束。即使你在 manifest.json 里加了 "permissions": ["https://api.doubao.com/"]，Chrome 仍会拒绝其发起跨域请求——这是安全模型强制行为，不是配置能绕过的。

后台脚本（background script）则拥有完整网络权限，只要在 host_permissions 中声明目标域名，就能自由调用豆包 API。所有选中文本、触发右键菜单、点击浮动窗按钮等前端动作，都应通过 chrome.runtime.sendMessage 把数据发给 background，再由它完成鉴权、构造请求、处理响应。

• 错误现象：Failed to fetch 或 net::ERR_BLOCKED_BY_CLIENT，实际是 CORS 被静默拦截
• 正确做法：内容脚本只负责 DOM 捕获与 UI 渲染；所有 POST /v1/chat/completions 必须由 background 发起
• 性能影响：多一次进程间通信（IPC），但延迟增加通常

manifest.json 必须声明的三项权限

缺一不可，否则 background 无法调用豆包 API 或监听用户操作：

• "host_permissions": ["https://api.doubao.com/"] —— 允许后台脚本访问豆包接口
• "permissions": ["contextMenus", "storage", "activeTab"] —— 支持右键菜单注册、密钥持久化、当前页 DOM 访问
• "content_security_policy": {"extension_pages": "script-src 'self'; object-src 'self'"} —— 防止因 CSP 导致注入的浮动窗 JS 失效（尤其在 strict 模式网站如 Notion、Figma 中）

注意：https://api.doubao.com/ 末尾不能带斜杠，否则 manifest 校验失败；storage 权限用于存用户填的 API_KEY，避免每次调用都弹输入框。

豆包大模型

字节跳动自主研发的一系列大型语言模型

下载

右键菜单触发后如何安全传参给 background

用户右键选中一段文字，点击「润色」，这个动作本身不携带文本内容——Chrome 只传 selectionText 给监听函数，但该字段长度上限为 6KB，超长会被截断。更可靠的方式是内容脚本主动读取并压缩后发送：

• 使用 window.getSelection().toString() 获取原始文本，而非依赖 info.selectionText
• 对文本做简单预处理：去除多余空白、限制长度（建议 ≤ 4096 字符），避免豆包 API 返回 413 Payload Too Large
• 通过 chrome.runtime.sendMessage 发送对象，含 action: "polish"、text、tabId（用于后续注入结果）
• 后台脚本收到后，拼装标准豆包请求体：{"model": "doubao-pro-32k", "messages": [{"role": "user", "content": text}]}，带上 Authorization: Bearer

别漏掉 tabId：后续要把润色结果以浮动窗形式注入原页面，必须知道在哪一个 tab 执行 chrome.tabs.sendMessage。

浮动窗注入失败的三个常见原因

很多开发者卡在“后台调通了 API，但结果死活不出现在页面上”，问题几乎都出在注入时机或沙箱隔离：

• 浮动窗 HTML 是通过 chrome.tabs.executeScript 注入的 JS 动态创建的，但若目标网页启用了 Content-Security-Policy: script-src 'none'（如部分银行/政府站），JS 注入会被拒——此时改用 chrome.scripting.insertCSS + document.createElement('div') 原生 DOM 方式更稳妥
• 未等待 DOM 就绪：内容脚本收到消息后立即操作 document.body，但页面可能还在加载。应在 document.readyState === 'complete' 后执行，或用 setTimeout 延迟 100ms
• CSS 样式泄漏：浮动窗样式若没加 !important 或 scoped class，容易被网站全局 CSS 覆盖（比如 z-index: 9999 被设成 z-index: 0）。推荐用随机 class 名 + 内联 style 控制关键属性

最易忽略的一点：浮动窗里的“复制”按钮绑定事件时，若用箭头函数闭包引用外部变量，在某些站点（如 Webflow 构建页）会因 JS 上下文隔离而失效——改用 addEventListener 显式绑定更可靠。