首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ChatGPT 浏览器插件实现思路解析

在页面上运行的 content scripts 在后台运行的 background script后台运行的脚本入口文件为:src/bg/background.js页面运行的脚本入口文件为:src/inject/inject.js...页面交互图片界面相关的代码在 src/inject 目录下,内容很简单,一个样式文件和一个脚本文件,其中样式文件还是个空文件,直接忽略,主要看inject.js,核心代码是红框部分:图片代码不多,概括一下执行流程...:打开 Google 网页时 inject.js 被注入,页面的代码开始执行执行时向 background.js 发送一个消息,background.js 处理完消息后会执行回调回调里会发起一个轮询任务...那么这个 localhost:5001/chat 是什么来头?...send_message 把搜索词发送出去通过 get_last_message 获取最后消息的返回结果把结果作为 response 返回图片两个函数的实现如上,这里面的使用到的 box、PAGE 是什么

5K161
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Chrome插件开发

    inject.js​ 上文也说到了content是无法访问页面中的 JS,可以操作 DOM,但是 DOM 却不能调用它,也就是无法在 DOM 中通过绑定事件的方式调用content中的代码(包括直接写onclick...这时候就需要注入 inject.js 这个文件 document.addEventListener('DOMContentLoaded', function () { injectCustomJs(...) }) // 向页面注入JS function injectCustomJs(jsPath) { jsPath = jsPath || 'js/inject.js' var temp = document.createElement...temp.setAttribute('type', 'text/javascript') // 获得的地址类似:chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js...也就是下面的这行代码 { // 普通页面能够直接访问的插件资源列表,如果不设置是无法直接访问的 "web_accessible_resources": ["js/inject.js"],

    3.9K20
    领券