浏览器扩展开发中Firefox未触发window load事件问题咨询

问题原因 #

• 不同浏览器对chrome.tabs.executeScript的默认注入时序存在差异：
  • Chrome默认注入时机为document_idle，接近页面load事件触发节点，此时绑定load事件大概率可正常触发
  • Firefox默认注入时机更早，此时绑定load事件可能出现两种异常：要么注入时load事件已经触发过导致回调不执行，要么window.onload赋值被页面原有逻辑覆盖、提前触发
• tabs.create回调触发时仅代表标签页创建完成，不代表页面加载完成，此时直接注入脚本的运行时机完全由浏览器内核调度决定，没有统一时序保障

修复方案 #

方案1：Content Script侧增加加载状态兜底判断 #

修改manage_content_script.js代码，先判断当前页面加载状态，再决定直接执行还是绑定事件：

function execHandle() {
  handle_data();
}

// 页面已加载完成直接执行
if (document.readyState === 'complete') {
  execHandle();
} else {
  // 未加载完成则绑定load事件
  window.addEventListener('load', execHandle);
}

方案2：Background侧等待页面加载完成后再注入脚本 #

修改open_tab逻辑，监听标签页加载完成事件后再执行注入，从根源避免时序问题：

function open_tab() {
  chrome.tabs.create({
    url: "https://www.test.ca/apd/myad",
    active: false
  }, function (tab) {
    const targetTabId = tab.id;
    const tabUpdateListener = (changedTabId, changeInfo) => {
      // 匹配目标标签页且加载完成时注入脚本
      if (changedTabId === targetTabId && changeInfo.status === 'complete') {
        chrome.tabs.executeScript(targetTabId, { file: "manage_content_script.js" });
        // 执行完成后移除监听器避免重复触发
        chrome.tabs.onUpdated.removeListener(tabUpdateListener);
      }
    };
    chrome.tabs.onUpdated.addListener(tabUpdateListener);
  });
}

可选兼容优化 #

显式指定注入时机参数，统一多浏览器的注入行为：

chrome.tabs.executeScript(tab.id, { 
  file: "manage_content_script.js",
  runAt: "document_idle" // 可选值：document_start / document_end / document_idle
});

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