Chrome扩展程序：点击标签中的活动？

Question

HeJ小鼠，

我一整天都在搜索Chrome API，但找不到答案。快速：是否可以在选项卡中添加图标并附加单击监听器？或者一般在选项卡上点击监听器？

谢谢！

Answer 1

是的chrome.tabs.executeScript api可以。或者使用content_scripts：

injectedScript.js

document.getElementById('btn1').addEventListener('click',function () {
    alert('button click!');
});

的manifest.json

"content_scripts": [
    {
      "matches": ["http://www.example.com/webPage.html"],
      "js": ["injectedScript.js"]
    }
],

webPage.html

<button id="btn1">clickMe!</button>

有关详细信息，请参阅Programmatic injection

编辑：

您无法向标签本身添加事件，我认为最好的方法是执行此操作，即上下文菜单。这个例子是丑陋的代码，但这使得工作...... （我对我的英语感到抱歉）。

的manifest.json

 "background":{"scripts":["background.js"]},
  "permissions": ["contextMenus", "tabs","activeTab","<all_urls>"]

background.json

function apdateTabList() {
    chrome.contextMenus.removeAll(function() {
        chrome.tabs.query({url:'*://*/*'}, function (tabs) {
            var currTab;
            for (var i=0; currTab = tabs[i];i++) {
                chrome.contextMenus.create({
                    id : currTab.id.toString(),
                    title: currTab.title || currTab.url,
                    contexts:['all'],
                    onclick : function(info) {
                        chrome.tabs.executeScript(Number(info.menuItemId), {code:'alert("injected")'});
                    }
                });
            }
        });
    });
}
apdateTabList();
chrome.tabs.onCreated.addListener(apdateTabList);
chrome.tabs.onUpdated.addListener(apdateTabList);
chrome.tabs.onMoved.addListener(apdateTabList);
chrome.tabs.onDetached.addListener(apdateTabList);
chrome.tabs.onAttached.addListener(apdateTabList);
chrome.tabs.onRemoved.addListener(apdateTabList);
chrome.tabs.onReplaced.addListener(apdateTabList);

Answer 2

不，您可以在标签选项卡上创建无用户界面。

单击选项卡不是您可以捕获的内容 - 您唯一可以获得的事件是changing of the active tab，而且您无法真实地说明发生了这种情况，并且您无法阻止它 - 它已经在你收到活动时发生了。