9

我正在编写一个 Chrome 扩展程序，其中一个小面板出现在现有网站的顶部。当我访问某些网站时，我注意到我的面板的 CSS 已被网站的 CSS 覆盖。我目前正在使用Eric Meyer 的 CSS Reset，但它似乎没有起到作用。还有什么我可以做的吗？

4

4 回答 4

8

这是一个带有 iframe 的漂亮“hack”，您实际上并没有实例化 iframe：

  1. 将 iframe 附加到 DOM，这将是你爸爸的容器
  2. 进入 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>';
于 2012-04-11T05:15:58.013 回答
1

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

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

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

于 2012-04-10T23:46:39.643 回答
1

我刚刚写的一个扩展遇到了类似的问题。我已经让它们中的大多数消失了，但不是全部。我想我知道为什么，但我还没有解决异常（这只是现在的学校作业）。

这是我发现的：当通过扩展清单或后台页面注入样式表时，它被视为用户样式表，仅赋予它比默认浏览器样式表级联的优先级。至少在我的经验中，将!important指令添加到您的规则中无济于事。用户样式表（由扩展或手动添加）可以包含!important指令，但由于某种原因，Chrome 不支持它们——只需检查它们在 Chrome DevTools 中的显示方式，没有!important. 添加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);

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

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

最后，您必须勇敢地忽略所有关于该!important指令最好谨慎使用的警告。正好相反。当您添加!important到每个样式规则时，就面板的级联而言，就好像您根本没有使用它一样。另一方面，您现在将成为小组的老板。相信我，有人会根据!important他们的button:hover background-image规则制定指令。引导您精心制作的按钮莫名其妙地变成 1985 年 bon jovi 音乐会的音乐会图像 - 但只有当鼠标悬停时，所以不用担心，对吧？

于 2012-05-06T02:01:17.373 回答
0

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" />
于 2012-05-24T03:43:26.853 回答