Javascript Chrome扩展addEventListener null_Javascript_Google Chrome_Dom_Google Chrome Extension

Javascript Chrome扩展addEventListener null

javascript google-chrome dom google-chrome-extension

Javascript Chrome扩展addEventListener null,javascript,google-chrome,dom,google-chrome-extension,Javascript,Google Chrome,Dom,Google Chrome Extension,我几周前才开始学习JS，我正在尝试构建一个Chrome扩展。我已经构建了manifest.json、popup.html、popup.js和content.js文件当我尝试在Chrome上运行后台页面控制台以查看popup.js是否正常工作时，我不断收到错误： Uncaught TypeError: Cannot read property 'addEventListener' of null at popup.js:8 我尝试将html中的脚本移动到正文的底部，但仍然以错误结束，并尝试实现

我几周前才开始学习JS，我正在尝试构建一个Chrome扩展。我已经构建了manifest.json、popup.html、popup.js和content.js文件

当我尝试在Chrome上运行后台页面控制台以查看popup.js是否正常工作时，我不断收到错误：

Uncaught TypeError: Cannot read property 'addEventListener' of null
at popup.js:8

我尝试将html中的脚本移动到正文的底部，但仍然以错误结束，并尝试实现：

document.addEventListener('DOMContentLoaded', function () {
    //   My code here.. ( Your code here  )
    });

在我的popup.js和windows.onload方法中，但仍然无法消除错误

如果有人能指出我代码中的任何错误，并告诉我哪里出了问题，我将非常感激。谢谢

弹出式HTML

<!DOCTYPE html>
<html>
<head>
    <title>Like IG Links</title>
</head>

<body>

    <h3><center>Paste Links Below</center></h3>
    <hr>
    <textarea rows="10" cols="60" id="urls"></textarea>
    <br>
    <textarea rows="1" cols="5" id="counter" disabled></textarea>
    <br>
    <br>

    <button type="submit" align="center" style="width:60px;"
            id="start">Start</button>

    <br> 
    <br>

    <button type="submit" align="right" style="width:60px;"
            id="stop">Stop</button>          

   <script type="text/javascript" src="popup.js"></script>              

</body>

</html>

弹出式JS

console.log('background running');

function loadUrls() {
console.log("123");
}

var startbutton = document.getElementById("start");
startbutton.addEventListener('click', loadUrls);

清单JSON

{ 
"manifest_version": 2,      
"name": "Like IG Links",
"version": "1.0",    
"description": "Like IG Links",

"content_scripts": [
    {
        "matches": [
            "<all_urls>"
        ],
        "js": ["content.js"]
    }    
],

"background": {
    "scripts": ["popup.js"]
    },

"browser_action": {
"default_icon": "icon.png",  
"default_popup": "popup.html"                 
},

"permissions": ["tabs", "storage", "activeTab"]
}

删除清单的后台脚本部分。更新扩展后，错误应该消失。在我正在开发的扩展中，我在HTML和清单中有jquery.js和popup.js。清单的后台脚本标记用于跟踪浏览器事件并持续响应它们的逻辑，而不是用于扩展HTML背后的js。

我建议先阅读扩展。背景页面和弹出窗口是不同的，您正在背景页面中搜索一个元素，该元素是一个带有脚本的空白html模板，因此它将找不到您的startbutton。当您单击扩展图标时，尽管一切正常，但您不会在弹出式控制台中看到右键单击工具栏中的扩展图标后选择其选项所获得的任何ERORR。

{ 
"manifest_version": 2,      
"name": "Like IG Links",
"version": "1.0",    
"description": "Like IG Links",

"content_scripts": [
    {
        "matches": [
            "<all_urls>"
        ],
        "js": ["content.js"]
    }    
],

"background": {
    "scripts": ["popup.js"]
    },

"browser_action": {
"default_icon": "icon.png",  
"default_popup": "popup.html"                 
},

"permissions": ["tabs", "storage", "activeTab"]
}