Chrome扩展新标签页完全加载检测问题求助

针对你遇到的问题——动态创建的标签页中图片（含SVG内<image>）未加载完成就触发打印，以下是基于Promise+await的可靠实现方案：

核心思路 #

由于目标标签页是通过window.open()写入HTML后document.close()创建的，常规的chrome.tabs.onUpdated的complete状态或window.load事件无法覆盖所有资源（尤其是SVG内的图片）的加载状态。我们需要直接在目标页面内检查所有可视化资源的加载完成状态，并用Promise封装等待逻辑。

具体实现 #

1. 扩展侧等待逻辑（后台/触发脚本） #

该函数通过chrome.scripting.executeScript向目标标签页注入脚本，返回一个Promise，直到所有图片加载完成才resolve：

async function waitForTabFullLoad(tabId) {
  const result = await chrome.scripting.executeScript({
    target: { tabId },
    func: () => {
      return new Promise(resolve => {
        // 检查所有图片（含SVG <image>）是否加载完成
        const checkAllImagesLoaded = () => {
          const allImages = [...document.querySelectorAll('img'), ...document.querySelectorAll('svg image')];
          return allImages.every(img => {
            // SVG <image>和普通img都用complete属性判断，普通img额外校验naturalWidth确保有效加载
            if (img.tagName.toLowerCase() === 'image') {
              return img.complete;
            }
            return img.complete && img.naturalWidth > 0;
          });
        };

        // 绑定资源加载监听
        const handleResourceLoad = () => {
          if (document.readyState === 'complete' && checkAllImagesLoaded()) {
            // 移除所有监听，避免内存泄漏
            document.removeEventListener('readystatechange', handleReadyState);
            document.querySelectorAll('img, svg image').forEach(img => {
              img.removeEventListener('load', handleResourceLoad);
              img.removeEventListener('error', handleResourceLoad);
            });
            // 延迟100ms确保SVG渲染完成，可选
            setTimeout(resolve, 100);
          }
        };

        const handleReadyState = () => handleResourceLoad();

        // 初始化绑定监听
        document.addEventListener('readystatechange', handleReadyState);
        document.querySelectorAll('img, svg image').forEach(img => {
          img.addEventListener('load', handleResourceLoad);
          img.addEventListener('error', handleResourceLoad); // 错误视为加载完成，避免阻塞
        });

        // 立即检查，若已满足条件直接resolve
        if (document.readyState === 'complete' && checkAllImagesLoaded()) {
          handleResourceLoad();
        }
      });
    }
  });
  return result[0].result;
}

2. 调用示例（触发打印） #

// 假设你已获取到新标签页的tabId
async function printAfterFullLoad(tabId) {
  await waitForTabFullLoad(tabId);
  // 向目标标签页发送打印指令
  await chrome.tabs.sendMessage(tabId, { action: 'print' });
}

3. 目标标签页内容脚本（处理打印） #

在目标标签页的内容脚本中监听打印指令：

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.action === 'print') {
    window.print();
    sendResponse({ success: true });
  }
});

方案优势 #

• 覆盖所有资源：同时检查普通<img>和SVG内的<image>元素，确保所有可视化资源加载完成。
• 避免遗漏事件：结合readystatechange和图片的load/error事件，即使脚本注入时机较晚也能正确触发。
• Promise+await风格：完全符合你要求的异步写法，无需嵌套回调。

对前两种方案失效的解释 #

1. chrome.tabs.onUpdated的complete状态仅表示HTML文档解析完成，不包含异步加载的图片（尤其是SVG内的资源）。
2. 注入脚本监听window.load未触发，是因为目标页面通过document.close()完成写入后，load事件可能在脚本注入前已触发，导致监听不到；部分场景下document.readyState异常也会导致该问题。

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