Google Chrome Extension Top Sites Images

Question

So using the Google Chrome Top Sites api has values for the url and the title, but when you load the default google chrome page it also has an image of those sites, is there any way to get that sort of image for an extension? If not how does google get that image and how can you get an image of the the user's top viewed website?

Answer 1

It's unfortunately not possible*. Chrome stores those thumbnails internally in URIs not accessible from an extension.

There is an existing feature request: https://code.google.com/p/chromium/issues/detail?id=11854

If you look at the comments, one of the main use cases is to access site thumbnails to replicate the New Tab page.

Do star the feature request above to raise its priority if you want this functionality implemented.

---

* By that I mean that it's not possilbe to access Chrome's own internal store of thumbnails.

Furthermore, as Marco suggested the way to replicate that would be tab capture, but you can't do it "in the background" for privacy reasons - a user must make an explicit gesture (e.g. click the extension's button, press a shortcut, etc.) to perform capture.

Marco's answer is valid now, captureVisibleTab should be accessible upon events. But yes, as of now Chrome forces you to have very broad permissions and maintaining your own thumbnail store.

Answer 2

Since that it isn't possible to get a screenshot of a page without loading it inside a tab, Chrome is simply getting those screenshots while you're browsing your favourite sites. You can tell this easily because sometimes sites and images do not coincide (e.g. sometimes my facebook.com top site has the image of my profile page, but links to the home).

Then, if you want your screenshots of the Top Sites, you'll have to start without screenshots, and create them while the user browses the web by using the chrome.tabs API to check when a tab loads one of the Top Sites (listening to the event onUpdated), and get a screenshot of that tab using captureVisibleTab.

NOTES: make sure that you've requested the permission for "<all_urls>" in your manifest, which is required for captureVisibleTab to work. Additionally, you may find this question and its answer helpful.