Chrome插件开发：如何用JavaScript修改无ID嵌套元素样式

我之前做过类似的护眼Chrome插件，刚好碰到过一模一样的问题！直接给body设置颜色不生效，核心原因是很多嵌套元素（比如无类无ID的<span>）本身被页面CSS指定了文本颜色，优先级比body的继承样式更高。下面给你两种最实用的解决方案，优先推荐第一种：

方法一：CSS全局注入（最高效稳定） #

用CSS覆盖是最优解，比JS遍历元素性能好太多，而且能天然处理动态加载的元素。你可以在插件的content script里注入这段全局样式：

/* 强制覆盖所有元素的文本与背景色 */
* {
  color: #fff !important;
  background-color: #1e1e1e !important;
}

/* 单独处理链接，避免默认蓝色破坏深色模式 */
a, a:visited, a:hover, a:active {
  color: #4ecdc4 !important; /* 可选：用柔和的浅蓝替代默认蓝色 */
}

/* 优化表单元素样式，避免输入框还保留默认白底 */
input, textarea, select {
  color: #fff !important;
  background-color: #2d2d2d !important;
  border-color: #444 !important;
}

这里的!important是关键，它能强制覆盖页面内联样式或局部CSS规则。在这种全局样式覆盖的场景下，!important的使用是合理且必要的。

方法二：JavaScript遍历+监听动态元素（适合特殊场景） #

如果你的插件需要动态切换颜色，或者必须用JS控制，可以遍历所有元素并设置样式，同时监听页面新增的动态元素：

// 给现有所有元素设置样式
const setElementStyles = (element) => {
  element.style.color = '#fff';
  element.style.backgroundColor = '#1e1e1e';
  if (element.tagName === 'A') {
    element.style.color = '#4ecdc4';
  }
};

document.querySelectorAll('*').forEach(setElementStyles);

// 监听页面动态新增的元素（比如单页应用加载的内容）
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        setElementStyles(node);
        // 递归处理新增元素的子节点
        node.querySelectorAll('*').forEach(setElementStyles);
      }
    });
  });
});

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

不过这种方法要注意性能，页面元素过多时可能会有短暂卡顿，所以优先用CSS方案。

额外小提示 #

• 部分特殊元素（比如SVG内的文本、Canvas绘制内容）可能需要单独处理，但大部分普通网站的文本用上面的方法就能全覆盖。
• 若要支持用户自定义颜色，可以把CSS里的颜色值换成CSS变量，再用JS动态修改变量值即可。

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