Chrome扩展Manifest V3下如何覆盖CSS类本身的样式属性

方案一：注入高优先级覆盖样式（推荐） #

直接在页面中插入全局样式规则，利用CSS优先级覆盖原类定义，后续动态加载的元素会自动应用新样式，无需监听DOM变化。

内容脚本代码（code.js） #

function injectOverrideStyle() {
  const styleEl = document.createElement('style');
  // 用更具体的选择器或!important确保优先级高于原样式
  styleEl.textContent = `
    ._blablabla {
      background-color: red !important;
    }
  `;
  document.head.appendChild(styleEl);
}

// 确保页面加载完成后注入样式
if (document.readyState === 'complete') {
  injectOverrideStyle();
} else {
  window.addEventListener('load', injectOverrideStyle);
}

Manifest.json 配置 #

{
  "manifest_version": 3,
  "name": "全局样式修改工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://example.com/x/page/*"],
      "js": ["code.js"],
      "run_at": "document_end"
    }
  ]
}

说明：如果原样式使用了!important，可以通过增强选择器特异性提升优先级，比如写成body ._blablabla，避免过度依赖!important。

方案二：直接修改页面现有样式规则 #

如果需要动态调整样式值，或不想使用!important，可以直接定位页面中定义目标类的样式规则并修改。

内容脚本代码（code.js） #

function updateTargetClassStyle() {
  // 遍历所有页面样式表
  for (const sheet of document.styleSheets) {
    try {
      // 遍历当前样式表的所有规则
      for (const rule of sheet.cssRules) {
        // 匹配目标类选择器（支持动态命名的类，可根据实际规则调整正则）
        if (rule.selectorText && /\.\_blablabla/.test(rule.selectorText)) {
          // 修改目标属性
          rule.style.backgroundColor = 'red';
          // 可添加其他属性修改
          // rule.style.color = '#ffffff';
          return; // 找到目标规则后终止遍历
        }
      }
    } catch (e) {
      // 跨域样式表会触发安全错误，直接跳过
      continue;
    }
  }
}

function setupStyleWatcher() {
  // 首次加载时执行修改
  updateTargetClassStyle();

  // 监听页面样式表的动态加载/移除
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      if (mutation.target === document.head) {
        mutation.addedNodes.forEach(node => {
          // 检测到新的样式或链接标签时，延迟执行修改（等待样式加载完成）
          if (node.tagName === 'STYLE' || node.tagName === 'LINK') {
            setTimeout(updateTargetClassStyle, 100);
          }
        });
      }
    });
  });

  // 启动监听
  observer.observe(document.head, { childList: true });
}

// 页面加载完成后启动监听和修改
window.addEventListener('load', setupStyleWatcher);

说明：

• 跨域引入的样式表无法访问，需用try-catch跳过错误。
• 针对动态命名的类，可通过正则表达式匹配选择器文本（比如/\.\_[a-z0-9]{6,}/匹配类似._blablabla的动态类名）。

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