content script 与页面 dom 共享渲染进程但不共享 javascript 上下文,拥有独立沙箱化 window,可操作 dom 却无法访问页面变量或函数,通信需通过 postmessage 等显式桥接机制。

Chrome 插件的 Content Script 默认与页面 DOM 共享同一渲染进程,但**不共享 JavaScript 执行上下文**——这是实现作用域隔离的核心机制。
Content Script 与页面脚本完全隔离
Chrome 会为 Content Script 创建一个独立的、与页面 JS 环境平行的执行环境。即使页面中定义了 var foo = 'page' 或 window.bar = 42,Content Script 中也访问不到这些变量,反之亦然。
- 全局对象不同:Content Script 的
window是沙箱化的,它不是页面真实的window对象(尽管能读写 DOM) - 无法直接调用页面函数:比如页面有
function handleClick() {...},Content Script 中直接调用会报ReferenceError -
eval和Function构造器在 Content Script 中运行的代码,仍处于其自身作用域内,不会污染页面
DOM 可访问,但 JS 不互通
Content Script 可以自由操作页面 DOM(如 document.querySelector('button').click()),也能监听事件、注入元素,但所有 JavaScript 逻辑都在自己的闭包中运行。
- 你写的
let count = 0; setInterval(() => count++, 1000)完全独立于页面任何计时器 - 通过
document.createElement('script')动态插入的脚本,默认运行在页面上下文中(即能访问页面变量),这不是 Content Script 本身的行为,而是你主动桥接的结果
需要通信时必须显式桥接
若需与页面脚本交换数据或触发逻辑,必须通过明确的通信机制:
- 使用
window.postMessage()+ 监听message事件(推荐,安全且跨源兼容) - 借助自定义 DOM 属性或事件(例如设置
data-plugin-ready="true"并 dispatchCustomEvent) - 避免直接修改
window属性传函数(易被页面覆盖或引发 CSP 报错)
注意特殊例外:unsafe-eval 和内联脚本限制
Manifest V3 下,Content Script 默认禁用 eval 和内联字符串执行。即使你绕过限制执行代码,它仍在 Content Script 沙箱中,不会自动获得页面作用域。
- 像
eval('console.log(window.location)')输出的是 Content Script 视角下的window(同页面一致的 location,但其他属性隔离) - 真正想“进入”页面作用域执行任意 JS,唯一可靠方式是注入
<script></script>标签,并确保其src或内容由页面上下文解析
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











