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

这是我的清单文件：

{
    "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}) 一起使用来获取当前 [=22] 的活动选项卡=]

请务必在您的清单中提供制表符权限

然后在您的 popup.js

中试试这个

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

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

Chrome 扩展内的扩展检测按钮

Chrome Extension detect button inside extension

javascript

google-chrome

google-chrome-extension