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 可以设置特定的网页才显示图标,在地址栏的右端,如下图:

1527402e151243a4b8aebe27ed73f3aa

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

3d831b9e92d5464290066cabb79c487b

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

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

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

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

aea982dc88de429a8960b347e30d5c0b

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

050f7069bb824d1eab99ef97ce7e96c1

如上图,功能页面是每个 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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Chrome浏览器从版本108开始,对于跨域问题做出了一些改变。在此之前,浏览器是严格限制跨域请求的,但是自从Chrome 108版本之后,浏览器默认支持通过一些新的方法来解决跨域问题。 首先,Chrome 108引入了新的CORS(跨域资源共享)规范,它通过在服务器的响应头中添加一些额外的字段来指示浏览器是否允许跨域请求。如果服务器返回的响应中包含了'Access-Control-Allow-Origin'字段且值为请求的域名,则浏览器将允许该跨域请求。这样,网页开发者可以通过在服务器端设置正确的响应头来解决跨域问题。 其次,Chrome 108还引入了一种新的跨域请求方式,即Fetch API。Fetch API是一种用于代替传统的XMLHttpRequest对象的新的网络请求API,它默认支持跨域请求,并且提供了一系列的方法和选项来处理跨域问题。通过使用Fetch API,网页开发者可以更灵活地发送和处理跨域请求。 此外,Chrome 108还提供了一些其他的跨域解决方案。例如,开发者可以在服务器端设置CORS策略,通过细粒度的配置来控制哪些域名可以进行跨域请求。另外,Chrome 108也支持通过在请求中添加'Access-Control-Allow-Credentials'字段来允许跨域请求携带认证信息。 综上所述,Chrome浏览器108版本以上对跨域问题做出了一些改进和优化。通过使用CORS规范、Fetch API以及其他解决方案,网页开发者可以更轻松地处理跨域请求,并提供更好的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

古月_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值