Google Chrome扩展程序覆盖！重要

Question

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

Answer 1

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

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

---

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

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

您可以使用完全相同的选择器#menu span覆盖此规则，但需要确保在网站的样式表之后注入规则。在Chrome扩展程序content script中，可以通过在document_idle注入您的内容来实现：

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

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

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