☰

如何永久更改 Firefox 新标签页 CSS？

tag-icon • tag-icon firefox browser html css
如何永久更改 Firefox 新标签页 CSS？

因此，当我在 Firefox 中打开新标签页或私人浏览新标签页时，如果我进入检查元素，我就可以编辑 CSS。

我想永久地更改 CSS，以便当我再次打开 Firefox 时，我所做的更改仍然存在。

例如，当我打开隐私浏览标签时，它有 Firefox 徽标、Firefox 字标、搜索栏，然后底部有一条小消息。我可以使用检查元素来更改这些内容的显示，但它只会在页面打开时持续存在。我想保留那里的更改。

我有一个定制的 userContent.css 文件，其中已做了一些更改，但我的问题是，我尝试更改的一些内容不起作用。

问题就在这里：

.logo {
    background-color: rgba(0, 0, 0, 0);
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-image: url("file/path/to/image.png");
    background-origin: padding-box;
    background-clip: border-box;
    background-size: 96px;
    display: inline-block;
    height: 96px;
    width: 96px;
}

当我在检查元素中编辑 CSS 时，我可以将 Firefox 徽标更改为其他内容而不会出现问题，但当我尝试在这里执行此操作时，它不起作用。

请注意，以下操作确实有效：

.logo {
    display: none !important;
}

它正确地完全删除了徽标。那么为什么我的 CSS 不起作用呢？这些更改在检查元素中有效，那么为什么在 userContent.css 中无效呢？

我的目标是 1) 将新选项卡和私人浏览选项卡上的 Firefox 徽标和字标更改为另一个图像 (.logo 和 .wordmark) 2) 将私人浏览选项卡通知内容更改为其他内容。我不需要任何更复杂的东西。只需一个永久版本，进入检查元素并更改目标 1 的图像文件路径和目标 2 通知的 HTML 内容。

注意：我已授予 Firefox 加载本地图像的功能。在检查元素中加载本地图像可以正常工作。在 userContent.css 中加载本地图像本身似乎没有问题，因为我在另一个类中执行了此操作。出于某种原因，对 .logo 和 .wordmark 执行此操作不起作用。

答案1

userContent.css在其他任何内容之前加载，因此它将被默认 css 覆盖。在其上display: none !important;添加!important，因此它不会被覆盖。 您需要添加!important要保留的每种样式。

要更改通知内的文本，您可以隐藏可见性p并添加::before伪选择器来添加您自己的内容。

html.private #info-body {
   visibility: hidden;
}

html.private #info-body::before {
    content: "Your text here" !important;
    visibility: visible !important;
}

相关内容