引言

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

---

1、基本介绍

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

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);