☰

Firefox Quantum 和 NewTab 缩略图

tag-icon • tag-icon firefox css
Firefox Quantum 和 NewTab 缩略图

我正在尝试更改 Firefox 68 的新标签页上的热门网站缩略图，因为它在某些图块上显示网站图标，而在其他图块上显示网站的屏幕截图，这看起来不统一。据我了解，它使用以下逻辑：如果网站图标足够大，则将其用于图块，如果它很小并且应该拉伸，则使用屏幕截图，并将小网站图标放置在图块的东南角。我希望获得更连贯的行为：所有图块都使用图标，或者所有图块都使用屏幕截图（最好）。
我知道图块的东北角有图块的首选项按钮。它提供了为图块设置任意图像的机会。但它不允许使用任何本地图像。我尝试使用file:///协议，使用不同数量的斜线但没有成功，总是收到有关无效 URL 的错误。似乎只有http(s)://协议才被视为有效。但这个选项对我来说看起来很愚蠢：为什么我应该将缩略图存储在网络的某个地方？
Firefox 会对经常访问的页面进行截图，并将它们存储在子文件夹的缓存文件夹中thumbnails。我曾经userContent.css在 Quantum 之前的 Firefox 中更改缩略图。这可以通过使用适当的选择器并background-image使用直接链接到本地​​文件来覆盖来完成。或者，也可以使用内部协议moz-page-thumb://。例如，moz-page-thumb://thumbnail/?url=http%3A%2F%2Faskubuntu.com如果缺少 AskUbuntu 网站的实际屏幕截图，链接会显示应将其放置在何处。
我在 Firefox Quantum 中找到了图块的 CSS 选择器：

a.top-site-button[href*="askubuntu.com"] .top-site-icon.rich-icon

但它也不允许我使用本地链接。moz-page-thumb://协议不像以前那样工作，并显示“无效 URL”错误。background-image缩略图的值现在读起来像blob:null/abcdabcd-1234-5678-9012-...并真正指向一个屏幕截图文件，但这种链接类型是动态的，并且在每个会话中都会发生变化，这就是我无法永久使用它的原因。
那么有没有办法在 Quantum 中自定义这些缩略图的图标？

PS 我不喜欢使用额外的扩展，因为我已经在使用userContent.css。

答案1

我找到了一种使用自定义图像作为缩略图的方法。thumbnails在您的文件夹中创建一个文件夹chrome，位于userContent.css其中。将所需网站的屏幕截图放在那里。您可以从 Firefox 缓存中的文件夹中获取一些现成的图像thumbnails，也可以自己制作。将此代码添加到userContent.css：

@-moz-document url('about:newtab') {
  a.top-site-button[href*="superuser.com"] .top-site-icon.rich-icon {
    background-image: url(thumbnails/superuser.png) !important;
  }
}

href根据需要更改所需站点的缩略图文件的部分和文件名。file:///文件名前不要使用前缀，路径应相对于userContent.css位置。

如果您希望实现相反的目标 - 用图标替换屏幕截图 - 那么您应该准备好图标（使它们变成正方形，否则它们会被裁剪）并将代码添加到userContent.css：

@-moz-document url('about:newtab') {
  a.top-site-button[href*="superuser.com"] .screenshot.active {
    background-image: url(thumbnails/superuser_icon.png) !important;
  }
}

最后再说一句。这在 Firefox 68 中运行良好，但在较新的版本中，您还应该激活toolkit.legacyUserProfileCustomizations.stylesheets选项about:config以使自定义 CSS 工作 - 它现在默认处于禁用状态。

相关内容