chrome extension 系列:第六章——background

顾名思义,background即是后台的意思。在chrome extension中,除了我们可以直接接触到的popup和side panel以外,还有后台运行的环境,一些较为敏感的能力只有在background中才能使用。

在chrome extension manifest v3中,background的运行环境是Extension Service WorkerService Worker 的概念在web开发中我们已经接触过,简单来说它就是一个在背后默默工作的助手,独立于网页,使开发者能够在没有网页或用户交互的情况下运行特定的功能。

Service Worker 有几个特点:无法访问 DOM,发起网络请求需要使用 fetch() API等。

生命周期

扩展 Service Worker 在需要时加载,并在其进入休眠状态时取消加载。一般来说,如果扩展程序在 30 秒后没有被使用,Chrome 就会将其暂停。

安装

当 extension 被加载时,会发生安装,按顺序发生三个事件。

  1. Web Service Worker 的 install 事件
  2. chrome.runtime.onInstalled
  3. Web Service Worker 的 active 事件

空闲和关停

通常,Chrome 会在满足以下条件之一时终止 Service Worker:

  • 无操作 30 秒后。收到事件或调用扩展程序 API 会重置此计时器。
  • 单个请求(例如事件或 API 调用)的处理用时超过 5 分钟。
  • fetch() 响应的传递时间超过 30 秒时。

事件和对扩展程序 API 的调用会重置这些计时器,如果 Service Worker 已休眠,传入事件将使它们恢复。不过,您应该将 Service Worker 设计为能够灵活应对意外终止。

实时更新

上面说到,Service Worker 在不需要时会卸载。我们有在 worker 中使用 websocket 进行消息通信的需求时,是需要 worker 一直运行的。Chrome 会采用一系列启发法来确定扩展程序是否"正在使用",其中之一是处于活动状态的 WebSocket 连接。Chrome 不会暂停在过去 30 秒内发送或接收 WebSocket 消息的扩展程序。

因此如果我们需要保持 worker 一直运行,我们可以使用心跳包的方式,以小于30秒的周期发送心跳包,来使 WebSocket 连接保持,同时令 worker 不被暂停。

事件

扩展程序 Service Worker 同时支持标准 Service Worker 事件和扩展程序 API 中的许多事件。

Service Worker 中的事件处理脚本需要在全局范围内声明,这意味着它们应该位于脚本的顶层,而不应嵌套在函数内。

相关推荐
华玥作者8 小时前
[特殊字符] VitePress 对接 Algolia AI 问答(DocSearch + AI Search)完整实战(下)
前端·人工智能·ai
Mr Xu_8 小时前
告别冗长 switch-case:Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js
前端摸鱼匠8 小时前
Vue 3 的toRefs保持响应性:讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript
lang201509288 小时前
JSR-340 :高性能Web开发新标准
java·前端·servlet
好家伙VCC9 小时前
### WebRTC技术:实时通信的革新与实现####webRTC(Web Real-TimeComm
java·前端·python·webrtc
未来之窗软件服务10 小时前
未来之窗昭和仙君(六十五)Vue与跨地区多部门开发—东方仙盟练气
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·昭和仙君
嘿起屁儿整10 小时前
面试点(网络层面)
前端·网络
VT.馒头10 小时前
【力扣】2721. 并行执行异步函数
前端·javascript·算法·leetcode·typescript
phltxy11 小时前
Vue 核心特性实战指南:指令、样式绑定、计算属性与侦听器
前端·javascript·vue.js
Byron070712 小时前
Vue 中使用 Tiptap 富文本编辑器的完整指南
前端·javascript·vue.js