Chrome 插件开发 V3版本 跨域处理

插件构成

chrome 插件通常由以下几部分组成:

  1. manifest.json:相当于插件的 meta 信息,包含插件的名称、版本号、图标、脚本文件名称等,这个文件是每个插件都必须提供的,其他几部分都是可选的。

  2. background script:可以调用全部的 chrome 插件 API,实现跨域请求、网页截屏、弹出 chrome 通知消息等功能。相当于在一个隐藏的浏览器页面内默默运行。

  3. 功能页面:包括点击插件图标弹出的页面(简称 popup)、插件的配置页面(简称 options)。

  4. content script:早期也被称为 injected script,是插件注入到页面的脚本,但是不会体现在页面 DOM 结构里。content script 可以操作 DOM,但是它和页面其他的脚本是隔离的,访问不到其他脚本定义的变量、函数等,相当于运行在单独的沙盒里。content script 可以调用有限的 chrome 插件 API,网络请求收到同源策略限制。

插件的架构可以参考官方文档

重点说明以下几点:

  1. browser action 和 page action:这俩我们可以理解为插件的按钮。browser action 会固定在 chrome 的工具栏。而 page action 可以设置特定的网页才显示图标,在地址栏的右端,如下图:

大部分插件点击之后会显示 UI,也就是上文描述的插件功能页面部分,一般称为 popup 页面,如下图:

popup 无法通过程序打开,只能由用户点击打开。点击 popup 之外的区域会导致 popup 收起。

page action 和 browser action 分别由 manifest.json 的 page_actionbrowser_action 字段配置。

  1. 由于 content script 受到同源策略的限制,所以一般网络请求都交给 background script 处理。

  2. content script、插件功能页面、background script 之间的通信架构如下图:

  1. chrome 可以打开多个浏览器窗口,而一个窗口会有多个 tab,所以插件的结构大致如下:

如上图,功能页面是每个 window 一份,但是每个 tab 都会注入 content script。

处理跨域

实现思路是:content.js 使用chrome.runtime.sendMessage 发送消息,background.js 使用 chrome.runtime.onMessage.addListener 方法进行监听,当监听收到发送的消息时,我们在background.js 上进行请求调用

在mainfest.json permissions 配置

"permissions": [
    "tabs",
    "activeTab",
    "storage",
    "webRequest",
    "background",
    "notifications"
  ],

content.js

重点是 chrome.runtime.sendMessage 方法

background.js

重点是 chrome.runtime.onMessage.addListener 方法

chrome.runtime.onMessage.addListener(function (e, sender) {
  const { message, data } = e
  console.log('1111',e)
  const tabId = sender.tab.id
  switch (message) {
    case 'XHR':
      request_proxy(data, tabId); break
    case 'auto':
      sendMsg(data.wxid); break
  }
})

开发者客栈-帮助开发者面试的平台-顽强网络

Chrome浏览器插件开发:进阶 • xu3352's Tech Blog

相关推荐
学不会•35 分钟前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年5 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder5 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727576 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架