如何使用内容脚本有效地覆盖 CSS？答案

【问题标题】：How can I efficiently overwrite CSS with a content script?如何使用内容脚本有效地覆盖 CSS？
【发布时间】：2012-05-23 10:45:20
【问题描述】：

我的问题是我想覆盖网站的样式。问题是，有一种方法可以做到这一点，使用!important 语句，如this example 所示。

但是，我的文件中有数千条 CSS 指令，是否有更快速/更有效的方法来执行此操作，即不在每一行都放置 !important？

【问题讨论】：

标签： google-chrome-extension

【解决方案1】：

我发现最简单和最有效的方法是将您注入的任何 html 模板包装在具有非常特定 id 的 div 中。

<div id="my-specific-id">
  // Your injected HTML template or section of the website you want to change
</div>

完成此操作后，重置所有可能影响该部分的 CSS。

#my-specific-id {

  // A comprehensive CSS reset

}

// The rest of your CSS will override the reset above

这是一个这样的重置：http://html5doctor.com/html-5-reset-stylesheet/

请注意，您可能不需要 CSS 重置中的所有内容，因此请删除与减轻浏览器负载无关的内容。例如，我无法想象你真的想重置figcaption。

作为编写扩展程序的人，您应该非常关心您的扩展程序是否会破坏您在注入脚本的网站上的用户体验。

我概述的方法将保证只更改您特别关心的网站部分。

您可以使用自己的模板（假设您想在不使用 iframe 的情况下为每个页面添加天气小部件）或页面的特定部分来执行此操作。例如，您可以将所有 <p> 元素包装在您定义的高度特定的 id 中。

这是我最近从事的一个项目中使用 Sass 的示例...

#specific-id-css-ultimate-reset {
html, button, input, div, p, img, form {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

@import "modules/all";
@import "components/all";
@import "popups/all";
}

<div id="my-superspecific-html-template-wrapper">
  <HTML TEMPLATE>
</div>

【讨论】：

【解决方案2】：

也许将原始 CSS 中您不想希望在注入的样式表中覆盖的所有样式都包含在内会更快？如果是这样，您可以使用内容脚本/代码注入或阻止浏览器对 CSS 文件的请求从页面中删除原始样式表。

您还可以编写一个小脚本来执行一些正则表达式魔术并将!important 添加到给定 CSS 文件的每一行。

【讨论】：