用于覆盖 css 的 Chrome 扩展答案

【问题标题】：Chrome Extension to override css用于覆盖 css 的 Chrome 扩展
【发布时间】：2017-08-27 12:21:48
【问题描述】：

我想开发一个 Chrome 扩展程序，以便我可以覆盖特定网站上的一些 Css 样式。

这里是文件：

manifest.json：

{
  "manifest_version": 2,

  "name": "Modify CSS and HTML",
  "version": "0.1.0",
  "description": "Lateral blog post demo extension",

  "content_scripts": [{
    "css": ["styles.css"],
    "matches": ["http://www.record.pt/*"]
  }]

}

styles.css：

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');

.thumb-info h3 {
    font-family: 'Indie Flower', cursive !important;
}

我无法使用 Google 字体。它采用草书类型，但不是 Google 字体。使用 Chrome 版本 60.0.3112.113（官方构建）（64 位）

任何想法为什么会发生这种情况？有人可以在他们的 Chrome 上进行测试并提供反馈吗？

【问题讨论】：

请删除 !important
@Risa__B 是正确的。 !important 从字面上覆盖了其他所有内容。
我认为这部分代码不是问题所在。他想凌驾于一切之上。他说部分代码可以工作，他希望上面的代码可以工作
这里的问题是谷歌字体不起作用。如果我设置“Times New Roman”，Georgia，Serif；或其他任何东西，它都有效。谷歌字体过去可以工作，但现在不行……很奇怪……
过去在同一个网站上使用过吗？

标签： html css google-chrome

【解决方案1】：

过去我曾尝试引用外部文件（主要是 js），但从未成功。我记得chrome对外部文件有一些限制。除此之外，我还注意到网站上有几个跨域访问限制。我不确定这种导入是否可行。另请注意，该网站有一个 js 错误。因此它可能无法运行某些代码，但是我认为 CSS 不会因此受到影响。

以前遇到js文件这个问题，尝试了各种导入方式后，终于把js文件下载下来，在manifest中引用了。你也可以试试。将字体内容保存到单独的文件或您的 styles.css 文件中。

【讨论】：