javascriptjsongoogle-chrome-extensioncontent-scriptmessage-passing

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


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

    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);
    });