Javascript Chrome扩展插件未启动_Javascript_Html_Google Chrome_Google Chrome Extension

Javascript Chrome扩展插件未启动

javascript html google-chrome google-chrome-extension

Javascript Chrome扩展插件未启动,javascript,html,google-chrome,google-chrome-extension,Javascript,Html,Google Chrome,Google Chrome Extension,现在我正在尝试运行以下代码，但控制台从不记录“添加”，只记录“启动” var addWebsiteAddress; console.log('started'); document.addEventListener('DOMContentLoaded', function(){ console.log('added'); addWebsiteAddress = document.forms["addWebsiteAddress"]; addWebsiteAddress.addEve

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

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似乎从未触发，因为我也无法注册submit事件。

这里的罪魁祸首是您使用的

async

属性

通常，当向DOM添加

标记时，浏览器将暂停解析页面以执行脚本。对于

async

，不保证会出现这种情况。它可以在任意点执行

你的页面很小。浏览器几乎立即对其进行解析，事件在“记住”执行脚本之前被触发，因此脚本不会接收到该事件

async

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

也许您可以在manifest.json中设置“run\u at”：“document\u end”。将“运行于”：“文档结束”更改为“运行于”：“文档开始”。

它起作用了！我试过了

如果去掉

async

，会发生什么？哦，它可以工作。我不明白为什么——我以为async只会在加载网页时单独运行脚本。