乐闻世界logo
搜索文章和话题

Chrome 插件后台脚本如何与网页 service worker 通信?

7 个月前提问
5 个月前修改
浏览次数105

1个答案

1

在Chrome扩展程序中,后台脚本(background script)和网页中的Service Worker之间的通信主要可以通过以下几种方式实现:

1. 使用消息传递(Message Passing)

最常见的通信方式是使用Chrome扩展API中的消息传递接口。背景脚本可以直接向包含的网页发送消息,并且网页中的Service Worker可以监听这些消息。

背景脚本发送消息给页面中的Service Worker:

javascript
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) { console.log('收到响应:', response.farewell); }); });

网页中的Service Worker接收消息:

javascript
self.addEventListener('message', event => { console.log('接收到消息:', event.data); if (event.data && event.data.greeting === 'hello') { event.ports[0].postMessage({farewell: "goodbye"}); } });

2. 使用共享资源(例如:localStorage, IndexedDB)

虽然Service Workers不能直接访问localStorage,但可以通过IndexedDB来实现数据共享。背景脚本和Service Workers都可以访问IndexedDB,通过在数据库中读写数据来实现间接通信。

背景脚本存储数据:

javascript
let db; const request = indexedDB.open('MyDatabase', 1); request.onupgradeneeded = function(event) { db = event.target.result; if (!db.objectStoreNames.contains('messages')) { db.createObjectStore('messages', {keyPath: 'id'}); } }; request.onsuccess = function(event) { db = event.target.result; const transaction = db.transaction(['messages'], 'readwrite'); const store = transaction.objectStore('messages'); store.add({id: 1, text: 'Hello from Background Script'}); transaction.oncomplete = function() { console.log('消息已存储'); }; };

Service Worker读取数据:

javascript
self.addEventListener('activate', event => { event.waitUntil( clients.claim(), (async function() { const request = indexedDB.open('MyDatabase', 1); request.onsuccess = function(event) { const db = event.target.result; const transaction = db.transaction(['messages'], 'readonly'); const store = transaction.objectStore('messages'); const message = store.get(1); message.onsuccess = function() { console.log('接收到的消息:', message.result.text); }; }; })() ); });

3. 使用自定义事件(Custom Events)

如果Service Worker 控制的是前台页面,可以通过自定义事件进行通信。背景脚本可以向网页发送事件,而Service Worker 可以监听这些事件。

背景脚本触发事件:

javascript
chrome.tabs.executeScript({ code: `document.dispatchEvent(new CustomEvent('myCustomEvent', {detail: {greeting: 'hello'}}));` });

Service Worker监听事件:

javascript
self.addEventListener('myCustomEvent', event => { console.log('收到自定义事件:', event.detail.greeting); });

结论

以上就是几种实现Chrome扩展程序中背景脚本与网页中Service Worker通信的方法。选择哪种方法主要取决于您的具体需求以及应用程序的架构。

2024年6月29日 12:07 回复

你的答案