How can Chrome extension background script communicate with web page service worker?

在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通信的方法。选择哪种方法主要取决于您的具体需求以及应用程序的架构。