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文件中，它什么都没做，这里有什么问题？

这是我的清单文件：

{
    "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})一起使用来获取当前窗口的活动标签

请务必在清单中提供标签权限

然后在你的popup.js中尝试这个

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

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

Chrome Extension检测按钮内部扩展名

1 个答案: