javascript - 背景页面上的 Chrome 扩展 API : chrome. tabs.captureVisibleTab 到内容脚本

我的总体目标是使用以下方法通过背景页面截取屏幕截图:

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

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

但是，我似乎无法通过消息传递将 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，这是有效的

我的问题是:如何将此 URL 发送到内容脚本？

我不想在后台页面上做所有的逻辑，这些逻辑无法控制实际可见页面上的任何内容。

最佳答案

使用 chrome.tabs.sendMessage 并确保 return true ，而不是事件监听器
背景页面:

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

        return true;
    }
);

内容脚本

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

关于javascript - 背景页面上的 Chrome 扩展 API : chrome. tabs.captureVisibleTab 到内容脚本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18794407/