Question regarding the use of iframes in Safari and Chrome's startup pages

Question

If you have ever used a new release of either Chrome or Safari, you know that when you add a new tab, the default screen is a grid like setup with your most favorite links sitting there waiting to be clicked on. What makes it even nicer is the graphical interface, with actual pictures of the websites they are representing.

I am looking to do something similar, how is it done? Are they simply iframes? iframes set with css? If anyone has any knowledge about the actual implementation of this seemingly simple festure, please share!! Thanks

Answer 1

They're just cached thumbnail images, that the browser made last time it visited the page. They're not real browser pages you can interact with.

To do it from another web page, you'd have to have your server fetch the page, render it and thumbnail the image. Or use a third-party service that does it for you. Either way, you're not going to get the exact same image a user would see, as they may have auth or settings your server is not privy to.

Answer 2

As far as I can see in Chrome, it's not done with iframes. It seems as though Chrome uses screenshots from an earlier visit. At least I haven't experienced that the background changed after I saw it the first time. So my guess is that the initial page in chrome is "custom" as in not Html. As for Safari I really have no clue.

Answer 3

In Chrome, I can choose View Source (Ctrl+U) or use the Web Inspector (Shift+Ctrl+I) to view the 'New Tab' page. Those thumbnails are indeed screenshots of browser windows (and dynamically added to the DOM using JavaScript, so you won't find them when viewing the source of the page), as the source of such a thumbnail looks like (copied from Web Inspector):

<a class="thumbnail-container" tabindex="1" id="t1" style="left: 235px; top: 0px; " href="http://www.ns.nl/"&gt;
  <div class="edit-mode-border">
    <div class="edit-bar">
      <div class="pin" title="Keep on this page"></div>
      <div class="spacer"></div>
      <div class="remove" title="Don't show on this page"></div>
    </div>
    <span class="thumbnail-wrapper" style="background-image: url(chrome://thumb/http://www.ns.nl/); ">
      <span class="thumbnail"></span>
    </span>
  </div>
  <div class="title">
    <div style="background-image: url(chrome://favicon/http://www.ns.nl/); " dir="ltr" title="Dienstverlening voor iedereen die met de trein reist. › NS voor reizigers › NS reizigers">Dienstverlening voor iedereen die met de trein reist. › NS voor reizigers › NS reizigers</div>
  </div>
</a>

I guess Safari does more or less the same, but I can't check this at the moment.