Question

我正在撰写Chrome扩展程序，其中一个小面板显示在现有网站的顶部。当我去某些网站时，我注意到我的面板的CSS已经被网站的CSS覆盖了。我目前正在使用Eric Meyer's CSS Reset，但它似乎没有做到这一点。还有什么我可以做的吗？

Answer 1

这是iframes的一个漂亮的“黑客”，你实际上并没有实例化iframe：

将一个iframe附加到DOM，这将是你爸爸的容器
进入iframe并将html添加到正文的innerHTML
看起来像这样：

var iframe = document.createElement('iframe'); document.documentElement.appendChild(iframe); //fastest way to append to DOM: http://jsperf.com/insertbefore-vs-appendchild/2 iframe.contentDocument.body.innerHTML = '<a href="yomama.com">Normal link!!</a>';

Answer 2

我不熟悉Chrome扩展程序本身。但你可以尝试在'id'范围内确定你的面板范围：

<div id='my-panel'>
  PANEL GOES HERE
</div>

然后在CSS中只有#my-panel作为所有css的第一个选择器。获取重置css并将#my-panel标识符添加到其中定义的每个元素。可能很乏味......但是会确保你重置所有元素，并且几乎可以保证它们的重置优先级高于网站可能定义的任何元素。

Answer 3

我刚才写的扩展遇到了类似的问题。我让他们中的大多数都消失了，但不是全部都消失了。我想我知道为什么，但我还没有解决这些例外问题（这只是目前的学校作业）。

以下是我发现的内容：当通过扩展清单或后台页面注入样式表时，它被视为用户样式表，仅使其优先于默认浏览器样式表。至少根据我的经验，在规则中添加！重要指令无济于事。用户样式表（通过扩展名或手动添加）可以包含！重要指令，但Chrome不会因某些原因而受到尊重 - 只需检查它们在Chrome开发工具中的显示方式，重要性。添加id属性也无济于事，因为特异性只会胜过优先级相等的地方。

对我有用的是什么：

var ninjaCSS = document.createElement("link");
ninjaCSS.setAttribute("rel", "stylesheet");
ninjaCSS.setAttribute("type", "text/css");
ninjaCSS.setAttribute("href", chrome.extension.getURL('ninja.css'));
document.getElementById("head").appendChild(ninjaCSS);

此代码包含在清单中作为内容脚本列出的javascipt文件中，并且应在文档加载时运行。 css文件未在清单中列出，但包含在扩展文件夹中。现在，样式表与其他作者样式表处于同等地位。

当然，这只是一个开始。您现在可以为面板中的所有元素提供一个id属性（您可能已经拥有）。您是否使用样式重置取决于您。但是，您必须确保您的样式指定了野外样式表可能尝试操作的每个规则。如果您不打算从默认值更改规则，则仍必须指定该默认值。即使默认值为“none”;

最后，你必须勇敢地忽略所有警告，即！important指令最好用。恰恰相反。当你为每个样式规则添加！important时，就你的面板的级联而言，就好像你根本没有使用它一样。另一方面，您现在将成为小组的老板。相信我，有人会在他们的按钮上添加一个重要的指令：悬停背景图像规则。引导你精心设计的按钮莫名其妙地变成1985年bon jovi音乐会的音乐会形象 - 但只有当鼠标悬停时，所以不用担心，对吗？

Answer 4

appendChild解决方案适用于我（Devin G Rhode和jCyCle的答案）。但我注意到这些解决方案只添加了属性xmlns="http://www.w3.org/1999/xhtml"。所以我只是通过将这个xmlns属性添加到我的链接标签（直接，不使用JS）来测试我的代码，它也有效，不知道为什么。

出现故障：

<link rel="stylesheet" type="text/css" href="filesystem:chrome-extension://................/temporary/Content/Styles/style.css" />

工作：

<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" type="text/css" href="filesystem:chrome-extension://.............../temporary/Content/Styles/style.css" />

Chrome扩展程序 - 防止CSS被写入

4 个答案: