好几年前豆瓣有篇被转发了很多次的日记，一位用户为了更方便从Bandcamp 添加音乐条目到豆瓣而在淘宝找人花了一千块开发了个浏览器插件，只为了不再一一手动复制粘贴音乐信息。当时大家啧啧称奇都笑称这对豆瓣是真爱。没想到几年之后我踏上了同样的道路──实在是受够了豆瓣添加新书条目繁琐的操作。幸运的是现在不需要花一千块，利用好 AI 同样可以写出一个可用工具。
也看到过大行其道的各类所谓零基础「vibe coding」上架了个应用或是网站的文章，实际点进去查看发现作者要么是会其他编程语言，要么就是 tech 行业的产品经理或其他相关职位，每次都感觉被标题党了。所以这篇还想展示一下没有tech 教育背景、工作背景的人，怎么完成一个不算复杂的浏览器插件开发──没有那么难，但也并不轻松。
过去偶尔我也会为豆瓣创建条目但频率很低，像下面这样的页面忍受一下也就罢了。只是这一年多来由于阅读主题的转移，越来越多我读过的书豆瓣没有条目，这种重复劳动就实在让人厌烦。也看到过其他用户采取的方式是标记一个相同名字的条目在短评里说明是借地标记，这对我而言相当不能接受。而如果想要和中文用户（尤其我的友邻们）进行阅读互动，豆瓣显然还是无法绕过的平台。那就不如自己动手来写个工具，从Goodreads 上抓取图书信息添加到豆瓣。
至此新建条目的无数次复制粘贴操作可以直接简化成点击几次鼠标就能够完成。算上网页加载时间也只需几十秒，至多需要留意下信息是否有误（偶尔 Goodreads 的原始数据可能出错）。
安装链接：
非常流行的 Cursor 和 Claude code 因为付费和注册麻烦的缘故我都没有使用过，只在 VSCode 中使用了 GitHub Copilot Chat 扩展的 agent 模式，对于这么一个小项目已经绰绰有余。
流程相当简单，从 Goodreads 网站页面根据豆瓣需要的数据读取信息并保存，跳转到豆瓣再用 JavaScript 的 element query 选中对应元素设置数值即可。
在 VSCode 中新建一个项目文件夹，将目标页面（Goodreads 书籍详情部分、豆瓣新建条目的三个表单页）的 HTML 源码分别保存，再创建一个 readme 文件，详细写明操作逻辑、每一个页面需抓取或者填写的数据，在 chat 里 @ 上对应文件让它开始工作。
很快一个粗糙的第一版就出现了，但接着就发现一些数据无法直接使用，比如 Goodreads 网页上出版日期的是通常是 "November 4, 2025" 这种格式，而豆瓣的日期则只能选择数字。在脚本里写个转换 function 当然可行，可总觉得非常累赘，再仔细研究发现 Goodreads 页面上有完整的 JSON 数据包含书籍所有信息，这比一一用 document.querySelector 去筛选数据要靠谱得多──网页布局和属性说不定随时会被换掉，但数据结构通常不会大动。
而获取到数据后试图与豆瓣添加条目页面一一对应时不断发现新问题：
将数据格式全部处理完成之后，油猴脚本终于可以使用了。但由于 tampermonkey 并不会自动在不同设备间同步，因此我想将它再改写成 Chrome 和 Firefox 插件上架插件商店。到这一步没想到浏览器扩展的 manifest 文件又是一个大坑，并且 Chrome 对此审核非常严格，每一个使用到的权限都需要详细陈述理由，并且插件上架还必须提供 icon、特定图片比例的插件截图，提供之后审核也需要几天时间，从最开始写到 Chrome 发布完成，零零散散花了快一周。
不过成就感也是无以伦比的（哪怕大部分工作都由 AI 完成），更让人满足的是它确实让添加条目的工作量大大降低了，短短一个月我在豆瓣添加的条目数量就已经超过了过去十几年的。有了 AI 后这类重复型的工作用它来开发辅助工具实在是再方便不过。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。