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

相关推荐
崔庆才丨静觅17 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606118 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了18 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅18 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅19 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅19 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment19 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅19 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊19 小时前
jwt介绍
前端
爱敲代码的小鱼19 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax