Chrome扩展Manifest MV3：注入脚本与Content Script通信问题

问题背景 #

开发基于Manifest V3的Chrome扩展时，通过chrome.tabs.onUpdated和chrome.tabs.onActivated注入的脚本（如camera.js）属于页面上下文，而Content Script运行在独立的隔离上下文，导致：

• Content Script无法直接访问注入脚本创建的按钮元素
• 无法通过注入脚本直接与Service Worker通信，仅网页原生元素能正常触发消息传递

需要实现注入脚本的按钮点击后，通过Content Script转发消息给Service Worker。

解决方案：跨上下文通信 #

由于页面上下文与Content Script上下文相互隔离，需通过自定义DOM事件或window.postMessage实现两者的消息传递，再由Content Script将消息转发给Service Worker。

方案一：自定义DOM事件 #

1. 修改注入脚本（camera.js）

在按钮点击时触发自定义DOM事件，传递操作类型：

// camera.js（注入到页面上下文的脚本）
document.addEventListener('DOMContentLoaded', () => {
  // 此处为创建按钮的逻辑（示例）
  const startBtn = document.createElement('button');
  startBtn.id = 'start-recording';
  startBtn.textContent = '开始录制';
  document.body.appendChild(startBtn);

  const stopBtn = document.createElement('button');
  stopBtn.id = 'rec-stop';
  stopBtn.textContent = '停止录制';
  document.body.appendChild(stopBtn);

  // 点击开始按钮触发自定义事件
  startBtn.addEventListener('click', () => {
    const startEvent = new CustomEvent('recording-action', { 
      detail: { type: 'start' } 
    });
    document.dispatchEvent(startEvent);
  });

  // 点击停止按钮触发自定义事件
  stopBtn.addEventListener('click', () => {
    const stopEvent = new CustomEvent('recording-action', { 
      detail: { type: 'stop' } 
    });
    document.dispatchEvent(stopEvent);
  });
});

2. 修改Content Script（content-script.js）

监听自定义DOM事件，收到消息后转发给Service Worker：

// content-script.js
document.addEventListener('recording-action', (event) => {
  const { type } = event.detail;
  if (type === 'start') {
    chrome.runtime.sendMessage({ recording_started: true }, (response) => {
      console.log(response.result);
    });
  } else if (type === 'stop') {
    console.log('im stop');
    // 可选：发送停止录制消息给Service Worker
    // chrome.runtime.sendMessage({ recording_stopped: true });
  }
});

方案二：使用window.postMessage #

1. 修改注入脚本（camera.js）

点击按钮时通过window.postMessage发送消息：

// camera.js
document.addEventListener('DOMContentLoaded', () => {
  const startBtn = document.getElementById('start-recording');
  const stopBtn = document.getElementById('rec-stop');

  startBtn.addEventListener('click', () => {
    window.postMessage({ 
      type: 'EXTENSION_RECORDING', 
      action: 'start' 
    }, '*');
  });

  stopBtn.addEventListener('click', () => {
    window.postMessage({ 
      type: 'EXTENSION_RECORDING', 
      action: 'stop' 
    }, '*');
  });
});

2. 修改Content Script（content-script.js）

监听window的message事件，验证消息来源后转发：

// content-script.js
window.addEventListener('message', (event) => {
  // 仅处理来自当前页面上下文的消息
  if (event.source !== window) return;
  // 验证消息类型，避免处理无关消息
  if (event.data.type !== 'EXTENSION_RECORDING') return;

  const { action } = event.data;
  if (action === 'start') {
    chrome.runtime.sendMessage({ recording_started: true }, (response) => {
      console.log(response.result);
    });
  } else if (action === 'stop') {
    console.log('im stop');
    // 可选：发送停止录制消息给Service Worker
    // chrome.runtime.sendMessage({ recording_stopped: true });
  }
});

关键说明 #

• Manifest V3中，Content Script与页面上下文完全隔离，无法直接共享DOM元素或变量，必须通过跨上下文通信机制传递消息
• 两种方案均能实现需求，自定义DOM事件更贴合DOM操作场景，postMessage则更灵活适用于复杂消息传递

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