修复Chrome插件：首次打开网页时获取标签页URL以拦截YouTube Shorts

问题根源 #

chrome.tabs.onUpdated会在标签页状态变化时多次触发，首次加载、刷新或跳转链接的初期阶段，tab.url可能尚未被浏览器赋值，导致无法进入判断逻辑；而tabs.onCreated触发时标签页刚创建，URL还未开始加载，自然为空。

修复方案 #

方案1：优化tabs.onUpdated监听逻辑

利用onUpdated回调的changeInfo参数获取最新URL，同时结合页面状态确保DOM已加载完成，避免过早发送消息导致content script未就绪：

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // 优先取changeInfo中的最新URL，其次用tab.url兜底
  const currentUrl = changeInfo.url || tab.url;
  // 确认URL存在且匹配Shorts路径，同时页面加载完成
  if (currentUrl && currentUrl.includes("youtube.com/shorts") && changeInfo.status === "complete") {
    chrome.tabs.sendMessage(tabId, { type: "NEW" });
  }
});

方案2：使用webNavigation API（更精准）

chrome.webNavigation提供更细粒度的导航事件监听，onCompleted事件会在页面导航完全完成后触发，此时URL必然有效，还能通过过滤条件减少不必要的监听：

chrome.webNavigation.onCompleted.addListener((details) => {
  chrome.tabs.sendMessage(details.tabId, { type: "NEW" });
}, {
  // 只监听YouTube Shorts相关的导航
  url: [
    { hostSuffix: "youtube.com", pathContains: "/shorts" }
  ]
});

必要的权限配置 #

无论使用哪种方案，都需要在manifest.json中配置对应权限，确保插件能正常访问标签页和YouTube站点：

{
  "manifest_version": 3,
  "permissions": ["tabs", "webNavigation"],
  "host_permissions": ["https://*.youtube.com/*"]
}

补充说明 #

• 若使用Manifest V2，权限配置逻辑一致，仅需调整manifest_version字段；
• 需确保content script已正确注入到YouTube页面，否则sendMessage会执行失败。

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