# Claude Code 浏览器插件教程：网页划重点后导出带出处的 Markdown

Claude Code 浏览器插件教程。已实跑可加载MV3扩展、本地选区读取、跨页出处、存储重开、去重和单项删除；工具栏临时授权和Claude Code会话未执行。

## 开始

先读 task.md 和 prompt.md。starter 是可打开但未实现任务逻辑的起点工程，reference 是本站人工完成的参考。目标代理没有参与生成此次原生账号会话，不能把参考代码称为该产品已执行结果。

```bash
python3 -m http.server 8073 --directory reference
```

HTTP网页访问 http://127.0.0.1:8073/ ，按顺序点击输入、操作和导出控件。8073是示例端口，可自行换用空闲端口。

## 文件

- starter/：起点工程及明确需求。
- reference/：可运行人工参考、原创输入和实际运行结果。
- task.md：七步任务和独立验收。
- verify.py：回读实际下载文件、结果结构和边界的检查。
- native-*-draft.*（若有）：原生结构草案，明确未完成导入/运行验证。

## 本题操作要点

1. starter/extension 可加载但按钮仍待实现；reference/extension 是本站人工完成版本。打开 article-1.html 与 article-2.html，每页标题不同。

2. manifest.json 使用 activeTab、scripting、storage。为自动化本地夹具另有仅 http://127.0.0.1/* 的host权限，不是永久全站授权；在真实网页上由工具栏点击获得的activeTab授权需自己另验。

3. 在文章中用鼠标选择含 strong 元素的句子，点击扩展的“保存当前选区”。记录 text/title/url/capturedAt；只提取选区，不扫描整站。

4. 用 chrome.storage.local 保存 highlights 数组。再次点击同一选区应提示“已经保存”，删除按钮只移除对应一项。

5. 打开Chrome扩展管理页，启用开发者模式并加载reference/extension。普通工具栏入口自动取当前标签；带tab参数的入口只供本地夹具自动化选择已知标签。

6. 同一标签导航到第二页后再选择另一段；重开扩展页面检查三条记录的URL仍指向各自文章。受限chrome://页应显示无法读取提示。

7. 导出 highlights.md 与 highlights.json，真实打开下载文件。本文实测本地权限下的MV3注入、选区捕获、保存、重复拒绝、重开与单项删除；未把自动化入口写成工具栏授权测试。

## 官方依据

- https://code.claude.com/docs/en/common-workflows
- https://developer.chrome.com/docs/extensions/develop/concepts/activeTab
- https://developer.chrome.com/docs/extensions/reference/api/storage

Google与抖音查询词是内容目标，不代表实测搜索量、热榜或流量结果。