Chrome扩展检测按钮内扩展

Chrome Extension detect button inside extension

本文关键字：扩展 按钮 检测 Chrome      更新时间：2023-09-26

我正在构建一个简单的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文件: 
{
    "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"
    ]
}

一个弹出建立自己的DOM，所以你可以使用var element = document.getElementById('btn')与element.addEventListener()和chrome.tabs.query({active: true, currentWindow: true})一起获得当前窗口的活动选项卡

确保在清单

中提供选项卡权限

然后在你的pop .js中试试

var b = document.getElementById('btn');
b.addEventListener('click', function() {
    chrome.tabs.executeScript({
        code: 'document.body.style.backgroundColor = "black";'
    });
}, false);
相关文章：