Chrome extension-Open the captured screen shot in new tab

Question

chrome.tabs.query({
    active: true, 
    currentWindow: true 
    },
    function (tabs) {
    chrome.tabs.captureVisibleTab(null 
        ,{ format: "png"},
        function (src) {
            $('body').append("<img src='" + src + "'>" + tabs[0].url + "</img>");//appends captured image to the popup.html
        }
    ); 
}); 

This code appends the captured image into the body of popup.html. But what I want is insted of appending the image to the popup body i would like to open new tab using chrome.tabs.create({url:"newtab.html") and append the captured image to this newtab.html.(the 'newtab.html' is already in the path folder).

Thanks in advance

Answer 1

There is a way I described previosuly here.

The gist is to open a tab that contains a script, and the communicate with it using messaging.

A little problem that arises is that you don't know when the newly-opened page is ready. I solved that by making the newly-opened page contact the background page on its own, but was sloppy with just having one global variable.

A better solution would be a one-shot event listener, something like that:

// Execute this code from the background page, not the popup!
function openScreenshot(src){
  chrome.tabs.create(
    { url: chrome.runtime.getURL("newtab.html") },
    function(tab) {
      chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
        // If the request is expected and comes from the tab we just opened
        if(message.getScreenshot && sender.tab.id == tab.id) {
          sendResponse(src);
          // Ensure we're only run once
          chrome.runtime.onMessage.removeListener(arguments.callee);
        }
      });
    }
  );
}

Other than that, follow the linked answer.