点击带有Chrome扩展程序的按钮

Question

我想知道如何检测具有我的chrome扩展名的网页上是否单击具有特定ID的按钮。 使用我的代码，我有一个错误，说我的元素未定义。 这是我的清单：

{
"manifest_version": 2,

"name": "app",
"description": "my app",
"version": "1.0",

"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Changer le background"
},
"permissions": [
    "activeTab",
    "storage"
]

}

还有我的popup.js文件：

document.addEventListener('DOMContentLoaded', () => {
getCurrentTabUrl((url) => {
    document.getElementById('mybutton').addEventListener('click', function() {
        var script = "console.log('clicked');";
        chrome.tabs.executeScript({code: script});
    });
});

}）;

Answer 1

您的popup.js将不会加载，直到用户自己单击扩展程序的图标...我认为您应该更改方法并使用如下内容脚本：

 document.getElementById('mybutton').addEventListener('click', function() { console.log('clicked'); }); 

您需要使用内容脚本来更新manifest.json，如下所示：

 "content_scripts": [ { "matches": ["the url of a page for the script", "the url of another page"], "js": ["your_script.js"] } ],