AI assistant browser plugin
Merge pull request #53 from SherryTECNU/dev AI assistant browser plugin
Sanbu
|
After Width: | Height: | Size: 721 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 850 KiB |
|
After Width: | Height: | Size: 144 KiB |
|
After Width: | Height: | Size: 98 KiB |
|
After Width: | Height: | Size: 155 KiB |
|
After Width: | Height: | Size: 246 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 361 KiB |
@@ -16,6 +16,8 @@
|
||||
|
||||
想象一下：你打开一篇 5000 字的技术博客，点一下插件按钮，几秒钟后，一份精炼的中文摘要就出现在侧边栏里。这就是我们要构建的东西。
|
||||
|
||||
|
||||
|
||||
<!--  -->
|
||||
|
||||
## 1.2 Chrome 插件的基本架构
|
||||
@@ -30,7 +32,7 @@ Chrome 插件（基于 Manifest V3）由几个核心部分组成，它们各司
|
||||
|
||||
它们之间的协作流程是这样的：
|
||||
|
||||
```
|
||||
```
|
||||
用户点击插件图标
|
||||
→ 侧边栏打开
|
||||
→ 用户点击"总结"按钮
|
||||
@@ -41,7 +43,7 @@ Chrome 插件（基于 Manifest V3）由几个核心部分组成，它们各司
|
||||
→ AI 返回摘要
|
||||
→ Service Worker 把摘要发回侧边栏显示
|
||||
```
|
||||
|
||||
|
||||
<!--  -->
|
||||
|
||||
## 1.3 两种 AI 方案：云端 API vs 浏览器内置 AI
|
||||
@@ -147,6 +149,7 @@ AI 会帮你生成完整的项目骨架。让我们逐个看看每个文件的
|
||||
* `scripting`：允许插件向页面注入脚本来读取内容
|
||||
* `sidePanel`：允许使用 Chrome 侧边栏 API
|
||||
|
||||
|
||||
<!--  -->
|
||||
|
||||
## 2.3 准备图标
|
||||
@@ -170,6 +173,8 @@ Chrome 插件需要三个尺寸的图标：16x16、48x48、128x128。你可以
|
||||
|
||||
你会看到插件出现在列表中，右上角的工具栏也会多出一个图标。
|
||||
|
||||
|
||||
|
||||
<!--  -->
|
||||
|
||||
> **提示**：每次修改代码后，回到 `chrome://extensions/` 页面，点击插件卡片上的 **刷新按钮（🔄）** 即可更新。
|
||||
@@ -267,6 +272,7 @@ async function handleSummarize(tabId) {
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
<!--  -->
|
||||
|
||||
## 3.3 侧边栏 UI：展示总结结果
|
||||
@@ -296,6 +302,7 @@ sidepanel.js：
|
||||
- 收到结果后隐藏加载动画，展示摘要
|
||||
- "复制" 按钮使用 navigator.clipboard.writeText 复制文字
|
||||
```
|
||||
|
||||
|
||||
<!--  -->
|
||||
|
||||
@@ -315,6 +322,9 @@ sidepanel.js：
|
||||
|
||||
> **安全提醒**：API Key 存储在 `chrome.storage.local` 中，仅在本地设备上保存。但如果你要发布到 Chrome Web Store 供他人使用，更安全的做法是搭建一个后端代理服务器，避免 API Key 直接暴露在客户端。
|
||||
|
||||
|
||||
|
||||
|
||||
<!--  -->
|
||||
|
||||
# 第 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
|
||||
|
||||
|
||||
<!--  -->
|
||||
|
||||
## 4.2 使用 Summarizer API
|
||||
@@ -383,6 +397,7 @@ async function summarizeWithBuiltinAI(text) {
|
||||
3. 当选择 OpenAI 或 Claude 时，显示 API Key 输入框
|
||||
```
|
||||
|
||||
|
||||
<!--  -->
|
||||
|
||||
# 第 5 章：测试与调试
|
||||
@@ -406,6 +421,7 @@ async function summarizeWithBuiltinAI(text) {
|
||||
2. 在 Console 面板中，点击左上角的下拉框，选择你的插件名称
|
||||
3. 就能看到 Content Script 的 console 输出
|
||||
|
||||
|
||||
<!--  -->
|
||||
|
||||
## 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 会对提交的插件进行审核，通常需要几个工作日。权限越少、描述越清晰，审核通过越快。
|
||||
|
||||
|
||||
|
||||
|
||||
<!--  -->
|
||||
|
||||
# 第 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)
|
||||
|
||||
|
||||