#Chrome扩展程序开发教程--05Service 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.谷歌.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();
}
})();
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfjhcj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13