html - 如何告诉 Firefox 起始页使用特定图像?

标签 html http firefox

使用全新安装的 Firefox,我看到带有这些图标/页面的起始页:

Firefox start page

将鼠标悬停在“自定义 Firefox”框上,图像变为:

Hovering over Customize Firefox

Firefox 的正常行为是为起始页图像创建某种屏幕截图。但是,看起来可能有一种方法可以控制显示的图像以及将鼠标悬停在每个图像上时显示的内容。

在 Firefox 起始页上自定义图像需要哪些 HTML 标记或 HTTP header ?

更新:

仔细研究了一下,我看到了“Get Firefox for Android”选项的以下 HTML:

<div xmlns="http://www.w3.org/1999/xhtml" class="newtab-cell">
  <div class="newtab-site" draggable="true" type="history" pinned="true">
    <span class="newtab-sponsored">SPONSORED</span>
    <a class="newtab-link" title="Get Firefox for Android http://mzl.la/1Dls1DC" href="http://mzl.la/1Dls1DC">
      <span class="newtab-thumbnail placeholder"></span>
      <span class="newtab-thumbnail thumbnail" style="background-image: url(&quot;https://tiles-cloudfront.cdn.mozilla.net/images/a15c0403863847aef5943a6272cd992335f330f9.59611.png&quot;);"></span>
      <span class="newtab-thumbnail enhanced-content" style="background-image: url(&quot;https://tiles-cloudfront.cdn.mozilla.net/images/ef8c1bab9b54c37fddbd8eeb15faf733571fc9f9.64436.png&quot;);"></span>
      <span class="newtab-title">Get Firefox for Android</span>
    </a>
    <input title="Unpin this site" class="newtab-control newtab-control-pin" type="button" />
    <input title="Remove this site" class="newtab-control newtab-control-block" type="button" />
    <span class="newtab-suggested"></span>
  </div>
</div>

“正常”条目看起来更像这样:

<a xmlns="http://www.w3.org/1999/xhtml" class="newtab-link" title="Twilio Console https://www.twilio.com/console" href="https://www.twilio.com/console">
  <span class="newtab-thumbnail placeholder"></span>
  <span class="newtab-thumbnail thumbnail" style="background-image: url(&quot;moz-page-thumb://thumbnail/?url=https%3A%2F%2Fwww.twilio.com%2Fconsole&amp;revision=4346&quot;);"></span>
  <span class="newtab-thumbnail enhanced-content"></span>
  <span class="newtab-title">twilio.com</span>
</a>

newtab-thumbnail thumbnail 跨度似乎是悬停的工作方式,newtab-thumbnail enhanced-content 跨度是显示的非悬停图像.

最佳答案

我只是猜测,因为我不确定这是否属实,但看起来新标签页的磁贴数据是通过 OpenGraph 提取的元数据标签。例如,在 MDN 页面上:

<meta property="og:type" content="website">
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:site_name" content="Mozilla Developer Network">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

关于html - 如何告诉 Firefox 起始页使用特定图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42492491/

相关文章:

javascript - 根据单选按钮的状态变化使子内容出现/消失

javascript - 没有对具有相同 URL 的新图像的新请求

firefox - 使用 overflow-x :hidden 时 Firefox 中的两个垂直滚动条

javascript - 浏览器之间的 filltext() Canvas 文本位置差异

javascript - HTML 页面缓存问题

javascript - getComputedStyle 文本修饰继承

html - Twitter 嵌入式使内容下降

jquery - 在悬停时在传单 map 上添加图像

javascript - 内联 Javascript 单击功能,用于在 chrome 扩展中动态添加具有动态 id 的元素

javascript - HTTP Request JS - 如何从列表中提取数字,将它们保存到变量中并使用它们进行进一步处理?