Javascript 扩展插件内的镀铬扩展插件检测按钮

Javascript 扩展插件内的镀铬扩展插件检测按钮,javascript,google-chrome,google-chrome-extension,Javascript,Google Chrome,Google Chrome Extension,我正在构建一个简单的chrome扩展,我需要它在点击扩展弹出窗口中的按钮时更改所选选项卡页面的背景色 <button id="btn">Change</button> 在JS文件中,但它什么也不做,这里有什么问题 这是我的清单文件: { "manifest_version": 2, "version": "1.0", "name": "extension", "description": "extension disc", "

我正在构建一个简单的chrome扩展,我需要它在点击扩展弹出窗口中的按钮时更改所选选项卡页面的背景色

<button id="btn">Change</button>
在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"
    ]
}

弹出窗口构建自己的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);

弹出窗口构建自己的DOM,因此您可以将
var element=document.getElementById('btn')
element.addEventListener()和
chrome.tabs.query({active:true,currentWindow:true})一起使用
获取当前页面的活动选项卡window@devnull69如何更改活动选项卡的背景色?这将始终返回未定义。它不是extensions api的一部分
chrome.extension.getElementById
从哪里得到的?@GEspinha您的其余代码应该可以工作,所以
chrome.tabs.executeScript
应该是fine@devnull69我有以下
varb=chrome.extension.getElementById('btn');b、 onClicked.addListener(函数(tab){chrome.tabs.query({active:true,currentWindow:true})chrome.tabs.executeScript({code:'document.body.style.backgroundColor=“#000”});})但它不工作对不起,我不明白我应该把
chrome.tabs.query({active:true,currentWindow:true})
puh放在哪里这比应该的难。。。chrome.tabs.executeScript将自动使用当前窗口的活动选项卡,因此无需
chrome.tabs.query
首先我已经这样做了,但它不起作用:/能否请检查我的清单文件中的上述问题?加载文档后是否调用脚本?类似于
window.addEventListener('load',function(){…},false)
window.onload=function(){…}
$(document.ready(function(){…})??如果没有,则说明您做错了,并且在启动脚本之前DOM还没有准备好
document.getElementById()
如果DOM未就绪,则将无法找到任何内容。它现在返回
未选中的runtime.lastError,同时运行tabs.executeScript:无法访问url的内容”http://www.google.com". 扩展清单必须请求访问此主机的权限。
var b = document.getElementById('btn');

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