Chrome扩展：使用script标签作为PageStateMatcher条件失效的解决办法

你遇到的问题其实是Chrome扩展API的一个明确限制：chrome.declarativeContent.PageStateMatcher 中的 css 选择器仅能匹配页面中可见的、会被浏览器渲染的DOM元素，而 <script> 标签属于非渲染元素（浏览器不会把它渲染到页面可视化区域），所以无论页面里有没有script标签，这个条件永远不会触发，按钮自然一直处于灰色禁用状态。

既然declarativeContent这条路走不通，我们可以换个思路：用内容脚本检测页面脚本存在性，再通过消息传递把状态同步给后台脚本，最后由后台控制扩展按钮的启用/禁用状态。下面是具体实现步骤：

1. 配置 Manifest.json #

首先确保你的manifest里声明了必要的权限和内容脚本：

{
  "manifest_version": 3,
  "name": "Script Detector",
  "version": "1.0",
  "permissions": ["tabs", "scripting"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换成你需要监控的网站范围
      "js": ["detect-script.js"],
      "run_at": "document_idle"
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_icon": {
      "16": "icon-disabled.png", // 禁用状态图标
      "48": "icon-disabled.png"
    }
  }
}

2. 内容脚本（detect-script.js） #

这个脚本负责检测页面中是否存在目标script标签（可以是所有script，也可以是特定src/内容的脚本），然后把结果发给后台：

// 检测逻辑：这里以匹配所有script标签为例，你可以改成特定条件
const hasTargetScript = document.querySelector('script') !== null;

// 向后台发送检测结果
chrome.runtime.sendMessage({
  type: 'SCRIPT_DETECTION_RESULT',
  hasScript: hasTargetScript
});

3. 后台脚本（background.js） #

后台脚本负责接收内容脚本的消息，同时处理标签页切换、刷新的情况，更新按钮状态：

// 存储各标签页的检测状态
const tabScriptStatus = {};

// 更新指定标签页的按钮状态
function updateTabActionState(tabId, hasScript) {
  // 设置按钮是否可用
  chrome.action.setEnabled({
    tabId: tabId,
    enabled: hasScript
  });
  // 可选：切换不同状态的图标
  const iconPath = hasScript ? 'icon-enabled.png' : 'icon-disabled.png';
  chrome.action.setIcon({
    tabId: tabId,
    path: {
      16: iconPath,
      48: iconPath
    }
  });
}

// 监听内容脚本的消息
chrome.runtime.onMessage.addListener((message, sender) => {
  if (message.type === 'SCRIPT_DETECTION_RESULT') {
    const tabId = sender.tab.id;
    tabScriptStatus[tabId] = message.hasScript;
    updateTabActionState(tabId, message.hasScript);
  }
});

// 监听标签页刷新/加载完成事件，重新检测
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.url.startsWith('http')) {
    // 重新注入检测脚本（避免内容脚本没触发的情况）
    chrome.scripting.executeScript({
      target: { tabId: tabId },
      files: ['detect-script.js']
    }).catch(err => console.error('重新检测失败:', err));
  }
});

// 监听标签页切换事件，恢复对应状态
chrome.tabs.onActivated.addListener((activeInfo) => {
  const tabId = activeInfo.tabId;
  const hasScript = tabScriptStatus[tabId] ?? false;
  updateTabActionState(tabId, hasScript);
});

关键注意点 #

• 如果需要匹配特定脚本（不是所有script标签），可以修改内容脚本里的检测逻辑，比如：

  // 匹配src包含某特定字符串的脚本
  const hasTargetScript = document.querySelector('script[src*="analytics.js"]') !== null;
  // 或者匹配包含特定代码的内联脚本
  const hasTargetScript = Array.from(document.querySelectorAll('script')).some(script => 
    script.textContent.includes('trackEvent')
  );
  

• 权限配置要准确：Manifest V3中需要scripting权限来动态注入脚本，tabs权限来监听标签页事件。
• 初始状态处理：页面加载完成前按钮会保持禁用状态，直到内容脚本完成检测并发送消息。

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