Chrome 扩展：尽管没有错误，EventListener 仍无法正常工作

Question

与其他存在代码问题 (, ) 的类似帖子不同，我不再收到

Uncaught TypeError: Cannot read property 'addEventListener' of null

因为我正在使用 document.onload() 所以他们的解决方案没有帮助

我的代码：

popup.html

<button class="submit" id='checkButton'>
      Submit
    </button>
<script type="text/javascript" src="./content.js"></script>
<script type="text/javascript" src="/background.js"></script>

Background.js

function submit(){
  alert('loaded')
}
document.onload = function(){
  document.getElementById("checkButton").addEventListener("click", submit);
  console.log('loaded')
}

manifest.json

{
    "manifest_version": 2,
    "name": "To be named",
    "description": "This extension helps...",
    "version": "0.1.0",
    "browser_action":{
        "default_popup":"popup.html"
    },
    "permissions": [
        "storage",
        "identity",
        "identity.email",
        "http://127.0.0.1:5000/test",
        "http://127.0.0.1:5000/get/info",
        "http://127.0.0.1:5000/test",
        "http://0.0.0.0:5000/test",
        "http://127.0.0.1:5000/Time"
    ],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },  
    "content_scripts": [{
        "matches": ["https://www.blank.org/"], 
        "js": ["content.js"],
        "css": ["styles.css"]
    }]
}

然而，当我点击从扩展程序提交时。我没有收到任何 'loaded'（如果我将 func 移动到 content.js，同样适用），我的 chrome://extemsion 也没有收到任何错误，如前所述。

Answer 1

我不是专家，但我认为问题出在您试图从后台脚本编辑 popup.html DOM。那行不通的。试试这个：

background.js:

//Your other javascript...
var views = chrome.extension.getViews({
type: "popup"
});
for (var i = 0; i < views.length; i++) {
views[i].document.getElementById('checkButton').addEventListener("click", submit);
console.log("loaded");
}

我假设这就像您使用 background.js 作为后台脚本一样。不过，我不明白为什么要在 popup.html 的底部包含 background.js。这是我的建议：

popup.html:

<button class="submit" id='checkButton'>
      Submit
</button>
<script type="text/javascript" src="./popup.js"></script>

popup.js:

function submit(){
  alert('loaded')
}
document.onload = function() {
  document.getElementById("checkButton").addEventListener("click", submit);
  console.log('loaded')
}

希望这有效！ :)

Chrome 扩展：尽管没有错误，EventListener 仍无法正常工作

Chrome extension: EventListener not working despite no error

html

javascript

addeventlistener

google-chrome-extension