diff --git a/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image1.png b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image1.png new file mode 100644 index 0000000..e1013aa Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image1.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image10-1.png b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image10-1.png new file mode 100644 index 0000000..2d1242e Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image10-1.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image10.png b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image10.png new file mode 100644 index 0000000..a372bcf Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image10.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image2.png b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image2.png new file mode 100644 index 0000000..807c1c3 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image2.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image2b.png b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image2b.png new file mode 100644 index 0000000..cc8c7fc Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image2b.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image3.png b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image3.png new file mode 100644 index 0000000..0745ad9 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image3.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image4.png b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image4.png new file mode 100644 index 0000000..c957e04 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image4.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image5.png b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image5.png new file mode 100644 index 0000000..bafc200 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image5.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image6-1.png b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image6-1.png new file mode 100644 index 0000000..c997167 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image6-1.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image6-2.png b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image6-2.png new file mode 100644 index 0000000..680c5f2 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image6-2.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image6-3.png b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image6-3.png new file mode 100644 index 0000000..613d12f Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image6-3.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image7.png b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image7.png new file mode 100644 index 0000000..52b5e2d Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image7.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image8.png b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image8.png new file mode 100644 index 0000000..cc5e3db Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image8.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image9.png b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image9.png new file mode 100644 index 0000000..7bd6ade Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/images/image9.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/index.md b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/index.md index 8ecb044..c0b88a5 100644 --- a/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/index.md +++ b/docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/index.md @@ -16,6 +16,8 @@ 想象一下：你打开一篇 5000 字的技术博客，点一下插件按钮，几秒钟后，一份精炼的中文摘要就出现在侧边栏里。这就是我们要构建的东西。 +![placeholder: 一张效果预览图，左边是一个长文章网页，右边是 Chrome 侧边栏中显示的 AI 生成的摘要](images/image1.png) + ## 1.2 Chrome 插件的基本架构 @@ -30,7 +32,7 @@ Chrome 插件（基于 Manifest V3）由几个核心部分组成，它们各司 它们之间的协作流程是这样的： -``` +``` 用户点击插件图标 → 侧边栏打开 → 用户点击"总结"按钮 @@ -147,6 +149,7 @@ AI 会帮你生成完整的项目骨架。让我们逐个看看每个文件的 * `scripting`：允许插件向页面注入脚本来读取内容 * `sidePanel`：允许使用 Chrome 侧边栏 API +![placeholder: manifest.json 文件在编辑器中的截图](images/image2b.png) ## 2.3 准备图标 @@ -170,6 +173,8 @@ Chrome 插件需要三个尺寸的图标：16x16、48x48、128x128。你可以 你会看到插件出现在列表中，右上角的工具栏也会多出一个图标。 +![placeholder: Chrome 扩展管理页面的截图，展示如何开启开发者模式并加载插件](images/image3.png) + > **提示**：每次修改代码后，回到 `chrome://extensions/` 页面，点击插件卡片上的 **刷新按钮（🔄）** 即可更新。 @@ -267,6 +272,7 @@ async function handleSummarize(tabId) { } ``` +![](images/image4.png) ## 3.3 侧边栏 UI：展示总结结果 @@ -296,6 +302,7 @@ sidepanel.js： - 收到结果后隐藏加载动画，展示摘要 - "复制" 按钮使用 navigator.clipboard.writeText 复制文字 ``` +![placeholder: 侧边栏 UI 效果截图，展示总结按钮、加载状态和摘要结果三种状态](images/image5.png) @@ -315,6 +322,9 @@ sidepanel.js： > **安全提醒**：API Key 存储在 `chrome.storage.local` 中，仅在本地设备上保存。但如果你要发布到 Chrome Web Store 供他人使用，更安全的做法是搭建一个后端代理服务器，避免 API Key 直接暴露在客户端。 +![placeholder: 设置页面的截图，展示 AI 提供商选择和 API Key 输入框 p1](images/image6-1.png) +![placeholder: 设置页面的截图，展示 AI 提供商选择和 API Key 输入框 p2](images/image6-2.png) +![placeholder: 设置页面的截图，展示 AI 提供商选择和 API Key 输入框 p3](images/image6-3.png) # 第 4 章：使用 Chrome 内置 AI（无需 API Key） @@ -329,8 +339,12 @@ sidepanel.js： * 22 GB 可用存储空间（需要下载模型） * GPU 显存 4GB 以上，或 CPU 内存 16GB 以上且 4 核以上 -在 Chrome 地址栏输入 `chrome://flags`，搜索 `Summarization API`，确保它是 **Enabled** 状态。 +在 Chrome 地址栏输入 `chrome://flags`，搜索对应关联Summarization的flag，确保它是 **Enabled** 状态。 +* 在 Chrome 131–137 版本中，该开关为 Summarization API。 +* 在 Chrome 138–144 版本中，该开关更名为 Summarization API for Gemini Nano。 +* 在 Chrome 145+ 版本中，Summarization API for Gemini Nano 已被移除，其总结功能已整合到 Prompt API for Gemini Nano +![placeholder: chrome://flags 页面截图，展示 Summarization API 的开关位置](images/image7.png) ## 4.2 使用 Summarizer API @@ -383,6 +397,7 @@ async function summarizeWithBuiltinAI(text) { 3. 当选择 OpenAI 或 Claude 时，显示 API Key 输入框 ``` +![placeholder: 更新后的设置页面截图，展示三个 AI 提供商选项，选中 Chrome 内置 AI 时 API Key 输入框隐藏](images/image8.png) # 第 5 章：测试与调试 @@ -406,6 +421,7 @@ async function summarizeWithBuiltinAI(text) { 2. 在 Console 面板中，点击左上角的下拉框，选择你的插件名称 3. 就能看到 Content Script 的 console 输出 +![placeholder: Chrome DevTools 调试插件的截图，展示如何选择不同的执行上下文来调试不同组件](images/image9.png) ## 5.2 常见问题排查 @@ -417,6 +433,7 @@ async function summarizeWithBuiltinAI(text) { | API 调用失败 | API Key 错误或过期 | 在设置页面重新输入 API Key | | 侧边栏空白 | sidepanel.html 路径错误 | 检查 manifest 中的 side_panel.default_path | + # 第 6 章：发布到 Chrome Web Store（可选） 如果你想把插件分享给其他人使用，可以发布到 Chrome Web Store。 @@ -442,6 +459,9 @@ async function summarizeWithBuiltinAI(text) { Google 会对提交的插件进行审核，通常需要几个工作日。权限越少、描述越清晰，审核通过越快。 +![placeholder: Chrome Web Store Developer Dashboard 的截图，展示插件上传和信息填写界面](images/image10.png) +![placeholder: Chrome Web Store Developer Dashboard 的截图，展示插件上传和信息填写界面p2](images/image10-1.png) + # 第 7 章：写在最后 @@ -470,9 +490,11 @@ Chrome 内置 AI 的出现更是降低了门槛——你甚至不需要 API Key # 参考文献 * [Chrome Extension 官方文档 - Manifest V3](https://developer.chrome.com/docs/extensions/develop/) +* [Chrome Extension 在 Chrome 应用商店中发布](https://developer.chrome.com/docs/webstore/publish?hl=zh-cn) * [Chrome Side Panel API](https://developer.chrome.com/docs/extensions/reference/api/sidePanel) * [Chrome 内置 AI - Summarizer API](https://developer.chrome.com/docs/ai/summarizer-api) * [Chrome 内置 AI - Prompt API](https://developer.chrome.com/docs/ai/prompt-api) * [OpenAI API 文档](https://platform.openai.com/docs/api-reference) * [Anthropic Claude API 文档](https://docs.anthropic.com/en/docs/) +* [Anthropic Claude API 文档](https://developer.chrome.com/docs/webstore/publish?hl=zh-cn)