javascript - 运行内容脚本的 URL 上的页面操作按钮图标变灰

Question

我写了一个 Chrome 扩展，它在 manifest.json 中包含以下行(我只删除了名称和描述元数据):

"permissions":[],
"content_scripts":[
    {
        "run_at":"document_start",
        "matches":[
            "https://www.amazon.de/*",
            "https://www.amazon.it/*",
            "https://www.amazon.co.uk/*",
            "https://www.amazon.es/*",
            "https://www.amazon.fr/*"
        ],
        "js":[
           "jquery-1.10.2.min.js", "schnapperama.js"
        ]
    }
],
"background": {
    "persistent": false,
    "scripts": ["background.js"]
},
"options_page": "options/index.html",
"icons":{
    "16":"options/img/schnapper16.png",
    "48":"options/img/schnapper48.png",
    "128":"options/img/schnapper128.png"
},
"page_action":{
    "default_icon":"options/img/schnapper38.png"
},
"web_accessible_resources":[],
"content_security_policy":"script-src 'self'  https://www.amazon.de; object-src 'self'",
"content_security_policy":"script-src 'self'  https://www.amazon.it; object-src 'self'",
"content_security_policy":"script-src 'self'  https://www.amazon.fr; object-src 'self'",
"content_security_policy":"script-src 'self'  https://www.amazon.es; object-src 'self'",
"content_security_policy":"script-src 'self'  https://www.amazon.co.uk; object-src 'self'"

如您所见，它设置了 page_action 并且还输入了一些匹配项。

如果我进入 matches 中提到的任何网站，我的脚本就会成功运行。尽管如此，我的扩展程序的图标在这些页面上仍然是灰色的。

我错过了什么？

Answer 1

你必须调用chrome.pageAction.show()为了使您的页面操作按钮处于事件状态(图标未变灰)。显示(启用)pageAction 按钮不会自动与运行内容脚本的页面相关联。

来自 Chrome 的 pageAction page (强调我的):

You make a page action appear and be grayed out using the pageAction.show and pageAction.hide methods, respectively. By default, a page action appears grayed out. When you show it, you specify the tab in which the icon should appear. The icon remains visible until the tab is closed or starts displaying a different URL (because the user clicks a link, for example).

从您构建扩展的方式来看，最好的选择可能是让您的内容脚本发送消息 chrome.runtime.sendMessage() 到您的后台脚本，告诉它显示相关选项卡的页面操作图标。

它可能是这样的:

后台脚本:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    if (message.type === 'showPageAction') {
        chrome.pageAction.show(sender.tab.id);
    }
});

内容脚本:

chrome.runtime.sendMessage({type:'showPageAction'});