Chrome 扩展 DOMContentLoaded 未触发答案

【问题标题】：Chrome Extension DOMContentLoaded Not FiringChrome 扩展 DOMContentLoaded 未触发
【发布时间】：2014-09-10 01:30:57
【问题描述】：

现在我正在尝试运行以下代码，但控制台从不记录“已添加”，只记录“已启动”。

var addWebsiteAddress;
console.log('started');

document.addEventListener('DOMContentLoaded', function(){
  console.log('added');
  addWebsiteAddress = document.forms["addWebsiteAddress"];
  addWebsiteAddress.addEventListener('submit', addWebsite);

我把它放在 HTML 文件中如下：

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="popup.js" async></script>
    <title>Add a website to block</title>
  </head>
  <body>
    <form id="addWebsiteForm">
    Website Address: <input type="text" id="websiteAddress"><br>
    <input type="submit" value="Add Website">
    </form>
  </body>
</html>

我错过了什么？ DOMContentLoaded 似乎永远不会触发，因为我也无法注册提交事件。

【问题讨论】：

如果你取出async会怎样？
哦，它有效。我不明白为什么 - 我认为 async 只会在加载网页时单独运行脚本。

标签： javascript html google-chrome google-chrome-extension

【解决方案1】：

也许你在 manifest.json 中设置了 "run_at": "document_end"。将 "run_at": "document_end" 更改为 "run_at": "document_start"。有用！我试过了！

【讨论】：

【解决方案2】：

这里的罪魁祸首是你正在使用的async 属性。

通常情况下，当向 DOM 添加<script> 标签时，浏览器会暂停解析页面以执行脚本。对于async，不保证会出现这种情况。它可以在任意点执行。

您的页面非常小。浏览器几乎立即解析它，并且在它“记住”执行您的脚本之前触发事件 - 因此它不会被您的脚本接收。

async 背后的想法是不要在脚本本身加载时绊倒页面加载。由于 Chrome 扩展程序中的资源都是本地资源，因此加载时间不是一个因素，因此您不应该使用它，而是选择更可预测的程序流程。

【讨论】：