Chrome Manifest V3扩展：Service Worker与Content Script通信及临时脚本注入问题求助

我来帮你搞定这个问题，你遇到的两次失败都是因为没注意到Manifest V3的API使用细节，下面分两种场景给你修正方案：

场景1：保留自动注入Content Script，通过消息触发执行逻辑 #

你最初用chrome.runtime.sendMessage失败，是因为这个API是给扩展内部上下文（比如Popup、Service Worker之间）发消息的，要给Content Script发消息必须用chrome.tabs.sendMessage，并且指定目标标签ID。

修正后的Service Worker代码：

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'select',
    title: 'select',
    type: 'normal',
    contexts: ['all']
  });
});

chrome.contextMenus.onClicked.addListener(async (clickData) => {
  if (clickData.menuItemId === 'select') {
    // 获取当前活跃标签
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    // 给该标签的Content Script发消息
    chrome.tabs.sendMessage(tab.id, 'start');
  }
});

你的Content Script代码不需要修改，只要保留manifest里的content_scripts配置即可，点击菜单时就能触发Content Script里的逻辑。

场景2：完全临时注入Content Script（推荐，符合你的需求） #

你尝试chrome.scriptingAPI失败主要是两个错误：

• 用了错误的参数script，应该用files指定要注入的JS文件；
• 文件名少了.js后缀，导致扩展找不到文件；
• 既然是临时注入，就不需要在manifest里配置content_scripts（自动注入所有页面不符合临时需求）。

修正后的完整代码 #

1. Service Worker（eventPage.js）

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'select',
    title: 'select',
    type: 'normal',
    contexts: ['all']
  });
});

async function injectContentScript() {
  try {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    // 动态注入指定的Content Script文件
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: ['content-script.js'] // 注意是files参数，且文件名完整
    });
    console.log('Content Script临时注入成功');
  } catch (error) {
    console.error('注入失败:', error);
  }
}

chrome.contextMenus.onClicked.addListener((clickData) => {
  if (clickData.menuItemId === 'select') {
    injectContentScript();
  }
});

2. manifest.json

{
  "manifest_version": 3,
  "name": "SendFast",
  "description": "This extension makes it easier to send information",
  "version": "1.0",
  "icons": {
    "128": "16-nahum.png",
    "48": "64-nahum.png",
    "16": "16-nahum.png"
  },
  "action": {
    "default_icon": "16-nahum.png",
    "default_popup": "popup.html"
  },
  "permissions": ["contextMenus", "activeTab", "scripting"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "eventPage.js"
  }
  // 删掉原来的content_scripts配置，避免自动注入
}

3. content-script.js（示例逻辑）

// 这里写你临时注入后要执行的代码
console.log('临时注入的Content Script已执行');
// 比如操作页面DOM
document.body.style.backgroundColor = '#f0f0f0';
alert('扩展临时注入脚本生效！');

测试注意事项 #

• 修改代码后，一定要在chrome://extensions/页面点击扩展的「刷新」按钮重新加载；
• 如果测试的网页是之前打开的，需要刷新网页才能让扩展的新配置生效；
• 可以通过点击扩展详情里的「Service Worker」下的「Inspect」按钮，查看控制台输出，排查注入失败的具体原因。

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