Chrome Extension Script WorldISOLATED / MAIN原理与适用场景适用于 Chrome Manifest V3MV3扩展开发一、概述Chrome 为了保证网页与扩展之间的安全隔离引入了Execution World执行世界的概念。Content Script 并不是直接运行在网页 JavaScript 环境中而是运行在不同的World世界。目前主要有World含义是否默认ISOLATED隔离环境Extension World✅ 默认MAIN页面环境Page World❌ 需要主动指定Manifest V3 中可以通过{content_scripts:[{matches:[all_urls],js:[content.js],world:MAIN}]}或者chrome.scripting.executeScript({target:{tabId},files:[inject.js],world:MAIN});指定执行环境。二、Chrome 的执行环境浏览器打开一个网页以后大致存在如下环境Chrome Browser │ ├── Web Page网页 │ │ │ ├── Window │ ├── Document │ ├── 页面 JS │ └── 第三方 JS │ ├── Extension WorldISOLATED │ │ │ ├── Content Script │ ├── chrome.runtime │ └── chrome.storage │ └── Service Worker可以看到网页 JS和Content Script其实并不在同一个 JavaScript 环境。三、ISOLATED默认什么是 ISOLATEDISOLATED 就是Chrome 给每个扩展创建一个独立 JavaScript 运行环境。它共享DOMDocument页面元素但是不共享 JavaScript 变量。举个例子网页window.user{name:Tom};Content Scriptconsole.log(window.user);输出undefined很多新人第一次都会觉得奇怪。原因你的 window 并不是网页那个 window。它只是DOM 相同 JS Context 不同为什么还能操作 DOM例如document.body.style.backgroundred;可以成功。因为DOM 是共享的。网页 │ ├───────────── DOM ─────────────┐ │ │ ISOLATED World MAIN World两个 JS Context操作的是同一棵 DOM Tree。JS Context 隔离举例网页letcount100;Content Scriptconsole.log(count);结果ReferenceError再比如网页window.fetchfunction(){console.log(page);}Content Scriptfetch(...);调用的是浏览器原始 fetch。不是页面修改后的 fetch。为什么这么设计为了防止网页修改扩展。例如恶意网页chrome.runtime.sendMessagefunction(){stealData();}如果没有隔离扩展就危险了。Chrome 所以把 JS Context 完全隔离。ISOLATED 可以访问哪些 API可以。例如chrome.runtime.sendMessage(...)可以。chrome.storage chrome.runtime chrome.i18n chrome.tabs部分都是扩展能力。这是 MAIN 没有的。ISOLATED 优点✅ 安全不会污染网页。不会被网页污染。可以直接使用chrome.runtime chrome.storage chrome.cookies message适合90% 插件开发。ISOLATED 缺点不能window.React window.Vue window.jQuery webpackChunk __NEXT_DATA__这些页面变量。也不能 Hookfetch XMLHttpRequest history.pushState因为不是一个 JS Context。四、MAIN什么是 MAINMAIN就是让 Content Script真正运行到网页 JS 环境也就是和网页自己的 JS属于同一个 Context。执行结构网页 JS │ ├──── inject.jsMAIN此时window this globalThis完全一致。举例网页window.user{name:Tom}MAINconsole.log(window.user);输出{name:Tom}可以访问。Hook fetchMAINconstoldFetchwindow.fetch;window.fetchfunction(...args){console.log(args);returnoldFetch.apply(this,args);}以后页面fetch(...)都会经过你的 Hook。ISOLATED 做不到。Hook XHRconstopenXMLHttpRequest.prototype.open;XMLHttpRequest.prototype.openfunction(){console.log(arguments);returnopen.apply(this,arguments);}页面所有 Ajax都会经过。Hook History例如ReactVueSPAhistory.pushState...只能MAIN。修改页面变量例如window.tokenabc;MAIN可以。ISOLATED不可以。调用 React例如window.ReactMAIN可以。调用 Vue例如window.__VUE__MAIN可以。MAIN 的限制MAIN没有chrome.runtime例如chrome.runtime.sendMessage()报错chrome is undefined因为MAIN已经变成网页 JS。不是扩展环境。因此如果MAIN想调用Extension API。需要postMessage或者CustomEvent通知ISOLATED。五、MAIN 与 ISOLATED 通信最常见MAIN │ postMessage │ ISOLATED │ chrome.runtime.sendMessage │ Service Worker例如MAINwindow.postMessage({type:GET_TOKEN});ISOLATEDwindow.addEventListener(message,(e){if(e.data.typeGET_TOKEN){chrome.runtime.sendMessage({type:GET_TOKEN});}});六、两者对比对比项ISOLATEDMAIN默认环境✅ 是❌ 否JS Context独立与页面相同DOM共享共享页面变量❌✅修改页面 JS❌✅Hook fetch❌✅Hook XHR❌✅Hook History❌✅React/Vue 全局变量❌✅chrome.runtime✅❌chrome.storage✅❌安全性高较低推荐程度⭐⭐⭐⭐⭐⭐⭐⭐七、典型应用场景场景一页面美化推荐 ISOLATED例如修改 CSS添加按钮添加侧边栏阅读模式广告屏蔽原因只需要操作 DOM不需要访问页面 JS。场景二网页自动化推荐 ISOLATED例如document.querySelector(...)button.click()适用于自动签到自动填写表单自动点击按钮场景三抓取页面数据推荐 ISOLATED例如document.querySelectorAll(...)读取文本图片表格DOM 信息场景四Hook 网络请求推荐 MAIN例如监控fetch() XMLHttpRequest WebSocket适用于网络调试数据采集API 分析场景五读取前端框架状态推荐 MAIN例如读取window.React window.__NEXT_DATA__ window.__INITIAL_STATE__ window.__NUXT__适用于React DevTools 类工具Vue 调试工具数据分析插件场景六修改网页运行逻辑推荐 MAIN例如重写window.fetch history.pushState console.log alert适用于APM性能监控调试工具自动测试八、最佳实践推荐原则能用 ISOLATED就不要用 MAIN。原因更安全能直接访问扩展 API不容易受到网页脚本影响更符合 Chrome 扩展的设计理念推荐架构对于复杂插件推荐采用双 World 架构Chrome Extension Service Worker ▲ │ chrome.runtime │ ┌─────────┴─────────┐ │ │ ISOLATED World MAIN World │ │ │ postMessage │ └─────────┬─────────┘ │ Web Page职责划分如下MAIN负责Hook fetchHook XHRHook WebSocket读取页面变量修改页面 JavaScript 行为ISOLATED负责DOM 操作与 Service Worker 通信使用chrome.*API数据存储权限管理消息转发Service Worker负责网络请求插件后台逻辑持久化存储标签页管理生命周期管理这种分层方式是目前多数大型 Chrome 扩展如开发者工具、网络抓包、自动化工具等常见的实现模式兼顾了安全性、可维护性和扩展能力。