javascript - 内容脚本中的 Chrome captureVisibleTab

Question

我正在尝试在内容脚本中使用 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>"]
}

发送.js

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

背景.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;
}

);

但是好像不行。我错过了什么吗？

Answer 1

好吧，你只是犯了一个小错误。您正在发送对象 {imgSrc: dataUrl}，其中 imgSrc 是该对象的属性，但是当您在内容脚本中访问该对象时，您正在访问属性响应。数据网址。将其更改为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://*/*”也可以捕获所有网页。