Chrome Extension API: chrome.tabs.captureVisibleTab on Background Page to Content Script

Question

My overall goal was to take a screenshot via the background page using:

http://developer.chrome.com/extensions/tabs.html#method-captureVisibleTab

and pass it to the content script so I can use the page's HTML DOM to analyze the screenshot and cut it up the way I would like.

However, I can't seem to pass the dataUrl back to the content script with Message Passing:

http://developer.chrome.com/extensions/messaging.html

I tried JSON.stringify() but to no avail.

This works perfectly fine:

background.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        sendResponse({imgSrc:'hello'});
    }
);

I switch the code to this and nothing gets through:

background.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        chrome.tabs.captureVisibleTab(
            null,
            {},
            function(dataUrl)
            {
                sendResponse({imgSrc:dataUrl});
            }
        )
    }
);

My only proof that the background page is actually taking a screenshot is that I can do

chrome.tabs.captureVisibleTab(null,{},function(dataUrl){console.log(dataUrl);});

and I see

"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAA....etc..."

logged in background.html, which is valid

My question is: How can I send this URL to the content script?

I would prefer not to do all the logic on the background page which can't control anything on the actual visible page.

Solution

Use chrome.tabs.sendMessage and make sure to return true, not the event listener

background page:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        chrome.tabs.captureVisibleTab(
            null,
            {},
            function(dataUrl)
            {
                sendResponse({imgSrc:dataUrl});
            }
        );

        return true;
    }
);

content script

chrome.runtime.sendMessage({msg: "capture"}, function(response) {
  console.log(response.dataUrl);
});

Comments

[Andrey]

ok, I've updated the code. Now background page sends data url back to message from content script. Does it look right now?

[neaumusic]

CODE IS NOW WORKING! You almost had it right but you're missing the semicolon after chrome.tabs.captureVisibleTab(); and yes apparently I need to return true for some reason?! Do you know why?

[Andrey]

From documentation: SendResponse function becomes invalid when the event listener returns, unless you return true from the event listener to indicate you wish to send a response asynchronously