Manifest V3中Service Worker与main.js通信及注册问题求助

1. 手动注册Service Worker报错的原因 #

在Chrome扩展Manifest V3中，后台Service Worker是通过manifest.json的background.service_worker字段自动注册的，完全不需要你在content script（main.js）里调用navigator.serviceWorker.register。

你在main.js里执行注册代码会报错的核心原因：

• Content script运行在宿主页面的上下文，而扩展的后台Service Worker属于扩展独立的隔离上下文，两者的Service Worker体系不互通。
• Manifest V3的安全策略拦截了content script对扩展后台SW的注册操作，这种手动注册本身就不符合规范。

直接删掉main.js里所有手动注册SW的代码即可。

2. 实现Content Script与后台Service Worker的通信 #

要让main.js（content script）和service-worker.js（后台SW）持续通信，直接用Chrome扩展原生API即可，无需自己折腾SW注册逻辑：

一次性消息通信（适合单次数据提交） #

main.js 发送消息：

// 向后台SW发送API获取到的数据
chrome.runtime.sendMessage(
  { type: 'SUBMIT_TO_DOCS', data: apiReceivedData },
  (response) => {
    console.log('后台处理结果:', response);
  }
);

service-worker.js 接收并处理：

// 监听来自content script的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'SUBMIT_TO_DOCS') {
    // 这里写提交数据到Google Docs的逻辑
    submitToGoogleDocs(message.data)
      .then(() => sendResponse({ status: 'success' }))
      .catch(err => sendResponse({ status: 'error', msg: err.message }));
    // 异步操作需返回true保持消息通道开放
    return true;
  }
});

长连接通信（适合持续双向交互） #

如果需要实时接收API数据并持续转发，用长连接更合适：

main.js 建立连接：

// 与后台SW建立长连接
const port = chrome.runtime.connect({ name: 'data_stream' });

// 发送实时数据
port.postMessage({ type: 'NEW_API_DATA', data: latestData });

// 接收后台响应
port.onMessage.addListener((res) => {
  console.log('后台反馈:', res);
});

// 监听连接断开
port.onDisconnect.addListener(() => {
  console.log('与后台的连接已断开');
});

service-worker.js 监听连接：

// 监听长连接请求
chrome.runtime.onConnect.addListener((port) => {
  if (port.name === 'data_stream') {
    // 接收content script的实时数据
    port.onMessage.addListener((msg) => {
      if (msg.type === 'NEW_API_DATA') {
        processAndSubmitData(msg.data);
      }
    });

    // 主动向content script发送连接确认
    port.postMessage({ status: 'connected' });
  }
});

3. Workbox的使用说明 #

你的manifest.json中后台SW设置了type: "module"，所以不能用importScripts导入Workbox，需要用ESM标准的import语句：

// service-worker.js 中导入Workbox的ESM版本
import { registerRoute } from 'https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-routing.mjs';
import { StaleWhileRevalidate } from 'https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-strategies.mjs';

不过如果你的需求只是提交数据到Google Docs，确实不需要Workbox，直接用Chrome扩展API就能完成。

内容的提问来源于stack exchange，提问作者VladTbk321