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.htmlcontent.js的内容,用于插件弹出页面和对应的接口请求等。

实际效果

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

翻译和搜索功能

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

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

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

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

后记

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

posted @   深度学习机器  阅读(44)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示