Chrome扩展Background.js事件不触发，点击扩展无响应问题求助

问题说明 #

开发基础Chrome扩展，目标是点击扩展图标时打开新标签页，但点击后无任何反应（未打开新标签/窗口）。扩展通过yarn create vite chrome-sf-poc --template react创建，打包脚本为yarn build && cp src/manifest.json dist/ && public/background.js dist/，加载后Service Worker显示非活跃状态。

核心问题拆解 #

1. Manifest V3 API 兼容问题：chrome.browserAction在Manifest V3中已废弃，需替换为chrome.action。
2. 弹窗配置拦截事件：当action中配置了default_popup时，点击图标会优先弹出弹窗，不会触发action.onClicked事件。
3. URL 用法错误：chrome.extension.getURL()用于获取扩展内部资源，外部URL直接传入字符串即可，无需包裹。
4. 参数名称过时：Manifest V3中创建标签时，selected参数已改为active。

修复步骤 #

1. 更新 manifest.json #

移除default_popup（若无需弹窗），精简权限：

{
  "manifest_version": 3,
  "name": "DEV Articles",
  "description": "A quick way to browse top posts from DEV Community.",
  "version": "0.0.1",
  "action": {}, // 移除default_popup，让点击触发onClicked事件
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["tabs"] // 仅保留创建标签所需的必要权限
}

2. 修正 background.js #

替换废弃API，修正URL与参数写法：

// Manifest V3 使用 chrome.action 替代 chrome.browserAction
chrome.action.onClicked.addListener(function () {
  // 外部URL直接传入字符串，无需使用chrome.extension.getURL
  chrome.tabs.create({
    url: "https://www.google.com/",
    active: true // 替换过时的selected参数为active
  });
  chrome.tabs.create({
    url: "https://www.google.com/",
    active: true
  });
});

chrome.runtime.onStartup.addListener(function () {
  chrome.tabs.create({
    url: "https://www.google.com/",
    active: true
  });
  chrome.tabs.create({
    url: "https://www.google.com/",
    active: true
  });
});

3. 重新打包加载 #

执行修正后的打包命令（补充cp命令确保background.js正确复制）：

yarn build && cp src/manifest.json dist/ && cp public/background.js dist/

在Chrome扩展管理页面重新加载扩展，点击图标即可触发新标签页创建。

补充提示 #

若需要保留弹窗同时实现点击图标打开标签，可在弹窗的JS中监听内部元素点击事件，或通过chrome.runtime.sendMessage与Service Worker通信完成标签创建。但单纯点击图标触发逻辑的场景下，必须移除default_popup配置。

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