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

相关推荐
stereohomology3 分钟前
MS Edge很多事的一点是把地址栏复制的地址自动转标题文本
前端·edge
imaol121 分钟前
链表 -- 环链表
java·前端·链表
imaol143 分钟前
链表 -- 双向链表
java·前端·链表
东风破_1 小时前
大前端手里的 Next.js:从 #root 到 SEO,一份 HTML 的两种命运
前端·后端
IT_陈寒1 小时前
Vue的v-for不听话?我被这个Key的坑整懵了
前端·人工智能·后端
王林不想说话1 小时前
ES6 到 ES2026 全面进阶指南:新特性、原理、示例与工程落地
前端·javascript·面试
用户43523713814931 小时前
🚀 Vue3 + TypeScript 学习笔记:从泛型 T 到 Promise<T>,终于搞懂了 keyof 和 typeof
前端
跟着群主去吃肉1 小时前
Cinemachine的应用-第三人称视角
前端·unity3d·游戏开发
东方小月1 小时前
从零开发一个 Coding Agent(十):实现 CLI 参数解析与静态命令
前端·人工智能·开源
阿黎梨梨1 小时前
Next.js 全栈开发:从 SPA 的痛点到 SSR 的破局之道
前端·后端