过去一周， 是机器学习领域最受关注的话题，随着它的热度不断上升，成功出圈引起了人们的广泛关注和讨论。在惊讶于它的性能和能力的同时，很多开发者也纷纷利用 的技术，开发出各种有意思的应用。比如 《一大波 开源项目，诞生了》。
浏览器插件在这波开源项目里跑得最快，应用场景有挑事的意味：把 放到搜索的场景下去和搜索引擎一较高下。
例如下面两款：
– 实现思路
项目地址：
整体构成
从插件的配置清单上可以看出，插件由两部分构成：
在页面上运行的 在后台运行的
后台运行的脚本入口文件为：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
相关文章
