为什么在Tab中取不到content.js给window设置的变量/函数?

出于安全考虑,Chrome Extension的 Content层脚本(content.js) 运行在一个隔离的环境中,这意味着他们无法直接访问网页所定义的JS变量或函数,反之亦然。这种设计的目的是防止恶意网站干扰扩展的功能,并保护扩展代码不被网页访问或篡改。

所以,当你在 content.js 中给window对象设置变量时,这些变量是被设置在content层自身的隔离window对象中,而不是网页本身的window对象中。因此,网页无法访问这些变量,而且如果网页在其window对象上设置了变量,你的内容脚本也无法直接访问。

如果,要实现 Content层和网页之间的通信与数据共享,你可以使用以下这几种方案:

1.使用window.postMessage进行通信【推荐】

在Content层和网页的window全局变量下都有这个原生API,且它支持安全的跨域通信。你的Content层脚本可以向网页发送消息,网页也能向Content层脚本发送消息。另外,这个API的消息发送能力是独立的:我只管抛出消息,你捕不捕获、处不处理是你的事情;

接收方使用 window.addEventListener('message',(event) => {}) 进行消息处理;

注意,由于网络环境的复杂性(网页本身会因需发送很多消息、注入到网页的扩展也会发送很多消息),所以对自身开发的扩展必须设置一个具有唯一性识别能力的消息标识,例如为每个消息会携带一个拥有随机串前缀的key:ce-a03r49-xxxxxxxx

2.向页面注入script标签及js代码

你可以创建一个<script>标签并将其注入到页面的DOM中。这个被注入的脚本会在页面的全局作用域中运行,能够访问和修改页面的window对象。不过,这个注入的脚本无法直接访问Chrome扩展的API。这时,你需要使用window.postMessage来实现注入脚本和Content层脚本之间的通信。

3.dom元素共享

这种方案适用于数据的传递,相当于将dom作为一个共享媒介。

当你使用Content层脚本或网页自身向页面添加一个隐藏的dom节点,并将数据设置为其属性后,Content层和网页脚本都能获取到这个节点并读取到这些属性值;

但是,这种方案的健壮性比较差,如果是第三方网页设置的dom节点属性需要被扩展读取的,那第三方网页页面结构改变时就需要更改浏览器扩展获取数据的逻辑;

相关推荐
小妖666几秒前
react-router 怎么设置 basepath 设置网站基础路径
前端·react.js·前端框架
xvmingjiang6 分钟前
Element Plus 中 el-input 限制为数值输入的方法
前端·javascript·vue.js
XboxYan23 分钟前
借助CSS实现自适应屏幕边缘的tooltip
前端·css
极客小俊24 分钟前
iconfont 阿里巴巴免费矢量图标库超级好用!
前端
小杨 想拼31 分钟前
使用js完成抽奖项目 效果和内容自定义,可以模仿游戏抽奖页面
前端·游戏
yvvvy34 分钟前
🐙 Git 从入门到面试能吹的那些事
前端·trae
EmmaGuo20151 小时前
flutter3.7.12版本设置TextField的contextMenuBuilder的文字颜色
前端·flutter
pepedd8642 小时前
全面解析this-理解this指向的原理
前端·javascript·trae
渔夫正在掘金2 小时前
神奇魔法类:使用 createMagicClass 增强你的 JavaScript/Typescript 类
前端·javascript
雲墨款哥2 小时前
一个前端开发者的救赎之路-JS基础回顾(三)-Function函数
前端·javascript