javascript - Chrome 扩展程序检测扩展程序内的按钮

Question

我正在构建一个简单的 Chrome 扩展程序，我需要它在单击扩展程序弹出窗口中的按钮时更改所选选项卡页的背景颜色。

<button id="btn">Change</button>

我已经尝试过这个:

var b = chrome.extension.getElementById('btn');

b.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript({
        code: '
            document.body.style.backgroundColor = "#000"
        '
    });
});

在JS文件中，但什么也没做，这里有什么问题？

这是我的 list 文件:

{
    "manifest_version": 2,

    "version": "1.0",
    "name": "extension",
    "description": "extension disc",

    "browser_action": {
        "default_title": "extension",
        "default_popup": "popup.html"
    },
    "icons": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*"],
        "js": ["jquery.min.js"]
    }],
    "permissions": [
        "tabs"
    ]
}

Answer 1

弹出窗口会构建自己的 DOM，因此您可以将 var element = document.getElementById('btn') 与 element.addEventListener() 和 一起使用>chrome.tabs.query({active: true, currentWindow: true}) 获取当前窗口的事件选项卡

请务必在 list 中提供选项卡权限

然后在 popup.js 中尝试一下

var b = document.getElementById('btn');

b.addEventListener('click', function() {
    chrome.tabs.executeScript({
        code: 'document.body.style.backgroundColor = "black";'
    });
}, false);