介绍扩展 Service Worker 概念的教程
概览
本教程介绍了 Chrome 扩展程序 Service Worker。在本教程中，您将构建一个扩展程序，让用户能够使用多功能框快速导航到 Chrome API 参考文档页面。您将了解如何：
- 注册 Service Worker 并导入模块。
- 调试扩展程序 Service Worker。
- 管理状态和处理事件。
- 触发定期事件。
- 与内容脚本进行通信。
前期准备
本指南假定您具备基本的 Web 开发经验。建议您查看扩展程序 101 和 Hello World 扩展程序，了解如何开发扩展程序。
构建扩展程序
首先创建一个名为 quick-api-reference 的新目录来保存扩展程序文件，或者从我们的 GitHub 示例代码库下载源代码。
第 1 步：注册 Service Worker
在项目的根目录中创建清单文件，并添加以下代码：
manifest.json:
{
"manifest_version": 3,
"name": "Open extension API reference",
"version": "1.0.0",
"icons": {
"16": "images/icon-16.png",
"128": "images/icon-128.png"
},
"background": {
"service_worker": "service-worker.js",
},
}
扩展程序在清单中注册其 Service Worker，这只需要一个 JavaScript 文件。无需像在网页中那样调用 navigator.serviceWorker.register()。
创建一个 images 文件夹，然后将图标下载到该文件夹中。
查看阅读时间教程的前几步，详细了解该扩展程序在清单中的元数据和图标。
第 2 步：导入多个 Service Worker 模块
我们的 Service Worker 实现了两项功能。为了提高可维护性，我们将在单独的模块中实现每项功能。首先，我们需要在清单中将 Service Worker 声明为一个 ES 模块，从而允许我们将模块导入到 Service Worker 中：
manifest.json:
{
"background": {
"service_worker": "service-worker.js",
"type": "module"
},
}
创建 service-worker.js 文件并导入两个模块：
import './sw-omnibox.js';
import './sw-tips.js';
请创建这些文件，并为每个文件添加控制台日志。
sw-omnibox.js:
console.log("sw-omnibox.js")
sw-tips.js:
console.log("sw-tips.js")
请参阅导入脚本，了解在 Service Worker 中导入多个文件的其他方法。
可选：调试 Service Worker
我将介绍如何查找 Service Worker 日志并了解其终止时间。首先，按照说明加载解压的扩展程序。
30 秒后，您将看到“Service Worker（非活跃）”状态，这表示 Service Worker 已终止。点击“Service Worker（非活跃）”链接进行检查。下面的动画展示了这种情况。
您是否注意到检查 Service Worker 将它唤醒？在开发者工具中打开 Service Worker 可使其保持活动状态。为了确保您的扩展程序在 Service Worker 终止后能够正常运行，请记得关闭 DevTools。
现在，中断该扩展程序，以了解在何处找到错误。一种方法是从 service-worker.js 文件的 './sw-omnibox.js' 导入中删除“.js”。Chrome 将无法注册 Service Worker。
返回 chrome://extensions，然后刷新扩展程序。您会看到两个错误：
Service worker registration failed. Status code: 3.
An unknown error occurred when fetching the script.
如需了解调试扩展程序 Service Worker 的更多方法，请参阅调试扩展程序。
第 4 步：初始化状态
Chrome 会关闭不需要的 Service Worker。我们使用 chrome.storage API 跨 Service Worker 会话保留状态。如需访问存储空间，我们需要在清单中请求权限：
manifest.json:
{
...
"permissions": ["storage"],
}
首先，将默认建议保存到存储空间。我们可以在首次安装扩展程序时，通过监听 runtime.onInstalled() 事件来初始化状态：
sw-omnibox.js:
...
// Save default API suggestions
chrome.runtime.onInstalled.addListener(({ reason }) => {
if (reason === 'install') {
chrome.storage.local.set({
apiSuggestions: ['tabs', 'storage', 'scripting']
});
}
});
Service Worker 无法直接访问窗口对象，因此无法使用 window.localStorage 存储值。此外，Service Worker 也是短期执行环境；它们会在用户的浏览器会话中反复终止，这使得它们与全局变量不兼容。请改用 chrome.storage.local，将数据存储在本地机器上。
如需了解扩展 Service Worker 的其他存储选项，请参阅保留数据而不是使用全局变量。
第 5 步：注册事件
所有事件监听器都需要在 Service Worker 的全局范围内静态注册。换言之，事件监听器不应嵌套在异步函数中。这样，Chrome 就可以确保在 Service Worker 重新启动时恢复所有事件处理脚本。
在本示例中，我们将使用 chrome.omnibox API，但首先我们必须在清单中声明多功能框关键字触发器：
manifest.json:
{
...
"minimum_chrome_version": "102",
"omnibox": {
"keyword": "api"
},
}
现在，在脚本的顶层注册多功能框事件监听器。如果用户在地址栏中输入多功能框关键字 (api)，然后依次输入标签页或空格键，Chrome 会根据存储空间中的关键字显示建议列表。onInputChanged() 事件负责填充这些建议，该事件接受当前用户输入和 suggestResult 对象。
sw-omnibox.js:
...
const URL_CHROME_EXTENSIONS_DOC =
'https://developer.chrome.com/docs/extensions/reference/';
const NUMBER_OF_PREVIOUS_SEARCHES = 4;
// Display the suggestions after user starts typing
chrome.omnibox.onInputChanged.addListener(async (input, suggest) => {
await chrome.omnibox.setDefaultSuggestion({
description: 'Enter a Chrome API or choose from past searches'
});
const { apiSuggestions } = await chrome.storage.local.get('apiSuggestions');
const suggestions = apiSuggestions.map((api) => {
return { content: api, description: `Open chrome.${api} API` };
});
suggest(suggestions);
});
用户选择某条建议后，onInputEntered() 会打开相应的 Chrome API 参考文档页面。
sw-omnibox.js:
...
// Open the reference page of the chosen API
chrome.omnibox.onInputEntered.addListener((input) => {
chrome.tabs.create({ url: URL_CHROME_EXTENSIONS_DOC + input });
// Save the latest keyword
updateHistory(input);
});
updateHistory() 函数会接受多功能框输入内容，并将其保存到 storage.local。这样，Google 便可在日后将最近的搜索字词用作多功能框建议。
sw-omnibox.js:
...
async function updateHistory(input) {
const { apiSuggestions } = await chrome.storage.local.get('apiSuggestions');
apiSuggestions.unshift(input);
apiSuggestions.splice(NUMBER_OF_PREVIOUS_SEARCHES);
return chrome.storage.local.set({ apiSuggestions });
}
第 6 步：设置周期性活动
setTimeout() 或 setInterval() 方法通常用于执行延迟或定期任务。但是，这些 API 可能会失败，因为调度程序将在 Service Worker 终止时取消计时器。扩展程序可以使用 chrome.alarms API。
首先在清单中请求 "alarms" 权限。此外，如需从远程托管位置提取扩展程序提示，您需要请求主机权限：
manifest.json:
{
...
"permissions": ["storage", "alarms"],
"permissions": ["storage"],
"host_permissions": ["https://extension-tips.glitch.me/*"],
}
该扩展程序会提取所有提示，随机挑选一个并将其保存到存储空间。我们将创建一个每天触发一次的闹钟来更新小费。关闭 Chrome 时不会保存闹钟。因此，我们需要检查闹钟是否存在，如果不存在，则需要创建一个。
sw-tips.js:
// Fetch tip & save in storage
const updateTip = async () => {
const response = await fetch('https://extension-tips.glitch.me/tips.json');
const tips = await response.json();
const randomIndex = Math.floor(Math.random() * tips.length);
return chrome.storage.local.set({ tip: tips[randomIndex] });
};
const ALARM_NAME = 'tip';
// Check if alarm exists to avoid resetting the timer.
// The alarm might be removed when the browser session restarts.
async function createAlarm() {
const alarm = await chrome.alarms.get(ALARM_NAME);
if (typeof alarm === 'undefined') {
chrome.alarms.create(ALARM_NAME, {
delayInMinutes: 1,
periodInMinutes: 1440
});
updateTip();
}
}
createAlarm();
// Update tip once a day
chrome.alarms.onAlarm.addListener(updateTip);
第 7 步：与其他上下文通信
扩展程序使用内容脚本读取和修改网页内容。当用户访问某个 Chrome API 参考页面时，该扩展程序的内容脚本将更新该页面，并提供当天提示。它会发送消息，以请求 Service Worker 提供当天小费。
首先，在清单中声明内容脚本，并添加与 Chrome API 参考文档对应的匹配模式。
manifest.json:
{
...
"content_scripts": [
{
"matches": ["https://developer.chrome.com/docs/extensions/reference/*"],
"js": ["content.js"]
}
]
}
创建新的内容文件。以下代码向 Service Worker 发送一条请求小费的消息。然后，添加一个按钮，点击该按钮即可打开包含扩展程序提示的弹出式窗口。此代码使用新的网络平台 Popover API。
content.js:
(async () => {
// Sends a message to the service worker and receives a tip in response
const { tip } = await chrome.runtime.sendMessage({ greeting: 'tip' });
const nav = document.querySelector('.upper-tabs > nav');
const tipWidget = createDomElement(`
<button type="button" popovertarget="tip-popover" popovertargetaction="show" style="padding: 0 12px; height: 36px;">
<span style="display: block; font: var(--devsite-link-font,500 14px/20px var(--devsite-primary-font-family));">Tip</span>
</button>
`);
const popover = createDomElement(
`<div id='tip-popover' popover style="margin: auto;">${tip}</div>`
);
document.body.append(popover);
nav.append(tipWidget);
})();
function createDomElement(html) {
const dom = new DOMParser().parseFromString(html, 'text/html');
return dom.body.firstElementChild;
}
最后一步是向我们的 Service Worker 添加一个消息处理程序，用来向内容脚本发送包含每日小费的回复。
sw-tips.js:
...
// Send tip to content script via messaging
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.greeting === 'tip') {
chrome.storage.local.get('tip').then(sendResponse);
return true;
}
});
测试它是否正常运行
验证项目的文件结构是否如下所示：
在本地加载扩展程序
如需在开发者模式下加载已解压的扩展程序，请按照 Hello world 中的步骤操作。
打开参考页面
- 在浏览器地址栏中输入关键字“api”。
- 按“Tab”键或“空格键”。
- 输入 API 的完整名称。
- 或者从过往搜索记录列表中进行选择
- 系统会打开一个新的页面，显示 Chrome API 参考页面。
代码应如下所示：
打开今日提示
点击导航栏上的“提示”按钮，打开扩展程序提示。
🎯? 潜在的增强功能
根据今天学到的知识，请尝试完成以下任何一项操作：
- 了解实现多功能框建议的其他方法。
- 创建您自己的自定义模态窗口，用于显示附加信息提示。
- 再打开一个指向 MDN 的 Web 扩展程序参考 API 页面的页面。
继续努力！
恭喜您学完了本教程 🎉?。通过完成其他初级教程继续提升您的技能：
| 扩展程序 | 学习内容 |
|---|---|
| 阅读时间 | 在一组特定网页上自动插入元素。 |
| 标签页管理器 | 创建一个用于管理浏览器标签页的弹出式窗口。 |
| 专注模式 | 点击扩展程序操作后在当前页面上运行代码。 |
继续探索
若要继续学习扩展程序 Service Worker，建议您浏览以下文章：