如何在浏览器扩展弹窗判断当前标签页是否匹配content_scripts规则？

我开发了一个browser action弹窗，需要实现以下逻辑：

• 在已注入content script的页面（即匹配manifest文件中content_scripts内matches规则的页面）显示设置项；
• 在不匹配规则、未注入content script的页面，仅显示通用提示消息："此插件仅在指定站点激活"。

要求：

• 无需添加不必要权限；
• 实现方式最简洁；
• 同时兼容manifest v2和v3版本。

当前想到的方案是向当前标签页的content script发消息等待回复，但觉得略显粗糙，希望找到更优的方式。

这里提供两种兼容v2/v3的实现方式，均无需额外权限：

方案一：消息通信判断（靠谱又好实现） #

这种方式直接靠content script的存在状态来判断，逻辑简单准确，不用费劲解析matches规则：

1. 先在content script里加个消息监听，收到弹窗的验证请求就立刻回复：

// content-script.js
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.type === 'check_injected') {
    sendResponse({ injected: true });
  }
});

2. 弹窗的JS里，给当前标签页发验证消息，根据回复切换显示内容：

// popup.js
document.addEventListener('DOMContentLoaded', async () => {
  try {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    // 发消息时设个短超时，避免一直等
    const response = await chrome.tabs.sendMessage(tab.id, { type: 'check_injected' }, { timeout: 100 });
    
    if (response?.injected) {
      // 显示设置项
      document.getElementById('settings-section').style.display = 'block';
      document.getElementById('tip-section').style.display = 'none';
    } else {
      throw new Error('没收到回复');
    }
  } catch (err) {
    // 没回复说明没注入content script，显示提示
    document.getElementById('settings-section').style.display = 'none';
    document.getElementById('tip-section').style.display = 'block';
    document.getElementById('tip-text').textContent = '此插件仅在指定站点激活';
  }
});

优势： #

• 无需解析复杂的matches规则（比如通配符、正则转换）；
• 完全兼容manifest v2和v3；
• 逻辑直观，不容易出错。

方案二：解析manifest的matches规则判断（更轻量） #

要是不想用消息通信，也可以直接在弹窗里解析manifest里的matches规则，判断当前标签页URL是否符合：

1. 弹窗JS里的实现代码：

// popup.js
document.addEventListener('DOMContentLoaded', async () => {
  const manifest = chrome.runtime.getManifest();
  const matches = manifest.content_scripts?.[0]?.matches || [];
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  const isMatched = matches.some(pattern => {
    // 把matches规则转成正则表达式
    const regexPattern = pattern
      .replace(/\*/g, '.*')
      .replace(/\?/g, '.')
      .replace(/\./g, '\\.')
      .replace(/^https?:\/\//, '') // 去掉协议头
      .replace(/\/$/, ''); // 去掉末尾斜杠
    const regex = new RegExp(`^${regexPattern}$`);
    // 提取当前URL的域名加路径（去掉协议和参数）
    const urlPath = new URL(tab.url).hostname + new URL(tab.url).pathname;
    return regex.test(urlPath);
  });

  if (isMatched) {
    document.getElementById('settings-section').style.display = 'block';
    document.getElementById('tip-section').style.display = 'none';
  } else {
    document.getElementById('settings-section').style.display = 'none';
    document.getElementById('tip-section').style.display = 'block';
    document.getElementById('tip-text').textContent = '此插件仅在指定站点激活';
  }
});

注意事项： #

• 这个方法要处理matches规则的各种通配符情况，上面的转换逻辑只覆盖了基础场景，如果你的规则里有更复杂的情况（比如路径通配符、指定端口），得自己完善正则转换逻辑；
• 完全兼容v2和v3，无需额外权限。

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