为什么在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节点属性需要被扩展读取的,那第三方网页页面结构改变时就需要更改浏览器扩展获取数据的逻辑;

相关推荐
苏琢玉几秒前
从 Hexo 到 Astro:重构我的个人博客
前端·hexo
街尾杂货店&7 分钟前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈9 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
金梦人生1 小时前
Css性能优化
前端·css
Holin_浩霖1 小时前
UI设计的底层逻辑:从组件到系统的跃迁
前端
Holin_浩霖1 小时前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇1 小时前
CSS属性继承与特殊值
前端·css
kevlin_coder1 小时前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生1 小时前
JS 性能优化
前端·javascript
我有一棵树1 小时前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex