我的总体目标是使用以下方式通过后台页面截取屏幕截图:
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);
});