如何监听命令行打开的Chrome标签页事件以处理页面无限加载？

问题原因 #

1. 命令行启动Chrome时，扩展后台脚本可能滞后于页面初始导航的触发时机，导致onBeforeNavigate/onUpdated事件错过初始导航。
2. 原代码中documentLifecycle == 'active'的条件过滤掉了刚打开标签页时的loading状态，此时页面还未进入active生命周期。

解决方案 #

1. 调整生命周期判断条件 #

允许监听loading状态的页面，确保刚打开的标签页能被捕获：

chrome.webNavigation.onBeforeNavigate.addListener((details) => {
  console.log(details);

  if (
    details.frameType === 'outermost_frame' &&
    // 同时允许loading和active状态
    (details.documentLifecycle === 'active' || details.documentLifecycle === 'loading') &&
    !details.url.includes('chrome://')
  ) {
    // 执行你的重载倒计时逻辑
  }
});

2. 监听Chrome启动事件，补处理已加载标签页 #

当Chrome通过命令行启动时，扩展启动后主动检查所有已打开的标签页，对符合条件的页面触发逻辑：

// 抽离导航处理逻辑为复用函数
function handlePageLoad(tabInfo) {
  if (
    tabInfo.frameType === 'outermost_frame' &&
    (tabInfo.documentLifecycle === 'active' || tabInfo.documentLifecycle === 'loading') &&
    !tabInfo.url.includes('chrome://')
  ) {
    // 执行重载倒计时逻辑
    console.log('处理页面:', tabInfo.url);
  }
}

// 初始监听导航事件
chrome.webNavigation.onBeforeNavigate.addListener(handlePageLoad);

// Chrome启动时检查所有标签页
chrome.runtime.onStartup.addListener(() => {
  chrome.tabs.query({}, (tabs) => {
    tabs.forEach(tab => {
      if (tab.url) {
        handlePageLoad({
          frameType: 'outermost_frame',
          documentLifecycle: tab.status === 'loading' ? 'loading' : 'active',
          url: tab.url,
          tabId: tab.id
        });
      }
    });
  });
});

3. 监听新标签页创建事件 #

针对命令行直接打开新标签页的场景，监听tabs.onCreated事件，确保捕获初始加载的页面：

chrome.tabs.onCreated.addListener((tab) => {
  // 延迟100ms确保页面开始加载，避免tab.url还未初始化
  setTimeout(() => {
    if (tab.url && !tab.url.includes('chrome://')) {
      handlePageLoad({
        frameType: 'outermost_frame',
        documentLifecycle: 'loading',
        url: tab.url,
        tabId: tab.id
      });
    }
  }, 100);
});

4. 优化扩展后台脚本加载时机 #

在manifest.json中确保后台脚本配置正确，使用Chrome推荐的事件驱动模式，避免延迟加载：

{
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["webNavigation", "tabs"]
}

注意：使用Service Worker作为后台脚本时，必须声明webNavigation和tabs权限。

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