Chrome Extension API:背景页面上的chrome.tabs.captureVisibleTab到内容脚本

时间:2013-09-13 20:06:46

标签: javascript json google-chrome-extension content-script message-passing

我的总体目标是通过背景页面截取屏幕截图:

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

并将其传递给内容脚本,以便我可以使用该页面的HTML DOM来分析屏幕截图并按照我想要的方式进行剪切。

但是,我似乎无法通过Message Passing将dataUrl传递回内容脚本:

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

我尝试过JSON.stringify(),但无济于事。

这完全没问题:

background.js

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

我将代码切换为此代码并且没有任何内容通过:

background.js

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

我唯一证明背景页面实际上是截屏的是我可以做的

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

我看到了

“数据:图像/ JPEG; BASE64,/ 9J / 4AAQSkZJRgABAQAAA ....等...”

登录后的background.html,这是有效的

我的问题是:如何将此网址发送到内容脚本?

我不希望在后台页面上执行所有逻辑,这些逻辑无法控制实际可见页面上的任何内容。

1 个答案:

答案 0 :(得分:5)

使用chrome.tabs.sendMessage

背景页面:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        chrome.tabs.captureVisibleTab(
            null,
            {},
            function(dataUrl)
            {
                sendResponse({imgSrc:dataUrl});
            }
        ); //remember that captureVisibleTab() is a statement
        return true;
    }
);

内容脚本

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