Chrome扩展报错：chrome.webNavigation.onCommitted未定义，求修复

你的报错根源是content script无法访问chrome.webNavigation API。Chrome的content script运行在网页的隔离上下文里，仅能使用有限的扩展API（如chrome.runtime、chrome.storage），而webNavigation属于后台专属API，必须在Manifest V3的service worker（后台脚本）中使用。

以下是具体修复方案：

1. 更新manifest.json #

移除原有的content_scripts配置，添加background字段指定service worker脚本：

{
  "name": "stopLoading", 
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "tabs",
    "webNavigation"
  ]
}

2. 创建background.js脚本 #

将原逻辑迁移到这个后台脚本中，这里可以正常访问webNavigation和tabs API：

chrome.webNavigation.onCommitted.addListener((details) => {
  if (details.frameId === 0) { // 仅监听主框架的导航事件
    setTimeout(() => {
      chrome.tabs.get(details.tabId, (tab) => {
        // 处理标签页已关闭等异常情况
        if (chrome.runtime.lastError) return;
        if (tab.status !== "complete") {
          chrome.tabs.stop(details.tabId);
        }
      });
    }, 10000); // 10秒后检查加载状态
  }
});

额外优化建议 #

• 用chrome.alarms替代setTimeout（可选）：由于service worker可能在闲置时被Chrome终止，短延迟场景下setTimeout可用，但alarms更稳定：

  chrome.webNavigation.onCommitted.addListener((details) => {
    if (details.frameId === 0) {
      chrome.alarms.create(`stop-load-${details.tabId}`, { delayInMinutes: 10/60 });
    }
  });
  
  chrome.alarms.onAlarm.addListener((alarm) => {
    const tabId = parseInt(alarm.name.split('-')[2]);
    chrome.tabs.get(tabId, (tab) => {
      if (chrome.runtime.lastError) return;
      if (tab.status !== "complete") {
        chrome.tabs.stop(tabId);
      }
    });
  });
  

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