AI实现个人阅读网页插件

背景

日常工作中经常需要浏览各种Github项目或者一些网页，逐字逐句看总觉得不够效率，如果在每次打开一个新的页面时就能够掌握大概的内容，然后再决定是否深入阅读就方便多了。有了这样的念头后，总想自己开发一款简单的浏览器插件，但是始终没有提上日程。目前随着AI编程工具越来越强大和普及，使用AI进行辅助开发是程序员工作中不可缺少的一环，这篇文章就是记录利用前段时间免费开放的GitHub Copilot进行插件开发的过程和效果。

了解Chrome插件的结构

在开发Chrome插件前，需要先了解插件的结构和开发流程。由于我完全没有开发Chrome插件的经验，那我可以直接输入问题，让AI给我解答。

经过咨询了编程助手后，大致可以得出Chrome插件主要包含了以下几个组件：
● 清单文件（manifest.json）：manifest.json是插件的配置文件，这是插件的核心，它声明了扩展的基本信息、权限和资源。
● 背景页面（background.js）：background.js是插件的后台脚本，可以在后台运行，处理插件的事件和请求。
● 内容脚本（content_script）：content_scripts是插件的内容脚本，可以注入到网页中与网页进行交互，可以通俗理解成一个静态的html页面。
● 弹出页面（popup.html）：popup.html是插件的弹出窗口页面，可以在用户点击插件图标时显示。主要用于用户和插件进行交互。
● 插件图标（icon.png）：icon.png是插件的图标文件，用于在谷歌浏览器中显示插件图标，这个可有可无。

利用AI辅助生成

利用AI生成代码，最主要是描述清楚自己的需求。写Prompt需要明确最终产品的要求，条理清晰，尽可能详细描述功能和格式。

请你帮我开发一个Chrome插件，要求：

1. 按下快捷键唤起插件的时候，就能够发起API请求，解析当前网页的内容
2. 你需要帮我解析该网页的内容，转换为文本字符串的形式，方便API调用
3. 交互界面为一个响应框和用户问题输入框，输入框下方还有「提问」按钮和「重新回答」按钮，按下「提问」按钮，则响应框响应用户新的输入内容，按下「重新回答」，则会发起前一个API调用请求

模型噼里啪啦一顿输出，关键有意义的部分就是这三个文件，其他的比如图标部分就被我删掉了。

在这个过程中难免生成一些无关或者错误的代码，对于有经验的开发者来说，可能比较好解决，甚至自己就修复了，而大多数人并不一定能搞定，这时候就需要不断把遇到的问题描述给AI，以便AI进行修正。

可以看到background.js是用于唤醒该插件的，当command确认为open-dialog的时候则会唤起该插件。

{"manifest_version": 3,"name": "页面解析助手","version": "1.0","description": "快捷键唤起对话框解析页面内容","permissions": ["activeTab","scripting","commands"],"commands": {"open-dialog": {"suggested_key": {"default": "Ctrl+Shift+Z"},"description": "打开对话框"}},"background": {"service_worker": "background.js"}}

manifest.json中配置了一个commands，里面有个值open-dialog，这对应了前面background.js。

dialog.js 里面其实已经包含了popup.html和content.js的内容，用于插件弹出页面和对应的接口请求等。

实际效果

按下Ctrl+Shift+Z后，自动调用大模型的接口进行解析，看起来还不错，只是markdown格式没有转化，问题不大。除了能实现唤起自动解析网页外，还支持在输入框与模型直接对话，这样就可以随时调用AI而不需要专门到各种大模型开发商的服务平台了，特别是有一些需要频繁验证登陆才能使用的更让人头疼。

翻译和搜索功能

对于有些英文的网页，可能存在一些不常见的单词，我希望能实现一键翻译。并且能够支持搜索功能，即自动调用Google进行搜索。同样把我的需要发送给Copilot，它直接在原来的代码基础上进行修改。

在js中新增了2个功能函数以及相应的html渲染逻辑，在这里我使用了智谱Chatglm4-9b-flash的API。

看起来逻辑是对的，鼠标选中想要处理的文字后，显示出2个按钮，分别支持翻译和搜索功能。

鼠标选中「OpenAI」后，再点击弹出的「搜索」按钮，显示正确跳转到谷歌搜索主页中。

后记

对于程序员来说，利用AI进行辅助开发已经是工作中不可缺少的一部分了，但是也不必过分担心AI取代人类的工作，至少目前看起来不太可能。如果真能替代，估计社会形态已经非常发达了，那到时也没有工作的必要了吧。
目前网络上可以看到各种「0基础AI编程课」，号称完全不懂编程也能开发各种程序和应用，并且字里行间暗示通过该方式实现了盈利。但实际情况却是，完全不懂编程的人是无法利用好AI编程工具，或者说无法与这类工具进行很好的交互。如果完全不懂编程，甚至自己的需求都描述不清楚，对于各种组件或者功能都很模糊，这样又如何让AI替你完成工作呢？名义上是普及编程知识，实际上又是另一种割韭菜的方式，对此希望大家都能保持警惕。