通过在 Chrome 中注入样式表的奇怪样式答案

【问题标题】：Strange styling through injected stylesheets in Chrome通过在 Chrome 中注入样式表的奇怪样式
【发布时间】：2015-12-21 21:52:27
【问题描述】：

我们刚刚购买了 Primeface Theme&Layout Sentinel。但是我注意到 Chrome 中的表格有一种奇怪的样式。表格页眉和页脚有一个橙色边框。我的同事看不到这一点，如果我更改我的 chrome 配置文件，我也看不到它。

原文可以看这里：http://www.primefaces.org/sentinel/documentation.xhtml#j_idt38

我注意到 Chrome 正在注入样式表：

.ui-widget-header {
    border: 1px solid rgb(231, 143, 8);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background: url(http://primefaces.org/sentinel/images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x rgb(246, 168, 40);
    color: rgb(255, 255, 255);
    font-weight: bold;
}

这个注入的样式表是从哪里来的？我怎样才能阻止它？我知道 chrome 扩展可以注入样式表，但是这个样式表有一个指向 primefaces 的 url，或者这只是一个红鲱鱼，而扩展只是修改了一个现有的有效样式表？

更新：

.ui-widget-header {
    /* border: 1px solid #3f7506; */
    /* background: #3a8104 url("images/ui-bg_highlight-soft_33_3a8104_1x100.png") 50% 50% repeat-x; */
    color: #ffffff;
    font-weight: bold;
}

这是正常的样式表（它被一些其他样式覆盖，这就是为什么有些部分被注释掉了）。此样式表存在于两个配置文件中。从 URL 可以看出，样式通常使用相对 URI，但注入的样式使用的是绝对 URI。

【问题讨论】：

你们同事没有这个“注入”样式表吗？（无论注入是什么，看起来像一个普通的 PF 样式表）并检查你的缩放级别......
不，我的同事看不到这个，如果我切换我的 Chrome 配置文件，我也看不到它。缩放级别为 100%。当我检查另一个配置文件中的组件时，我没有注入的样式表。 primefaces 主题的普通 ui-widget-header 看起来完全不同（它在两种情况下都存在，但在一种情况下被覆盖）。另一个奇怪的是，注入样式表中的 url 使用的是绝对 URI，而所有其他样式通常使用相对 URI。
您尝试清除缓存了吗？

标签： css google-chrome primefaces

【解决方案1】：

好的，我找到了罪魁祸首！我已经一一禁用了我的每个扩展，直到页面正确显示。它是“CSS 选择器测试器”。我认为它是我经常使用的一个很棒的工具，但是当我不使用它时它不应该搞砸我的页面！

有趣的是，CSS 选择器测试器在我看到样式问题的页面上不起作用。在其他页面上它工作正常。

【讨论】：

遇到了同样的问题
“Mercury Reader”扩展也有同样的问题。已删除！
遇到了这个问题，因为我有一个名为“adspace”lol 的 id，而我的 addBlock 正在隐藏。谢谢
谢谢@Ben，也解决了我的问题。我是由于 d3coder 扩展 chrome.google.com/webstore/detail/d3coder/…
“Protection Web Avira”扩展有同样的问题。停用！

【解决方案2】：

我在注入样式表时遇到了同样的问题，在我的网站上隐藏了社交按钮。

原来我的Adblockplus 屏蔽了 Facebook 和 YouTube 社交按钮。

【讨论】：

你救了我一个客户；）
这里也一样。除了删除 adblocker plus 之外，还有其他已知的解决方案吗？
@AntoineHolman 您可以将网站添加到Whitelisted websites AdBlock Plus 设置中

【解决方案3】：

刚刚在打印样式表中使用“保存到口袋”扩展覆盖规则。

此外，假设您的 Google 'incognito'（隐私模式）浏览器没有运行您的扩展程序，查看“incognito”页面可以快速检查浏览器扩展程序是否存在问题。

【讨论】：

刚刚在“保存到 Pocket”时遇到了同样的问题。该扩展将opacity: 0 注入所有文本输入和单选按钮，并删除了按钮样式。

【解决方案4】：

在我的情况下，我禁用了名为“Nimbus Screenshot & Screen Video Recorder”的 chrome 扩展

【讨论】：

【解决方案5】：

如何在 Chrome 中调试“注入的样式表”

打开开发控制台，转到“网络”选项卡
过滤一些“.css”
查找加载某些 CSS 文件的扩展域
通过过滤域（如图片“hcndlme...”）在扩展列表中查找扩展
尝试禁用扩展并重新加载页面

【讨论】：

谢谢，但这似乎不适用于 Chrome 94.0.4606.81。 Domain 列默认是隐藏的（但仍然存在，如果您右键单击列标题可以显示它），但该表似乎没有显示扩展注入的 CSS（尽管列出了注入的脚本）。实际上，我在您的屏幕截图中看到它被列为“获取”，所以它可能只是因为扩展加载 CSS 的特定方式而出现。
您可以右键单击任何列并选择可见的列，只需在版本 94.0.4606.71 (Official Build) (64-bit) 上检查它
我知道，我说了这么多。对不起，我无法清楚地表达它。（对接buts很麻烦。）

【解决方案6】：

删除您新安装的浏览器扩展和缓存，这可能会解决您的问题。

【讨论】：

【解决方案7】：

同样的事情发生在我身上，链接从导航栏中消失了，因为 chrome 中的扩展名为“EPUB READER”。我禁用它并显示链接。

【讨论】：