是否存在可检测PDF加载完成的JavaScript事件？Chrome扩展开发场景下的实现问询

嘿，这个问题我之前做Chrome扩展时也踩过坑！Chrome内置的PDF阅读器用的是独立渲染层，普通的DOM加载事件（比如DOMContentLoaded、window.load）根本抓不到它的加载完成状态，jQuery的$(() => {})触发得太早也没用。给你几个亲测有效的方案：

方案一：用MutationObserver监听PDF阅读器元素 #

Chrome的PDF阅读器会生成一个id="viewer"的核心容器，里面的.page元素就是渲染好的PDF页面。我们可以用MutationObserver来监听这个容器的变化，一旦检测到页面元素被添加，就说明PDF已经加载并渲染完成了：

// 先等待PDF阅读器的核心容器出现
function waitForPDFViewer(callback) {
  const viewer = document.getElementById('viewer');
  if (viewer) {
    callback(viewer);
    return;
  }
  // 没找到就每隔100ms轮询一次
  setTimeout(() => waitForPDFViewer(callback), 100);
}

waitForPDFViewer((viewer) => {
  // 监听容器内的元素变化
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      // 检查是否有新的页面元素被添加
      if (mutation.addedNodes.length > 0 && mutation.addedNodes[0].classList?.contains('page')) {
        console.log('PDF已加载并显示！');
        // 在这里执行你的content_script逻辑
        observer.disconnect(); // 不需要继续监听的话可以断开观察者
      }
    });
  });

  // 配置监听选项：监听子元素变化，包括子树
  observer.observe(viewer, { childList: true, subtree: true });
});

方案二：结合Chrome扩展的webNavigation API #

如果你的扩展有webNavigation权限，可以在background脚本里监听PDF页面的加载完成事件，再通过消息通知content_script：

第一步：在manifest.json中添加权限 #

{
  "permissions": ["webNavigation", "<all_urls>"]
}

第二步：background.js中监听事件 #

chrome.webNavigation.onCompleted.addListener((details) => {
  // 只处理PDF文件
  if (details.url.endsWith('.pdf')) {
    // 给对应标签页的content_script发消息
    chrome.tabs.sendMessage(details.tabId, { action: 'pdfReady' });
  }
}, { url: [{ urlSuffix: '.pdf' }] });

第三步：content_script中接收消息 #

chrome.runtime.onMessage.addListener((message) => {
  if (message.action === 'pdfReady') {
    // 这里加个小延迟确保PDF渲染完成（因为onCompleted只是主资源下载完）
    setTimeout(() => {
      console.log('PDF加载渲染完成！');
      // 执行你的操作
    }, 500); // 延迟时间可根据实际情况调整
  }
});

方案三：简单轮询PDF页面元素 #

如果不想用复杂的API，也可以用定时轮询的方式检查PDF页面是否存在：

function checkPDFLoaded() {
  const pdfPages = document.querySelectorAll('.page');
  if (pdfPages.length > 0) {
    console.log('PDF已加载完成！');
    // 执行你的content_script逻辑
  } else {
    // 每隔200ms检查一次
    setTimeout(checkPDFLoaded, 200);
  }
}

// 主页面加载后开始轮询
window.addEventListener('load', checkPDFLoaded);

为什么普通事件没用？ #

Chrome内置的PDF阅读器并非普通的网页DOM元素，它是Chrome内置的组件，其渲染流程独立于主页面的DOM加载流程。所以DOMContentLoaded和window.load触发时，PDF可能还在后台下载或渲染，自然抓不到它的完成状态。

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