content访问document & window对象数据

别想了!访问不到。content与页面只共享DOM元素的访问,不能访问到页面内方法 & 对象属性。
通常地,content采用脚本注入的方式来实现对原生页面上方法 or 对象属性的访问!

// 对比一下!下面两段 content.js 代码有什么不同

// content.js
// 假设原生页面有一个属性需要访问,window.data = 1

// 第一段
function test1() {
    
    
  // window是页面上对象,但是不共享访问
  return window.data
}

// 第二段
function test2() {
    
    
  // 创建元素
  var script = document.createElement('script')
  script.type = 'text/javascript'
  script.innerHTML = 'document.body.setAttribute("data", window.data)'
  // 元素插入文档(脚本注入),插入的脚本直接运行,向body上插入一个data属性和数据
  document.head.appendChild(script)
}

// ===> 描述:

test1(): 是想要直接调用页面上的对象,所以是调用不到的,因为数据不共享
test2(): 是将脚本通过content.js 注入到页面中,由页面自己去执行页面环境的代码得到我们想要的数据。

注!将数据放到DOM元素上,就可以直接通过document访问了。如果没有元素(或脚本)就想办法变成元素(或脚本)来访问!

content内容里面的脚本不能和浏览器页面环境共享,content脚本和页面不在一个环境里面:

在这里插入图片描述

借助扩展环境的脚本,生成页面dom节点,将新脚本注入到页面脚本中去:

  // 创建元素
  var script = document.createElement('script')
  script.type = 'text/javascript'
  // 要插入的页面脚本内容 innerHTML
  script.innerHTML = 'document.body.setAttribute("data", window.data)'
  // 元素插入文档(脚本注入),插入的脚本直接运行,向body上插入一个data属性和数据
  document.head.appendChild(script)

猜你喜欢

转载自blog.csdn.net/dongzi_yu/article/details/126624874