Kyle Berger Kyle Berger -4 years ago 286
HTTP Question

How to tell the Firefox start page to use specific images?

Using a completely fresh install of Firefox, I see a start page with these icons/pages:

Firefox start page

Hovering over the "Customize Firefox" box, the image changes to this:

Hovering over Customize Firefox

The normal behavior of Firefox is to create some sort of screenshot for the start page images. However, it looks like there might be a way to control the image that appears as well as what appears when hovering over each image.

What HTML tag(s) or HTTP header(s) is/are required to get customization of images on the Firefox start page?

Update:

Digging around a bit, I see the following HTML for the "Get Firefox for Android" option:

<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 "normal" entry looks more like this:

<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>


The
newtab-thumbnail thumbnail
span appears to be how the on hover is working and the
newtab-thumbnail enhanced-content
span is the non-hover image that is displayed.

Answer Source

The short answer to this question is: No. There is currently no way to affect the images that get displayed by Firefox on the New Tab page.

After doing quite a bit more digging, I finally figured out what is going on. Mozilla calls the page the "New Tab page" not the "Start page". Mozilla calls the tiles "Directory Links" and there are a bunch of rules regarding what can be included in the Directory Links Provider:

http://gecko.readthedocs.io/en/latest/browser/browser/DirectoryLinksProvider.html

There are two configuration options of note browser.newtabpage.directory.source and browser.newtabpage.directory.ping. A Directory Links Provider must point at https://tiles.services.mozilla.com/ as the base URI. This policy is enforced by the browser itself. An example provider is:

https://tiles.services.mozilla.com/v3/links/fetch/en-US/release

Which shows what the user sees in a fresh install. There is no way to provide metadata or such via a HTML page or Javascript to provide hints for a New Tab page. The New Tab page lives in isolation and has strict rules built in to prevent user tracking (e.g. no cookies are sent). I'd wager a good part of the reasoning is user privacy and browser security. Imagine the ability to track user habits via a New Tab page or repeatedly infect a machine via a bug in a JPEG library every time a new tab is opened. It's a bit disappointing because the thumbnails that Firefox generates for most websites look pretty terrible.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download