我用AI写了一个浏览器插件,然后真香了

图 1 · AI 写浏览器插件全流程

从 0 到 1 ，用 AI 生成 Chrome 插件的全过程——不需要会写代码

一、起因：一个重复劳动的烦恼

我有个习惯：每天浏览 30+个公众号文章，整理成日报。

以前怎么做？ 1. 打开微信读书/订阅号列表 2. 逐个点击阅读 3. 复制标题、摘要、链接到 Excel 4. 按分类整理 5. 生成简报发团队

每天 30 分钟，雷打不动。

直到有一天，我想到：能不能让 AI 帮我做这个？

二、尝试：用 ChatGPT 写插件，结果翻车

我第一反应是问 ChatGPT ：

"帮我写一个 Chrome 插件，自动抓取公众号文章列表"

ChatGPT 给了代码，我复制粘贴，结果： - 报错了（权限配置不对） - 抓不到内容（跨域限制） - 界面丑（ CSS 不会写）

我放弃了。

图 2 · 来财正在写代码

三、转机：用 Hermes Agent 重写

后来我换了个思路： - 不用 ChatGPT ，用 Hermes Agent - 不用"帮我写"，用 "帮我 debug"

第一步：明确需求

我要一个Chrome插件，功能： 1. 在微信公众号文章页，点击按钮 2. 自动抓取：标题、作者、摘要、封面图、发布时间 3. 保存到本地JSON文件 4. 支持批量导出到Excel

第二步：让 Hermes 生成代码

"帮我创建一个Chrome插件项目，包含manifest.json、content.js、popup.html"

Hermes 自动生成： - 项目结构 - 配置文件 - 基础代码框架

第三步：边跑边修

第一次跑： - ❌ 抓不到标题（选择器错了） - ❌ 图片加载失败（跨域问题） - ❌ 保存失败（权限配置错误）

我逐条报错扔给 Hermes ：

"Error: Cannot read property 'textContent' of null"

Hermes 秒回：

"微信公众号的标题元素是
，你用的选择器不对，改成这个试试"

修了 3 次，终于跑通了。

四、成品：功能对比

原版（手动）

•耗时： 30 分钟/天

•准确率： 100%（人眼）

•可复用：否（每次重做）

AI 插件版

•耗时： 2 分钟/天（点击按钮→导出）

•准确率： 95%（自动识别）

•可复用：是（一键批量）

提升

•效率： 15 倍

•可拓展：可随时加新功能

•可分享：插件打包给别人用

图 3 · 来财思考解决方案

五、关键代码：核心逻辑揭秘

1. 抓取文章信息

// content.jsfunctionextractArticleInfo(){consttitle=document.querySelector('h1.rich_media_title')?.textContent;constauthor=document.querySelector('profile_nickname')?.textContent;constdigest=document.querySelector('meta[name="description"]')?.content;constcover=document.querySelector('img[data-src]')?.getAttribute('data-src');consttime=document.querySelector('em[id="publish_time"]')?.textContent;return{title,author,digest,cover,time};}

2. 保存到本地

// 使用 Chrome Storage APIchrome.storage.local.set({articles:[...existing,newArticle]});

3. 导出 Excel

// 使用 SheetJS 库importXLSXfrom'xlsx';constwb=XLSX.utils.book_new();constws=XLSX.utils.json_to_sheet(articles);XLSX.utils.book_append_sheet(wb,ws,'Articles');XLSX.writeFile(wb,'articles.xlsx');

六、踩坑记录：这些坑我替你踩了

坑 1 ：跨域限制

问题：公众号文章页是微信服务器，插件抓不到数据。解决：用 chrome.webRequest 拦截网络请求，直接抓 API 返回。

坑 2 ：页面动态加载

问题：文章内容是 JS 动态渲染的，抓取时还没加载完。解决：用 MutationObserver 监听 DOM 变化，等加载完再抓。

坑 3 ：权限配置

问题： manifest.json 没配 activeTab 权限，按钮点击无效。解决：添加权限配置：

"permissions":["activeTab","storage","downloads"]

坑 4 ：样式冲突

问题：插件弹窗样式被公众号 CSS 污染。解决：用 Shadow DOM 隔离样式。

七、进阶：加更多功能

功能 1 ：自动分类

•按行业分类（医药、科技、金融）

•按平台分类（公众号、知乎、掘金）

•按标签分类（ AI 、区块链、电商）

功能 2 ：智能摘要

•用 AI 生成 3 句话摘要

•提取关键数据点

•标注利好/利空

功能 3 ：定时任务

•每天早上 8 点自动抓取

•生成日报推送到飞书

•异常文章标红提醒

图 4 · 插件开发成功

八、给想复刻的人：完整清单

必备工具

•Chrome 浏览器

•VS Code （可选，用于编辑代码）

•Hermes Agent （或任何 AI 编码助手）

学习路径

1.了解 Chrome 插件基本结构（ manifest.json + content.js + popup.html ）

2.学会用 chrome.storage 保存数据

3.学会用 chrome.tabs 操作标签页

4.学会调试（ F12 开发者工具）

九、结语： AI 编程的真相

很多人以为"用 AI 写代码=复制粘贴就能跑"。

错。

真正的工作流是： 1. 明确需求（你知道要什么） 2. 让 AI 生成初稿（ 5 分钟） 3. 运行测试（发现问题） 4. 把报错扔给 AI（ 5 分钟修复） 5. 循环 3-5 次（直到跑通） 6. 微调优化（你自己动手）

整个过程： 1 小时。

如果是以前，写个 Chrome 插件要： - 学 Manifest API （ 2 小时） - 学 Content Script （ 2 小时） - 学 Storage API （ 1 小时） - 学调试（ 2 小时） - 总计： 7 小时+

AI 编程的本质：把"学习时间"变成"提问时间"。

你不是不会写代码，你只是不知道"该问 AI 什么问题"。

这个插件，我现在每天都在用。它救了我的周一早上。

作者：东哥 | 123 终端主理人 | AI+医药产业观察者本文无广告，纯个人实操经验总结

参考链接

[1] Chrome 插件开发官方文档: https://developer.chrome.com/docs/extensions

[2] Chrome Extensions Cookbook: https://github.com/ChromeChrome/chrome-extensions-cookbook

本文由 AI 辅助创作，作者进行了实测验证和编辑修改。