非常简单的 Chrome 扩展程序来显示警报

Question

我正在尝试创建一个快速的 Chrome 扩展程序（完全初学者）并且只想在单击图标时显示警报，因此我尝试了以下操作：

清单文件

{
    "name": "Something",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Woohoo",
    "browser_action": {
        "default_icon": "icon.png"
    },
    "content_scripts" : [{
        "matches": ["<all_urls>"],
        "js" : ["bgscript.js"]
    }]

}

脚本.js

chrome.browserAction.onClicked.addListener(function(tab) { 
    alert('icon clicked')
});

但是，当我单击我的图标时，没有任何反应！看看上面的 - 谁能发现为什么这不起作用？

Answer 1

为了收到浏览器操作onClicked事件的通知，您需要一个background-page（或更好的event-page），而不是content-script。
像这样改变你的清单：

// Replace that:
"content_scripts" : [{...}]

// with this:
"background": {
    "persistent": false,
    "scripts": ["bgscript.js"]
}

如果您希望浏览器操作在内容脚本上调用某些内容，则需要使用消息传递（例如简单的一次性请求）通过后台页面进行通信。
例如：

清单文件

{
    "name": "Something",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Woohoo",
    "browser_action": {
        "default_icon": "icon.png"
    },
    "background": {
        "persistent": false,
        "scripts": ["background.js"]
    },
    "content_scripts" : [{
        "matches": ["<all_urls>"],
        "js" : ["content.js"]
    }]
}

背景.js

chrome.browserAction.onClicked.addListener(function (tab) {
    /* Send a message to the active tab's content script */
    chrome.tabs.sendMessage(tab.id, { action: 'saySomething' });
});

内容.js

chrome.runtime.onMessage.addListener(function (msg) {
    /* We received a message, let's do as instructed */
    if (msg.action === 'saySomething') {
        alert('something');
    }
});