Chrome扩展：隐身模式下chrome.runtime.sendMessage失效问题

1. Chrome spanning 隐身模式的具体限制解析 #

默认模式为"spanning"，意味着扩展将在单个共享进程中运行。来自隐身标签页的任何事件或消息都会发送到共享进程，并带有一个隐身标记来指示来源。由于隐身标签页无法使用此共享进程，使用"spanning"隐身模式的扩展无法将其扩展包中的页面加载到隐身标签页的主框架中。

这段文档的核心是隐身会话与普通会话的进程隔离规则，具体限制和受影响的行为包括：

• 进程隔离本质：扩展的核心代码（后台脚本、popup、options页面、DevTools面板等）都运行在一个共享进程中，但隐身标签页属于完全隔离的会话环境，无法直接访问这个共享进程的上下文资源。
• 页面加载限制：隐身标签页的主框架（即标签页显示的网页区域）不能加载扩展包内的任何页面（如chrome-extension://xxx/popup.html这类URL），但DevTools面板本身运行在浏览器的DevTools窗口，不属于标签主框架，所以这个限制不直接影响面板的显示。
• 消息传递阻断：隐身标签页中的内容脚本与扩展共享进程内的页面（如DevTools面板）之间的直接chrome.runtime.sendMessage/chrome.runtime.onMessage通道会被阻断。原因是隐身会话的消息会被标记，但共享进程内的DevTools面板无法识别或接收来自隐身上下文的直接消息——而popup能正常接收是因为popup本身运行在共享进程中，隐身标签的消息会被路由到共享进程的监听者。
• 其他受影响API：涉及跨会话上下文交互的API都会受影响，比如chrome.tabs.sendMessage直接向隐身标签发消息、chrome.storage.local在隐身会话中无法访问普通会话的存储（反之亦然）、chrome.runtime.connect建立的长连接也无法在隐身内容脚本和共享进程页面之间直接生效。

2. 无需切换到split模式的解决方案 #

方案1：通过后台脚本做消息中转 #

利用后台脚本运行在共享进程、能接收隐身标签消息的特性，让内容脚本先把消息发给后台，再由后台转发给DevTools面板，绕开直接消息通道的限制。

后台脚本代码：

// 保存所有连接的DevTools面板端口
let devToolsPorts = [];

// 监听DevTools面板发起的长连接
chrome.runtime.onConnect.addListener(port => {
  if (port.name === 'devtools-content-channel') {
    devToolsPorts.push(port);
    // 移除断开连接的端口
    port.onDisconnect.addListener(() => {
      devToolsPorts = devToolsPorts.filter(p => p !== port);
    });
  }
});

// 监听内容脚本的消息，转发给所有连接的DevTools面板
chrome.runtime.onMessage.addListener((message, sender) => {
  if (message.id === 'injected') {
    devToolsPorts.forEach(port => port.postMessage(message));
  }
  return true; // 标记为异步响应，避免消息被截断
});

DevTools面板代码：

function onMessageFromContentScript(message) {
  // 处理消息逻辑
}

// 和后台建立长连接，用于接收转发的消息
const backgroundPort = chrome.runtime.connect({ name: 'devtools-content-channel' });
backgroundPort.onMessage.addListener(onMessageFromContentScript);

async function injectContentScript() {
  const tabId = chrome.devtools.inspectedWindow.tabId;
  await chrome.scripting.executeScript({
    func: () => {
      chrome.runtime.sendMessage({ id: "injected" });
    },
    target: { tabId }
  });
}

方案2：使用chrome.devtools.inspectedWindow.eval直接交互 #

如果内容脚本的逻辑不需要持续通信，只是单次获取结果，可以直接用eval在标签上下文执行代码并返回结果，完全绕过消息传递机制。

DevTools面板代码修改：

function onMessageFromContentScript(message) {
  // 处理结果逻辑
}

async function injectContentScript() {
  const result = await chrome.devtools.inspectedWindow.eval(`
    // 这里写原本内容脚本的逻辑，直接返回需要传递的数据
    { id: "injected" }
  `);
  onMessageFromContentScript(result);
}

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