Firefox扩展window load事件未触发问题求助

我明白你在开发Firefox扩展时遇到的困扰——代码里的红色边框能正常显示，但window的load事件始终没触发，alert弹不出来，调试也没报错。咱们来一步步分析问题出在哪，再给你可行的解决办法。

为什么红色边框生效但load事件没触发？ #

你看到document.body.style.border = "5px solid red"生效，说明你的脚本运行时，DOM已经构建完成了，body元素已经存在。但window.load事件是要等页面所有资源（图片、样式表等）都加载完成才会触发，而如果你的脚本是在DOM构建完成后才注入的，很可能load事件在你注册监听之前就已经触发过了，自然不会执行你的startup函数。

另外，你第二种代码里用的Components.interfaces是旧版Firefox XPCOM扩展的API，现在Firefox已经全面转向标准的WebExtensions API，旧API不仅被废弃，在新扩展环境里也无法正常工作，这也是你那部分代码失效的原因之一。

解决方案 #

根据你开发的是现代WebExtensions扩展，给你几个靠谱的方案：

方案1：在内容脚本中监听DOMContentLoaded或检查readyState #

内容脚本是注入到网页上下文的脚本，优先监听DOMContentLoaded（DOM构建完成就触发，不用等所有资源），或者直接检查document.readyState来避免错过事件：

function startup() {
  alert("Hi");
}

// 先检查DOM是否已经加载完成
if (document.readyState === "interactive" || document.readyState === "complete") {
  startup();
} else {
  // 如果还没加载，监听DOMContentLoaded事件
  document.addEventListener("DOMContentLoaded", startup);
}

// 红色边框依然保留
document.body.style.border = "5px solid red";

方案2：用WebExtensions的tabs API监听页面加载完成 #

如果你需要在背景脚本中监听所有页面的加载完成，可以使用browser.tabs.onUpdated事件，然后在页面加载完成后注入代码：

// 背景脚本中
browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // 当页面加载状态变为complete时执行
  if (changeInfo.status === "complete" && tab.active) {
    browser.tabs.executeScript(tabId, {
      code: `
        alert("Hai");
        document.body.style.border = "5px solid red";
      `
    });
  }
});

额外注意事项 #

• 如果你还在使用旧版XUL/XPCOM扩展，建议迁移到WebExtensions，因为Firefox已经不再支持旧版扩展的开发和分发。
• 确保你的脚本注入时机正确：在manifest.json中设置content_scripts的run_at属性，比如"run_at": "document_start"可以让脚本在DOM开始构建时就运行，这样就不会错过事件。示例：

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["your-script.js"],
      "run_at": "document_start"
    }
  ]
}

内容的提问来源于stack exchange，提问作者noone392