如何编写Chrome扩展脚本检测指定按钮是否存在并弹窗提示？

核心思路 #

Chrome扩展的后台脚本（或Service Worker）无法直接访问网页DOM，必须通过内容脚本或注入脚本的方式获取页面元素。我们需要在点击扩展图标时，向当前活动标签页注入脚本，根据目标按钮的特征（class、文本、样式、属性）进行查找，找到后触发弹窗。

步骤1：配置manifest文件 #

根据你使用的Chrome扩展版本（Manifest V2/V3），配置对应的权限和基础信息：

Manifest V3 配置示例

{
  "manifest_version": 3,
  "name": "目标按钮查找工具",
  "version": "1.0",
  "action": {
    "default_icon": "icon.png" // 替换成你的图标路径
  },
  "permissions": ["activeTab"]
}

Manifest V2 配置示例

{
  "manifest_version": 2,
  "name": "目标按钮查找工具",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png" // 替换成你的图标路径
  },
  "permissions": ["activeTab"]
}

步骤2：编写按钮查找逻辑 #

修改你的扩展后台脚本（background.js或service-worker.js），实现点击图标时注入脚本查找按钮：

Manifest V3 脚本示例

chrome.action.onClicked.addListener(async (tab) => {
  // 向当前标签页注入查找函数
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: findTargetButton
  });
});

function findTargetButton() {
  // 根据class筛选候选按钮
  const candidateButtons = document.querySelectorAll('button.bt.bt-sm.text-white.btn-flashing');
  
  for (const btn of candidateButtons) {
    // 匹配按钮的文本、背景色和disabled属性
    if (btn.textContent.trim() === 'ABC - 01' &&
        btn.style.backgroundColor === 'rgb(253, 126, 20)' && // #fd7e14对应的RGB值
        btn.hasAttribute('disabled')) {
      alert('found it');
      return;
    }
  }
  
  // 未找到时提示
  alert('Button not found');
}

Manifest V2 脚本示例

chrome.browserAction.onClicked.addListener((tab) => {
  // 向当前标签页注入执行代码
  chrome.tabs.executeScript(tab.id, {
    code: `
      function findTargetButton() {
        const candidateButtons = document.querySelectorAll('button.bt.bt-sm.text-white.btn-flashing');
        
        for (const btn of candidateButtons) {
          if (btn.textContent.trim() === 'ABC - 01' &&
              btn.style.backgroundColor === 'rgb(253, 126, 20)' &&
              btn.hasAttribute('disabled')) {
            alert('found it');
            return;
          }
        }
        
        alert('Button not found');
      }
      findTargetButton();
    `
  });
});

关键说明 #

• DOM访问限制：扩展的后台脚本运行在独立沙箱，无法直接操作网页DOM，必须通过chrome.scripting.executeScript（V3）或chrome.tabs.executeScript（V2）注入脚本到页面上下文执行。
• 特征匹配准确性：同时匹配class、文本、背景色和disabled属性，避免因页面存在相似按钮导致误判。注意CSS颜色值在JS中会转为RGB格式，所以需要用rgb(253, 126, 20)匹配#fd7e14。

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