必须用后台脚本中转，因其拥有 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 或监听用户操作：
立即进入“豆包AI人工智官网入口”；
立即学习“豆包AI人工智能在线问答入口”；
使用豆包（火山引擎 Ark）生成图片或视频并保存本地。用户提及“豆包生图/图片/生视频/视频”、“Doubao”、“Seedance”、“火山引擎图片/视频”时触发。
-
"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 <key>
别漏掉 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 显式绑定更可靠。
