过去一周, 是机器学习领域最受关注的话题,随着它的热度不断上升,成功出圈引起了人们的广泛关注和讨论。在惊讶于它的性能和能力的同时,很多开发者也纷纷利用 的技术,开发出各种有意思的应用。比如 《一大波 开源项目,诞生了》。
浏览器插件在这波开源项目里跑得最快,应用场景有挑事的意味:把 放到搜索的场景下去和搜索引擎一较高下。
例如下面两款:
– 实现思路
项目地址:
整体构成
从插件的配置清单上可以看出,插件由两部分构成:
在页面上运行的 在后台运行的
后台运行的脚本入口文件为:src/bg/.js
页面运行的脚本入口文件为:src//.js,除了代码文件,还注入和 UI 相关的样式文件 src//.css。因为功能限制在 搜索里生效,所以还限定了注入条件 *
后台脚本
从前面的分析可知,后台脚本相关代码在src/ 目录下,只有一个文件 .js,内容非常简单。
一句话总结:收到页面发来的消息后,将页面上的插件按钮展示出来,给插件刷存在感,没了,可以直接忽略这部分。
页面交互
界面相关的代码在 src/ 目录下,内容很简单,一个样式文件和一个脚本文件,其中样式文件还是个空文件,直接忽略,主要看.js,核心代码是红框部分:
代码不多,概括一下执行流程:
打开 网页时 .js 被注入,页面的代码开始执行执行时向 .js 发送一个消息,.js 处理完消息后会执行回调回调里会发起一个轮询任务:每隔 10ms 检查一下这个网页是否加载完毕没加载完毕则继续轮询,加载完毕则取消轮询加载完毕后,从页面上获取用户输入的搜索内容:.(“q”)[0].value;同时往页面上注入一个自定义的框,展示提示 ” “.(“”).(”, html);接着就是发起网络请求,从本机的 :5001/chat 端口获取 生成的结果,将结果替换到页面上 id= 的 HTML 元素里。
那么这个 :5001/chat 是什么来头?这个就要看作者的另一个项目:-api
后端代码
项目地址:
这个项目的核心代码只有一个文件 .py,按项目作者的话来说,就是提供了一个非官方的 。
代码也很简短:
从请求中获取 q 字段的内容,也就是前面传输过来的搜索词使用 把搜索词发送出去通过 获取最后消息的返回结果把结果作为 返回
两个函数的实现如上,这里面的使用到的 box、PAGE 是什么?代码文件里找一找:
概括起来:使用 这个浏览器自动化测试框架启动了一个浏览器,而且设为有头模式,即把被控制的浏览器显示出来。
在 .py 程序启动时 ,打开 的网页,如果没有登录会提示登录,以登录的话,服务器就跑起来了。
可以看到这里设为非多线程,这是因为 网页限制一次只能进行一个会话,上一个问题没回答完,不能发起下一个问题。
回过头来看 CHAT 接口的代码,总结起来流程就是:
程序启动时,新建一个浏览器页面,跳转到 的网页当接收到 chat 请求时,将请求的内容取出来,输入到 网页上的输入框,回车( 函数)查看 页面看页面是否还在加载 返回的结果,如果返回完了,将结果从网页上提取出来,返回以上,就完成 的功能小结
这个项目本质上是一个披着浏览器插件外皮的 Web 自动化程序。
因为需要利用 操作目标界面,这部分功能浏览器插件做不了,因此用后端机器实现。
浏览器插件只是作为用户交互的入口代理,从界面上提取输入数据,从后端获取输入并展示出来。
受限于本身 网页端的限制,只能配合本地搭建服务端使用,通用性不强。
同时由于利用的是 操作浏览器,性能开销和资源占用都挺大的。
总的来说,这个方案虽然粗暴,但在没有官方 API 的情况时却是蛮实用的,这个思路可以用在很多其他类似的场景上。
chat-gpt– 实现思路
项目地址:
这个项目在前一个项目的基础上,做了进一步的优化,青出于蓝而胜于蓝:
跨平台支持:支持 、、 Edge,同时上架了官方商店更方便易用:不再需要本地搭建服务端,利用浏览器插件本身提供的能力,模拟 网页去 获取数据交互更友好:信息展示在搜索结果列表的右侧,不影响浏览搜索结果,也便于查看 的输出
TO BE