Merge pull request #53 from SherryTECNU/dev

完成浏览器AI扩展功能测试/操作图片添加/内容优化

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)
+
 <!-- ![placeholder: 一张效果预览图，左边是一个长文章网页，右边是 Chrome 侧边栏中显示的 AI 生成的摘要](images/image1.png) -->
 
 ## 1.2 Chrome 插件的基本架构
@@ -30,7 +32,7 @@ Chrome 插件（基于 Manifest V3）由几个核心部分组成，它们各司
 
 它们之间的协作流程是这样的：
 
-```
+``` 
 用户点击插件图标
     → 侧边栏打开
     → 用户点击"总结"按钮
@@ -41,7 +43,7 @@ Chrome 插件（基于 Manifest V3）由几个核心部分组成，它们各司
     → AI 返回摘要
     → Service Worker 把摘要发回侧边栏显示
 ```
-
+![placeholder: 一张架构流程图，展示 Content Script、Service Worker、Side Panel 之间的消息传递关系](images/image2.png)
 <!-- ![placeholder: 一张架构流程图，展示 Content Script、Service Worker、Side Panel 之间的消息传递关系](images/image2.png) -->
 
 ## 1.3 两种 AI 方案：云端 API vs 浏览器内置 AI
@@ -147,6 +149,7 @@ AI 会帮你生成完整的项目骨架。让我们逐个看看每个文件的
 * `scripting`：允许插件向页面注入脚本来读取内容
 * `sidePanel`：允许使用 Chrome 侧边栏 API
 
+![placeholder: manifest.json 文件在编辑器中的截图](images/image2b.png)
 <!-- ![placeholder: manifest.json 文件在编辑器中的截图](images/image2b.png) -->
 
 ## 2.3 准备图标
@@ -170,6 +173,8 @@ Chrome 插件需要三个尺寸的图标：16x16、48x48、128x128。你可以
 
 你会看到插件出现在列表中，右上角的工具栏也会多出一个图标。
 
+![placeholder: Chrome 扩展管理页面的截图，展示如何开启开发者模式并加载插件](images/image3.png)
+
 <!-- ![placeholder: Chrome 扩展管理页面的截图，展示如何开启开发者模式并加载插件](images/image3.png) -->
 
 > **提示**：每次修改代码后，回到 `chrome://extensions/` 页面，点击插件卡片上的 **刷新按钮（🔄）** 即可更新。
@@ -267,6 +272,7 @@ async function handleSummarize(tabId) {
 }
 ```
 
+![](images/image4.png)
 <!-- ![placeholder: background.js 代码在编辑器中的截图](images/image4.png) -->
 
 ## 3.3 侧边栏 UI：展示总结结果
@@ -296,6 +302,7 @@ sidepanel.js：
 - 收到结果后隐藏加载动画，展示摘要
 - "复制" 按钮使用 navigator.clipboard.writeText 复制文字
 ```
+![placeholder: 侧边栏 UI 效果截图，展示总结按钮、加载状态和摘要结果三种状态](images/image5.png)
 
 <!-- ![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)
 <!-- ![placeholder: 设置页面的截图，展示 AI 提供商选择和 API Key 输入框](images/image6.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)
 <!-- ![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)
 <!-- ![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)
 <!-- ![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)
+
 <!-- ![placeholder: Chrome Web Store Developer Dashboard 的截图，展示插件上传和信息填写界面](images/image10.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)