Chrome右键菜单按钮点击无响应？求扩展开发技术支持

核心问题 #

你当前的代码存在两个关键问题：

1. Service Worker无法使用alert()：后台脚本（Service Worker）运行在无DOM的独立环境中，没有浏览器窗口上下文，直接调用alert()不会有任何弹窗效果。
2. 日志查看位置错误：console.log("Hello")其实已经执行，但它的输出在Service Worker的专属控制台中，而非当前网页的控制台。

解决方案 #

要在用户当前标签页弹出alert，需要通过chrome.scripting.executeScriptAPI向活跃标签页注入前端脚本，在页面上下文里执行弹窗逻辑。同时需要扩展权限配置支持脚本注入。

修改后的代码 #

manifest.json

添加scripting和activeTab权限，确保可以向当前标签页注入脚本：

{
    "manifest_version": 3,
    "name": "bar",
    "description": "Base Level Extension",
    "version": "1.0",

    "background": { 
      "service_worker": "hello.js"
    },

    "permissions": [
      "contextMenus",
      "scripting",
      "activeTab"
    ]
}

hello.js

修改右键菜单点击监听器，通过脚本注入实现弹窗：

chrome.contextMenus.create({
    id: "foo",
    title: "click",
    contexts: ["selection"]
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
    // 向当前选中的标签页注入执行弹窗的脚本
    chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: () => {
            alert("Hello");
            console.log("Hello"); // 此日志会出现在网页控制台
        }
    });
    // 后台脚本日志，需在扩展后台控制台查看
    console.log("右键菜单已触发");
});

查看后台日志方法 #

打开Chrome扩展管理页面（chrome://extensions/），找到你的扩展，点击「服务工作者」旁的「检查」按钮，即可查看Service Worker中的控制台输出。

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