如何在Chrome扩展中仅拦截含embed的YouTube URL？

需求说明 #

我正在开发Chrome扩展，当前background.js会对所有YouTube和Facebook的URL触发弹窗。现在需要调整为仅对包含"embed"的YouTube链接（如https://www.youtube.com/embed/video_id）执行动作，其余所有URL（包括普通YouTube链接、Facebook全量链接）保持原允许状态，不触发弹窗。现有代码如下：

原background.js #

chrome.webNavigation.onCompleted.addListener(
  async () => {
    await chrome.action.openPopup();
  },
  { url: [
    { urlMatches: 'https://www.youtube.com/*' },
    { urlMatches: 'https://www.facebook.com/*' },
  ] },
);

原manifest.json #

{
  "name": "Test Extension",
  "description": "My App Details",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["webNavigation"],
  "action": { "default_popup": "popup.html" },
  "background": { "service_worker": "background.js" }
}

修改方案 #

只需调整chrome.webNavigation.onCompleted的URL匹配规则，精准定位到YouTube的Embed链接即可：

修改后的background.js #

chrome.webNavigation.onCompleted.addListener(
  async () => {
    await chrome.action.openPopup();
  },
  { url: [
    // 仅匹配YouTube的Embed链接
    { urlMatches: 'https://www.youtube.com/embed/*' },
    // 若需保留原Facebook全量URL的触发逻辑，保留此行；不需要则删除
    // { urlMatches: 'https://www.facebook.com/*' },
  ] },
);

关键说明 #

• urlMatches: 'https://www.youtube.com/embed/*' 会精准匹配所有以https://www.youtube.com/embed/开头的链接，完全覆盖需要拦截的Embed类型视频地址
• 若无需再对Facebook URL触发弹窗动作，直接删除对应的urlMatches配置项即可；如需保留原Facebook的逻辑，保留该行即可

manifest.json无需修改，保持原有配置即可正常运行。

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