解决mv3版本浏览器插件，不能注入js脚本问题

文章目录

背景
引入ifream
解决ifream和父页面完全跨域问题
参考链接

背景

浏览器插件升级mv3版本后，不能再使用content_script内容脚本向原浏览器（top）注入script标签达到注入脚本的目的。浏览器认为插入未经审核的脚本是不安全的行为。

引入ifream

由插件（扩展）插入一个ifream标签。ifream子页面中包含的script标签中脚本允许插入到top页面中。但是插入后存在跨域问题：

完全跨域（二级域名和主域名都不相同）

// 完全跨域的域名
document.domain = 'aaa.xxx.com' // 父页面域名
document.domain = 'bbb.ccc.com' // 子页面域名

在这里插入图片描述

不完全跨域

// 二级域名不同，主域名相同
document.domain = 'aaa.xxx.com' // 父页面域名
document.domain = 'bbb.xxx.com' // 子页面域名

不跨域

这里不讨论不跨域和不完全跨域的问题。毕竟扩展插入的子页面大部分都是插入到别人的网站里面。
扩展创建ifream标签，引入子页面：

let ifELe = document.createElement('iframe')
ifELe.src = 'domain' // 具体的逻辑由ifream子页面处理
// ifELe.src = 'https://www.baidu.com'
ifELe.style.width = '100%'
ifELe.setAttribute('data-name', 'xxx')

document.body.appendChild(ifELe)

注！引入的子页面首先要支持被其他页面嵌入或不包含一些限制。否则会被父页面阻止加载。

解决ifream和父页面完全跨域问题

跨域时，子ifream页面不能获取到父页面window document对象
但可以使用消息广播进行数据传输，绕过跨域问题。

// ifream子页面：监听父页面发来的数据：ifream里面的window对象
  window.addEventListener('message-type', function(e){
      console.log(e.detail)
  })

// top父页面：父页面的window对象
 window.dispatchEvent(new CustomEvent('message-type', {
       detail: {
          name: '张三',
          age: 18
       }
 }))