How Can I Save A Tab Thumbnail To Local Storage?

I'm trying to keep track of tab thumbnails for my google chrome extension, and would love for the ability to save them to my local storage. Currently, I have something along the l

Solution 1:

The callback of chrome.tabs.captureVisibleTab receives a data-URI (data:image/png;base64,... or data:image/jpg;base64,...). This is a plain string, which can be saved in localStorage as follows:

chrome.tabs.captureVisibleTab(tab.windowId, function(thumb) {
    // Example: Save by key URLlocalStorage.setItem(tab.url, thumb);
}); // <-- Don't forget the closing parenthesis..

In this example, the screenshot was saved in the same key as the tab's URI using localStorage.setItem. You can enumerate through the keys as follows:

for (var i=0; i<localStorage.length; i++) {
    var keyname = localStorage[i];            // Or localStorage.key(0);var thumb = localStorage.getItem(keyname);// <-- Retrieve the value
}

If you don't like the thumb, it can be removed using the localStorage.removeItem method:

var keyname = 'https://stackoverflow.com/';  // For examplelocalStorage.removeItem(keyname);

Note: localStorage is limited to 5MB. Consider using the asynchronous chrome.storage API for persisting data.