Chrome 扩展显示上下文菜单，左键单击而不弹出答案

【问题标题】：Chrome Extension displays context menu with left click without popupChrome 扩展显示上下文菜单，左键单击而不弹出
【发布时间】：2020-04-08 04:25:11
【问题描述】：

刚开始学习如何编写 Chrome 扩展程序。我的目标是在单击工具栏图标时从后台 js 写入控制台。

从我读过的教程中我的理解是，当没有指定弹出窗口时，图标会像一个按钮一样，当它被左键单击时，会调用 onClicked 回调。实际发生的是左键单击显示默认上下文菜单。永远不会调用回调 - 可能是因为这个原因。

我确定我遗漏了一些非常基本的东西；如果有人能指出这一点，那将非常有帮助。作为记录，我在 Mac 上使用的是 Chrome 版本 80.0.3987.163。

提前谢谢大家。

清单：

{
    "name": "Test",
    "version": "1.0",
    "description": "",

    "manifest_version": 2,

    "permissions": ["declarativeContent"],

    "page_action": {
        "default_icon": {
          "16": "images/get_started16.png",
          "32": "images/get_started32.png",
          "48": "images/get_started48.png",
          "128": "images/get_started128.png"
        }
    },

    "icons": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
    },

    "content_scripts": [
        {
          "matches": ["*://*.reddit.com/r/*"],
          "js": ["content.js"]
        }
      ],

    "background": {
        "scripts": ["background.js"],
        "persistent": false
    }
}

content.js：

console.log("Content script running...");

background.js：

console.log("Background script running...");

const iconRules = [{
    conditions: [
        new chrome.declarativeContent.PageStateMatcher({
            pageUrl: {hostEquals: 'reddit.com'},
        })
    ],
    actions: [new chrome.declarativeContent.ShowPageAction()]
}];

chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules(iconRules);
});

chrome.pageAction.onClicked.addListener(function(){
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        console.log("Clicked!")
    })
});

访问reddit时：

Shows highlighted icon.

左键单击图标时：

A default context menu displays.

【问题讨论】：

1.查看一些简单的官方示例here。 2. 在回调函数内onClicked listener 的最后一段代码中，您可以将其设置为function(tab)，因为这是它可以返回的参数，您可以在下面与此函数一起使用：chrome.tabs.executeScript(tab.id, {code: 'console.log("Clicked!")'});，而不是通过tabs.query再次找到整个标签。
BTW 主机名是www.reddit.com，而不是reddit.com，Chrome 只是隐藏了 www 部分。双击 URL 以查看完整或 disable shortening 完整。您看到菜单是因为图标未启用，很可能是由于错误的主机名。
感谢 cmets 和回调提示。我刚刚得出了相同的结论并提供了答案。但是，我不知道为什么 Chrome 不选择灰显图标。
按照上面的建议更改回调会在后台脚本中创建与权限相关的运行时错误。我原来的方法没有。我需要调查差异；但我只是想在这里注意这一观察。
我相信这是相关的：stackoverflow.com/questions/14361061/….

标签： google-chrome google-chrome-extension

【解决方案1】：

经过更多尝试，我终于弄清楚了为什么这不起作用：pageURL 不匹配。

实际主机是 www.reddit.com。将 hostEquals 更改为 hostSuffix 会阻止 Chrome 显示上下文菜单；调用了 onClicked 回调。

我不知道为什么 Chrome 甚至会在条件不匹配时激活图标。

【讨论】：

当您的清单具有主机权限时，现代 Chrome 不会使图标变灰。声明内容脚本会添加该权限。实际上已经没有必要再使用页面操作了。