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插件,要求:
- 按下快捷键唤起插件的时候,就能够发起API请求,解析当前网页的内容
- 你需要帮我解析该网页的内容,转换为文本字符串的形式,方便API调用
- 交互界面为一个响应框和用户问题输入框,输入框下方还有「提问」按钮和「重新回答」按钮,按下「提问」按钮,则响应框响应用户新的输入内容,按下「重新回答」,则会发起前一个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替你完成工作呢?名义上是普及编程知识,实际上又是另一种割韭菜的方式,对此希望大家都能保持警惕。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤