全局执行上下文与浏览器扩展背景脚本的关系

雨明吖_7676

雨明吖_7676

2026-06-10

926人浏览

原创

chrome插件的background.js与网页gec隔离:background.js拥有独立全局执行上下文,全局对象为self而非window,不共享dom api,需通过chrome.runtime.sendmessage通信。

全局执行上下文与浏览器扩展背景脚本的关系

全局执行上下文(GEC)和浏览器扩展的背景脚本(Background Script)**不是同一类执行环境,也不共享同一个全局上下文**。背景脚本运行在独立的、隔离的全局环境中,它有自己的 GEC,但这个 GEC 与网页页面的 GEC 完全分离,也不同于普通网页脚本所依赖的那个 window 全局对象。

背景脚本拥有自己的全局执行上下文

当 Chromium 加载扩展时,会为 background 脚本单独启动一个 JS 执行环境。该环境:

  • 创建一个专属的全局执行上下文,生命周期由浏览器管理(尤其在 manifest v3 中多为 service worker 模式,按需唤醒)
  • 其全局对象不是 window,而是 self(在 service worker 环境中)或特殊的 chrome-extension:// 上下文对象
  • 不参与网页 DOM 的加载流程,也不受页面 HTML 中 <script></script> 顺序影响
  • 变量提升、函数声明挂载等行为仅作用于该脚本自身的 GEC 内部,无法被网页脚本或内容脚本直接访问

与网页全局上下文的关键区别

网页中的 GEC 是以 window 为全局对象、响应 HTML 解析顺序、支持 var/function 提升并挂载到 window 的传统环境;而背景脚本的 GEC:

谷歌浏览器插件IconFont检查器 自动获取当前页面使用到的iconfont库,预览、修改、使用
谷歌浏览器插件IconFont检查器 自动获取当前页面使用到的iconfont库,预览、修改、使用

IconFont检查器是一款用来自动获取当前页面使用到的iconfont库工具,可以用来预览、修改和使用,适用于 Google Chrome 和 Microsoft Edge 浏览器。主要功能:检查字体图标:识别和分析网站上使用的所有字体图标。显示字体名称和字符代码:显示每个字体图标的字体名称和字符代码。查看 CSS 规则:显示用于设置字体图标的 CSS 规则。复制字体代码:轻松复制字体图标的代码

下载
  • 没有 window、document 或 location 等浏览器 DOM API
  • 可直接使用 chrome.* API(如 chrome.tabs、chrome.runtime),但这些在网页 GEC 中不可用
  • 即使两个脚本都叫“全局执行上下文”,它们的词法环境、this 绑定、作用域链、全局对象均互不相通
  • manifest v3 下背景脚本常以 Service Worker 形式运行:无持久状态、事件驱动、每次事件触发新建函数上下文,GEC 不长期驻留

为什么不能把背景脚本当成普通 JS 脚本理解

常见误解是认为“background.js 就是另一个 script 标签”,但实际上:

  • 它不由 HTML 解析器加载,不走 script 标签的加载/解析/执行流水线
  • 不参与网页的变量提升链,不会让网页脚本读到 var foo = 'bar'
  • 它的模块解析遵循 ES Module 规则(若声明为 type="module”),顶层 this 为 undefined,而非 window
  • 调试时需通过 chrome://extensions/ → 背景页 单独打开 DevTools,无法在网页控制台访问其变量

实际开发中的影响

理解这种隔离性对正确设计扩展逻辑很关键:

  • 想从网页向后台通信?必须用 chrome.runtime.sendMessage,不能直接调用函数
  • 需要共享数据?得借助 chrome.storage 或消息传递,而非全局变量
  • 背景脚本中定义的函数无法被 content script 直接引用,必须显式暴露接口(如监听 onMessage)
  • 多个 background script 文件(如 ["a.js", "b.js"])按数组顺序执行,共享同一个 GEC,类似网页中多个内联脚本的加载行为

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

chrome插件 浏览器

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

4486

5

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

2023.07.04

1129

3

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

2023.07.04

4404

6

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

880

4

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

1796

5

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

2023.09.04

3225

4

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

2023.09.12

4193

6

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

2023.09.20

2720

5

java访问控制修饰符介绍
java访问控制修饰符介绍

java访问控制修饰符有四种,分别是public、protected、private、默认访问修饰符。详细介绍:1、public,public是最宽松的访问控制修饰符,被修饰的类、方法和变量可以被任何其他类访问,当一个类、方法或变量被声明为public时,它们可以在任何地方被访问,无论是同一个包中的类还是不同包中的类;2、protected修饰符等等。

2023.09.20

868

7

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程