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>"]
}

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;
}

）;

但它似乎不起作用。我错过了什么吗？

Answer 1

好的，你刚犯了一个小错误。您正在发送对象{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;
});

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

内容脚本中的Chrome captureVisibleTab

1 个答案: