💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、豆包、星火、月之暗面及文生图、文生视频 广告
# 不可视的background(常驻)页面 Google[Chrome扩展](http://chromecj.com/)往往包含一个不可见的background页面,Google Chrome扩展的主要业务逻辑都位于此。 > 它的生命周期是插件中所有类型页面中最长的,它随着浏览器的打开而打开,随着浏览器的关闭而关闭,所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面 > background的权限非常高,几乎可以调用所有的Chrome扩展API(除了devtools),而且它可以无限制跨域 需要特别说明的是,虽然你可以通过`chrome-extension://xxx/background.html`直接打开后台页,但是你打开的后台页和真正一直在后台运行的那个页面不是同一个,换句话说,你可以打开无数个`background.html`,但是真正在后台常驻的只有一个,而且这个你永远看不到它的界面,只能调试它的代码。 ![](https://img.kancloud.cn/89/35/8935f5dcc055318560ba8fe7a06f262a_1064x222.png) 两种类型的background 页面, - Persistent background pages,浏览器启动就持续运行,随时可访问。 - Event pages。Event pages是事件驱动运行的,只有在**事件**发生的时候才可以访问。 Persistent**background**pages默认加载入内存,持续运行在后台。在manifest.json文中注册Persistent background page如下: ``` <pre class="calibre10">``` <span class="token3">{</span> <span class="token2">"background"</span><span class="token3">:</span> <span class="token3">{</span> <span class="token">// 2种指定方式,如果指定JS(推荐),那么会自动生成一个背景页 </span> <span class="token">//"page": "background.html"</span> <span class="token2">"scripts"</span><span class="token3">:</span> <span class="token3">[</span><span class="token2">"background.js"</span><span class="token3">]</span><span class="token3">,</span> <span class="token">//persistent为true则为常驻页面</span> <span class="token2">"persistent"</span><span class="token3">:</span><span class="token6">true</span> <span class="token3">}</span> <span class="token3">}</span> ``` ``` Event pages默认是不加载的,只在事件发生时加载并运行。触发加载Event pages的场景如下: - Google Chrome扩展第一次被安装或升级到新版本 - 发生了Event pages监听的事件 - content script或其他Google Chrome扩展发出了一个message - Google Chrome扩展中的其他页面调用了chrome.runtime.getBackgroundPage()方法 Google Chrome扩展通过chrome.runtime.onInstalled.addListener(onInit)要求监听onInstalled事件,Chrome浏览器跟踪当前发生的所有事件。一旦被监听的事件发生,Chrome浏览器就会加载Event pages。 如果Google Chrome扩展通过removeListener取消了对某事件的监听,则该事件发生时Chrome浏览器也不会加载Event pages。 当事件不再被监听器引用后卸载以释放内存并发出chrome.runtime.onSuspend事件。 在manifest.json文中注册Event page如下: ``` <pre class="calibre17">``` <span class="token3">{</span> <span class="token2">"background"</span><span class="token3">:</span> <span class="token3">{</span> <span class="token2">"scripts"</span><span class="token3">:</span> <span class="token3">[</span><span class="token2">"background.js"</span><span class="token3">]</span><span class="token3">,</span> <span class="token2">"persistent"</span><span class="token3">:</span><span class="token6">false</span> <span class="token3">}</span> <span class="token3">}</span> ``` ```