能否通过Chrome DevTools及扩展检测样式表中CSS类规则的修改？

完全可以实现这个需求，核心是借助Chrome DevTools提供的调试协议API，或者通过注入脚本监听样式表的变化，以下是两种可行的实现方案：

方案一：使用Chrome调试协议（更精准） #

利用DevTools的CSS域事件，直接监听样式规则的修改，并且可以精准筛选出类选择器的变化：

1. 配置扩展清单
   在manifest.json中声明DevTools相关配置和权限：

{
  "name": "样式表类规则修改监控",
  "version": "1.0",
  "manifest_version": 3,
  "devtools_page": "devtools.html",
  "permissions": ["activeTab"]
}

2. 编写DevTools逻辑
   创建devtools.html引入脚本文件：

<!-- devtools.html -->
<!DOCTYPE html>
<script src="devtools.js"></script>

在devtools.js中连接调试协议，监听样式规则变化：

// 启用CSS调试域并监听规则修改事件
chrome.devtools.inspectedWindow.eval(`
  chrome.devtools.protocol.send('CSS.enable', {}, () => {
    // 监听样式规则变更事件
    chrome.devtools.protocol.on('CSS.styleRuleChanged', (event) => {
      const ruleData = event.params.rule;
      // 筛选出包含类选择器的规则（选择器含.）
      const hasClassSelector = ruleData.selectorList.selectors.some(s => s.value.includes('.'));
      if (hasClassSelector) {
        // 发送事件到扩展上下文，可用于展示通知
        window.postMessage({
          type: 'CLASS_RULE_UPDATED',
          payload: {
            selector: ruleData.selectorList.selectors.map(s => s.value).join(','),
            updatedStyle: ruleData.style.cssText,
            sourceSheet: ruleData.styleSheetId
          }
        }, '*');
      }
    });
  });
`);

// 创建侧边栏展示通知
chrome.devtools.panels.elements.createSidebarPane("类规则修改日志", (sidebar) => {
  sidebar.setPage("sidebar.html");
});

3. 展示通知内容
   创建sidebar.html用于在DevTools侧边栏显示修改记录：

<!-- sidebar.html -->
<!DOCTYPE html>
<html>
<body style="padding: 10px;">
  <h3>类规则修改记录</h3>
  <div id="log-container" style="margin-top: 10px;"></div>
  <script>
    window.addEventListener('message', (msg) => {
      if (msg.data.type !== 'CLASS_RULE_UPDATED') return;
      const { selector, updatedStyle, sourceSheet } = msg.data.payload;
      const logEntry = document.createElement('div');
      logEntry.style.marginBottom = '10px';
      logEntry.style.paddingBottom = '10px';
      logEntry.style.borderBottom = '1px solid #eee';
      logEntry.innerHTML = `
        <p><strong>选择器:</strong> ${selector}</p>
        <p><strong>修改后样式:</strong> <code>${updatedStyle}</code></p>
        <p><strong>来源样式表ID:</strong> ${sourceSheet}</p>
      `;
      document.getElementById('log-container').prepend(logEntry);
    });
  </script>
</body>
</html>

方案二：使用MutationObserver监听样式表 #

如果不想依赖调试协议，也可以通过注入脚本，用MutationObserver监听页面样式表的变化：

在devtools.js中替换为以下代码：

chrome.devtools.inspectedWindow.eval(`
  // 遍历所有样式表，添加监听器
  document.styleSheets.forEach(sheet => {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        // 忽略样式表href变化（比如动态加载样式）
        if (mutation.type === 'attributes' && mutation.attributeName === 'href') return;
        // 检查每个规则是否为类规则
        sheet.cssRules.forEach(rule => {
          if (rule.type === CSSRule.STYLE_RULE && rule.selectorText.includes('.')) {
            window.postMessage({
              type: 'CLASS_RULE_UPDATED',
              payload: {
                selector: rule.selectorText,
                updatedStyle: rule.style.cssText,
                sourceSheet: sheet.href || '内联样式表'
              }
            }, '*');
          }
        });
      });
    });
    // 监听样式表的子节点和属性变化
    observer.observe(sheet, { childList: true, subtree: true, attributes: true });
  });
`);

// 侧边栏配置同方案一
chrome.devtools.panels.elements.createSidebarPane("类规则修改日志", (sidebar) => {
  sidebar.setPage("sidebar.html");
});

注意事项 #

• 调试协议方案更精准，能直接捕获DevTools中的修改操作；MutationObserver方案则能覆盖所有样式表的变化（包括页面脚本修改）。
• 如果需要桌面通知，可在扩展中添加notifications权限，通过chrome.notifications.create发送提醒。

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