Chrome 覆盖 PrimeFaces 样式

Question

我们刚刚购买了 PrimeFaces 主题“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。

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

如果有人在 2022 年 2 月 24 日偶然发现这一点，因为大多数网页由于

color-scheme: dark

就在注入样式表的元素处而具有黑色背景，那么罪魁祸首是“Adobe Acrobat：PDF 编辑、转换、签名工具” - https://chrome.google.com/webstore/detail/adobe-acrobat-pdf-edit-co/efaidnbmnnnibpcajpcglclefindmkaj

禁用扩展后工作正常。

Answer 5

对于正在经历此问题的巴西人（尤其是），请检查您是否有 Méliuz 扩展 (chrome://extensions/?id=jdcfmebflppkljibgpdlboifpcaalolg) 并禁用它。

Answer 6

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

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

这个问题似乎主要是由录音机扩展引起的。我的问题是由“Screen Recorder”chrome 扩展引起的。

Answer 11

对我来说，

Shield

功能导致了这样的样式问题。禁用后，样式就如预期的那样。

Answer 12

这让我发疯，感谢您发布此内容。

ExifViewer Pro chrome 扩展程序也可以执行此操作，如果其他人在某些照片上看到随机出现的微小相机图标，您可以单击该图标并提取照片的 EXIF 数据。它会在您的页面中注入一个跨度，如下所示：

<span class="overlayContainer" style="top: 447.375px; left: 124.5px; opacity: 0.5;"></span>

Answer 13

我在 Chrome 中开发浏览器扩展时遇到了这个问题。有一个带有以下 CSS 的注入样式表：

body {
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 75%;
}

奇怪的是，这种情况发生在禁用所有其他扩展的情况下，并且仅出现在

chrome-extension://

页面上。

此样式表没有显示在“网络”选项卡中，除了这个其他问题之外，我找不到任何其他文档或参考：Chrome 扩展与本地开发测试相比显示不正确的字体大小