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

文章列表

- 引言
- 1、基本介绍
- 2、注册 service worker
- 3、初始化扩展程序
- 4、设置监听器
- 5、过滤事件

引言

本系列博客旨在带来最新的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);

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