Tampermonkey脚本中覆盖!important样式的解决方案

在Tampermonkey脚本开发过程中，经常会遇到需要修改网页元素样式的情况。特别是当目标元素已经使用了!important标记时，直接通过JavaScript修改样式往往会失效。本文将深入分析这个问题，并提供几种有效的解决方案。

问题分析

当网页中的元素样式被标记为!important时，它具有最高优先级，会覆盖其他普通样式规则。通过JavaScript直接设置元素的style属性时，即使添加了!important标记，也可能无法覆盖原有的!important样式。这是因为：

1. 内联样式的优先级虽然很高，但无法覆盖已有的!important声明
2. 动态添加的样式可能被网页后续执行的脚本覆盖
3. 某些网页会使用CSS-in-JS方案动态生成样式表

解决方案

1. 使用更具体的CSS选择器

CSS选择器的特异性决定了样式的优先级。通过使用更具体的选择器，可以覆盖原有样式：

// 在Tampermonkey脚本中使用GM_addStyle添加样式
GM_addStyle(`
  .parent-class .target-element {
    background-color: #191b1f !important;
  }
`);

2. 创建并插入新的样式元素

动态创建<style>标签并插入到文档中，确保样式在DOM加载后应用：

const style = document.createElement('style');
style.textContent = `
  .target-element {
    background-color: #191b1f !important;
  }
`;
document.head.appendChild(style);

3. 使用MutationObserver监听元素变化

对于动态加载的内容，可以使用MutationObserver监听DOM变化：

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    mutation.addedNodes.forEach((node) => {
      if (node.nodeType === 1 && node.matches('.target-element')) {
        node.style.setProperty('background-color', '#191b1f', 'important');
      }
    });
  });
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});

4. 直接修改样式表的CSS规则

对于更复杂的情况，可以直接遍历并修改文档中的样式表：

Array.from(document.styleSheets).forEach((sheet) => {
  try {
    Array.from(sheet.cssRules).forEach((rule) => {
      if (rule.selectorText === '.target-element') {
        rule.style.setProperty('background-color', '#191b1f', 'important');
      }
    });
  } catch (e) {
    // 跨域样式表会抛出异常
  }
});

最佳实践建议

1. 优先使用CSS方案：尽可能通过添加CSS规则而非JavaScript直接修改样式
2. 确保执行时机：使用@run-at document-end或document-idle确保DOM已加载
3. 处理动态内容：对于SPA或动态加载的内容，结合MutationObserver使用
4. 避免过度使用!important：只在必要时使用，过多使用会导致维护困难

通过以上方法，开发者可以有效地在Tampermonkey脚本中覆盖网页中的!important样式，实现所需的界面定制效果。