#Chrome扩展程序开发教程--05：Service worker

引言

        本系列博客旨在带来最新的Chrome扩展程序开发入门教程。

---

1、基本介绍

        Service worker 是一个基于事件的脚本，在后台运行，通常用来协调扩展程序中不同部分的任务和监听浏览器事件，如：扩展程序被安装、打开页面、关闭页面，创建新标签、添加新书签、点击扩展工具栏图标等。service worker 可以使用所有的Chrome API，但 service worker 不能直接与网页的内容直接进行交互，需要与 content scripts 进行通信来间接修改网页的内容（第一章中有介绍）。
        Service worker 只有当发生以下情况的时候才被执行：

• 扩展程序被安装或者更新。
• 所监听的事件被触发。
• 收到 content scripts 或者 其它扩展程序发送的消息。

        需要注意的是：

• 当上一个事件执行完成后，会进入 30s 的等待时间，如果这段时间内没有新的事件发生，Service worker 就会进入休眠状态，直至下一个事件的到来。
• 只有扩展程序被安装或者更新的时候，Service worker 中的代码会被全部执行一遍，其它情况只会执行对应事件的代码。

2、注册 service worker

        扩展程序可以在 manifest.json 的 “background” 属性中注册 service worker，需要注意的是，只能指定一个 js 文件作为 service worker，如下所示：

{
  "name": "Awesome Test Extension",
  ...
  "background": {
    "service_worker": "background.js"
  },
  ...
}

3、初始化扩展程序

        通过监听 runtime.onInstalled 事件可以对扩展程序进行一次性的初始化工作，如下所示：

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    "id": "sampleContextMenu",
    "title": "Sample Context Menu",
    "contexts": ["selection"]
  });
});

4、设置监听器

        在构建 service worker 时，开发者需要为扩展程序所需要响应的事件添加监听器。需要注意的是，监听器需要在全局范围内注册，如下所示：

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    "id": "sampleContextMenu",
    "title": "Sample Context Menu",
    "contexts": ["selection"],
  });
});

// This will run when a bookmark is created.
chrome.bookmarks.onCreated.addListener(() => {
  // do something
});

        千万不能将监听器嵌套在函数中进行注册：

chrome.runtime.onInstalled.addListener(() => {
  // ERROR! Events must be registered synchronously from the start of
  // the service worker.
  chrome.bookmarks.onCreated.addListener(() => {
    // do something
  });
});

        还可以动态移除监听器，如下所示：

chrome.runtime.onMessage.addListener((message, sender, reply) => {
  chrome.runtime.onMessage.removeListener(event);
});

5、过滤事件

        可以通过以下代码为事件监听器添加过滤器：

const filter = {
  url: [
    {
      urlMatches: 'https://www.google.com/',
    },
  ],
};

chrome.webNavigation.onCompleted.addListener(() => {
  console.info("The user has loaded my favorite website!");
}, filter);

6、保持 Service Worker 处于活跃状态的方法

        触发事件或者调用 Chrome API 都可以重置等待时间。因此，我们只需要在 service worker 的代码中固定间隔访问 storage 即可，如下所示：

function sleep(ms) {return new Promise(resolve => setTimeout(resolve, ms));}


(async () => {
	while (true) {
		await sleep(25000);
		await chrome.storage.local.get();
	}
})();