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

In Chrome extensions, communication between background scripts and Service Workers in web pages can be achieved through several methods:

1. Message Passing

The most common approach is to utilize the message passing API provided by Chrome extensions. The background script can directly send messages to the web page, and Service Workers within the page can listen for these messages.

Background script sending messages to the page's Service Worker:

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

Service Worker in the page receiving messages:

javascript
self.addEventListener('message', event => {
  console.log('Received message:', event.data);

  if (event.data && event.data.greeting === 'hello') {
    event.ports[0].postMessage({farewell: "goodbye"});
  }
});

2. Using Shared Resources (e.g., localStorage, IndexedDB)

While Service Workers cannot directly access localStorage, data sharing can be implemented using IndexedDB. Both background scripts and Service Workers can access IndexedDB, enabling indirect communication through reading and writing data to the database.

Background script storing data:

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('Message stored');
  };
};

Service Worker reading data:

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('Received message:', message.result.text);
        };
      };
    })()
  );
});

3. Using Custom Events

If the Service Worker controls the foreground page, communication can be achieved through custom events. The background script can send events to the web page, and the Service Worker can listen for these events.

Background script triggering events:

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

Service Worker listening for events:

javascript
self.addEventListener('myCustomEvent', event => {
  console.log('Received custom event:', event.detail.greeting);
});

Conclusion

The methods outlined above provide ways to establish communication between background scripts and Service Workers in Chrome extensions. The choice of method depends on your specific requirements and application architecture.