Chrome插件获取window对象

1,721 阅读1分钟

获取Window对象的意义:

windows对象中一般拥有一些有意义的数据,比如React实例,Vue实例,事件,缓存等,而Chrome插件中读取到的window对象做了隔离无法读取。

如何获取

方案1:manifest.json/web_accessible_resource

  • "web_accessible_resource": [{ "resources": ["assets/*", "js/contentScript.js"]}] 注册成功后contentScript和网站在同一作用域,大部分数据能获取。

方案2:document

目前我的项目中遇到注册web_accessible_resource仍然无法读取的情况,可能是一些我不理解的问题

  • 考虑到DOM不管什么作用域都可以读取,所以做了如下方案:
  • 编写JS 在一定条件下,写入到一个指定DOM中image.png
  • 注入JS到网站的dom中image.png
  • 监听目标DOM,获取结果image.png
  • 或者通过window.postMessage / window.onmessage 实现 1:注入的js由于和宿主网站在同一个windwos作用域,可以读取React Vue实例,可以实现数据获取,react组件内部函数调用等。 2:在注入js中调用window.postMessage,发送消息,在插件contentScript中获取数据,就可以实现插件的各种功能