Chrome扩展中如何检测YouTube链接是否打开并获取标签页ID？

你原来的代码错误在于用===直接匹配带*的字符串——这里的*是通配符，不是URL的实际内容，严格相等只会匹配完全一致的文本，自然识别不了watch这类子页面。下面是几种可行的解决方法：

方法一：用chrome.tabs.query()直接匹配（最简洁） #

Chrome扩展的tabs.query()API本身支持通配符匹配URL，不需要手动遍历所有窗口和标签页，代码更高效：

// 给弹窗按钮绑定点击事件
document.getElementById('your-button-id').addEventListener('click', () => {
  // 匹配所有youtube.com下的页面
  chrome.tabs.query({ url: "https://www.youtube.com/*" }, (tabs) => {
    tabs.forEach(tab => {
      console.log(`检测到YouTube页面！标签页ID：${tab.id}`);
    });
  });
});

方法二：字符串前缀检查 #

如果需要手动遍历的场景，用startsWith()方法判断URL前缀：

document.getElementById('your-button-id').addEventListener('click', () => {
  chrome.windows.getAll({ populate: true }, (windows) => {
    windows.forEach(window => {
      window.tabs.forEach(tab => {
        // 确保url存在，再检查前缀
        if (tab.url?.startsWith('https://www.youtube.com/')) {
          console.log(`检测到YouTube页面！标签页ID：${tab.id}`);
        }
      });
    });
  });
});

方法三：正则表达式匹配（适配更多场景） #

如果需要兼容http、不带www的youtube.com等情况，用正则表达式更灵活：

document.getElementById('your-button-id').addEventListener('click', () => {
  // 匹配http/https、带/不带www的youtube页面
  const youtubePattern = /^https?:\/\/(www\.)?youtube\.com\//;
  
  chrome.windows.getAll({ populate: true }, (windows) => {
    windows.forEach(window => {
      window.tabs.forEach(tab => {
        if (tab.url && youtubePattern.test(tab.url)) {
          console.log(`检测到YouTube页面！标签页ID：${tab.id}`);
        }
      });
    });
  });
});

必须配置的权限 #

无论用哪种方法，都要在扩展的manifest.json中声明tabs权限，否则无法访问标签页的URL信息：

{
  "manifest_version": 3, // 或你使用的版本2
  "permissions": ["tabs"],
  // 其他扩展配置项...
}

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