Javascript 使用getElementById时，Chrome扩展无法找到按钮_Javascript_Html_Google Chrome Extension

Javascript 使用getElementById时，Chrome扩展无法找到按钮

javascript html google-chrome-extension

Javascript 使用getElementById时，Chrome扩展无法找到按钮,javascript,html,google-chrome-extension,Javascript,Html,Google Chrome Extension,当我加载Chrome扩展时，它会正确地显示警报，但当我尝试使用getElementById（）时，它会返回null 我通过将第一条if语句更改为： if (document.getElementById(button) == null) { alert("No element found"); } 它将打印该内容，但不会确认除null以外的任何内容（例如“！=null”）。问题是，元素存在。当我检查页面时，我会在页面上看到它，我可以与它交互，但由于某种原因，Chrome扩展无法通过i

当我加载Chrome扩展时，它会正确地显示警报，但当我尝试使用getElementById（）时，它会返回null

我通过将第一条if语句更改为：

if (document.getElementById(button) == null) {
     alert("No element found");
}

它将打印该内容，但不会确认除null以外的任何内容（例如“！=null”）。问题是，元素存在。当我检查页面时，我会在页面上看到它，我可以与它交互，但由于某种原因，Chrome扩展无法通过id找到我的按钮或任何其他元素，就我测试的情况而言，无论按钮与否

无论我看到哪里，人们都说要确保Javascript在页面加载后运行，但我已经设置了扩展在DOM完全加载时运行。我在这里完全不知所措。我花了好几个小时的时间研究这件事，却不知道到底发生了什么

manifest.json

{
    "manifest_version": 2,
    "name": "Clicker",
    "description": "Placeholder",
    "version": "0.1",

    // Permissions
    "permissions": [
        "activeTab"
    ],

    // Scripts
    "background": {
        "scripts": ["clicker.js"],
        "persistent": false
    }

}

clicker.js


window.onload = function (){
        var button = "clickIt";
    var run = 1;

    alert("Starting Clicker");

    while (run = 1){
        if (document.getElementById(button).disabled != true){
            document.getElementById(button).click();
                }
    }
}

testpage.html

<html>

<head>
    <title>Clicker Test Page</title>

</head>


<body onload="timer()">
<button id="clickIt" type="button" disabled="true" onClick="addCount()">Test Button</button> </br></br></br>

<!--  display counter for test button clicks -->
<p>Counter: </p>
<span id="click_counter">0</span> </br>

<!-- display countdown timer for clock cycles -->
<p>Timer: </p>
<p id="display_timer"></p>
</body>

</html>

<script type="text/javascript">    
function timer(){
    var timeleft = 10;
    var downloadTimer = setInterval(function(){
        document.getElementById("display_timer").innerHTML = timeleft + " seconds remaining";
        timeleft -= 1;
        if(timeleft <= -1){
            clearInterval(downloadTimer);
            document.getElementById("clickIt").disabled = false;
        }
    }, 1000);
}

function addCount(){
    var val = document.getElementById("click_counter").innerHTML;
    document.getElementById("click_counter").innerHTML = ++val;
    document.getElementById("clickIt").disabled = true;
    timer();
}
</script>


点击测试页面
测试按钮



柜台：
0

计时器：

函数计时器（）{
var timeleft=10；
var downloadTimer=setInterval（函数（）{
document.getElementById（“显示计时器”）.innerHTML=timeleft+“剩余秒数”；
时间限制-=1；
如果（timeleftwOxxOm）是正确的，那么我需要使它成为一个脚本，而不是一个背景脚本，以便它能够访问DOM中的内容（例如元素ID）
此外，尽管Herohtar的评论与我在提交此问题时所讨论的问题不同，但这是后来开发此扩展过程中的一个重要因素：
Herohtar是正确的，使用while循环覆盖了选项卡，导致Chrome窗口锁定且没有响应，因为它处理点击的速度太快。最终，我通过在按钮周围使用嵌入ed函数来解决这个问题。click（）；
语句阻止脚本点击太快
谢谢你们两位的帮助。
wOxxOm是正确的，我需要将此脚本改为背景脚本，以便它能够访问DOM中的内容（例如元素ID）
此外，尽管Herohtar的评论与我在提交此问题时所讨论的问题不同，但这是后来开发此扩展过程中的一个重要因素：
Herohtar是正确的，使用while循环覆盖了选项卡，导致Chrome窗口锁定且没有响应，因为它处理点击的速度太快。最终，我通过在按钮周围使用嵌入ed函数来解决这个问题。click（）；
语句阻止脚本点击太快
谢谢你们两位的帮助。
您需要使用带有setInterval（）的计时器
就像您在测试页面示例中所做的那样。如果您在循环时使用无限，脚本只会使页面锁定，UI将永远不会更新。背景脚本的可能副本会在单独的隐藏背景页面中运行。您需要一个内容脚本，请参阅文档。您需要使用带有s的计时器etInterval（）
就像您在测试页面示例中所做的那样。如果您在
循环时使用无限，脚本只会使页面锁定，UI将永远不会更新。背景脚本的可能副本运行在单独的隐藏背景页面中。您需要一个内容脚本，请参阅文档。