Google Chrome 扩展覆盖！重要

Question

我正在尝试修改网站的布局，但有时网站会使用！重要的是，有没有办法覆盖它？我似乎无法弄清楚如何在页面的 css 文件之后加载 css 内容脚本。

Answer 1

CSS规则!important可以通过以下方式覆盖：

1. 规则集中包含的另一个!important规则使用相同的选择器，但在您尝试覆盖的原始规则集之后进行评估。
2. 规则集中包含的另一个!important规则，它使用与您尝试修改的元素匹配的选择器，但比您尝试覆盖的原始规则集选择器更具体。

例如，如果网站对所有菜单项都有规则：

#menu span {
  font-weight: bold !important;
}

您可以使用相同的选择器覆盖此规则#menu span，但需要确保您的规则是在网站的样式表之后注入的。在 chrome-extension 的内容脚本中，可以通过在以下位置注入您的内容来实现document_idle：

  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyle.css"],
      "run_at": "document_idle"
    }
  ],
  ...

或者，您可以使用更具体的选择器注入规则：

#menu span.menu-item {
  font-weight: normal !important;
}