javascript - 内容脚本中的Chrome captureVisibleTab

我正在尝试在内容脚本中使用captureVisibleTab chrome扩展API，以便在后台运行时可以捕获每个页面。

据我所知，这必须使用消息传递来完成。有人可以给我简单的例子来说明如何实现吗？

我正在尝试类似的东西：

 {
 "name": "TabCapture",
 "version": "0.0.1",
"manifest_version": 2,
"description": "Capture a tab",
"background" : {
"scripts" : ["background.js"],
"persistent": true
 },
 "browser_action": {
  "default_icon": "icon.png",
"default_title": "Capture tab"
 },
 "content_scripts": [
{
  "matches": ["http://*/*"],
  "js": ["jquery.js", "send.js"]
}
],
  "permissions" : ["tabs", "<all_urls>"]
}

Send.js

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

background.js

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

）;

但这似乎不起作用。我想念什么吗？

最佳答案

好的，您只是犯了一个小错误。您正在发送对象{imgSrc: dataUrl}，其中imgSrc是对象的属性，但是在内容脚本中访问对象时，您正在访问属性response.dataUrl。将其更改为response.imgSrc，重新加载扩展名，然后重新加载页面，一切正常。并且background.js中存在语法错误，将语句更改为：

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

并在内容脚本的匹配URL（具有权限）中添加"https://*/*"，以捕获所有网页。