如何将屏幕截图从扩展移动到内容脚本

Question

所以这个想法是这样的...我想做的只是在加载特定内容脚本后立即调用扩展背景页面。（在这种情况下，当加载页面时）我的内容脚本中有这样的东西。

var port = chrome.extension.connect({name: "screenshot"});
port.postMessage({request: "screenshot"});
port.onMessage.addListener(function(msg) {
    var img = document.createElement('img');
    img.src = msg.response;
    document.body.appendChild(img);
});

在我的背景中.js页面中类似的东西

function takeScreenshot(){
    chrome.tabs.captureVisibleTab(null, function(img) {
        return img;
    });
}
chrome.extension.onConnect.addListener(function(port) {
    console.assert(port.name == "screenshot");
    port.onMessage.addListener(function(msg) {
    if (msg.request == "screenshot"){
        port.postMessage({response: takeScreenshot() });
    }
    });
});

但是我没有运气...我让图像显示在正文上，但在从 takeScreenshot 返回 img 时它实际上并没有传递图像

Answer 1

问题是您正在尝试在后台页面中实现同步和异步事件之间的同步

a） chrome.tabs.captureVisibleTab（） 是异步的

b） port.postMessage（） 是同步

的

当调用port.postMessage({response: takeScreenshot() });时，它不会等待takeScreenshot（）回调，即; return img;，以便将空的 JSON 对象发送到内容脚本

回电后发布消息避免

chrome.extension.onConnect.addListener(function(port) {
    console.assert(port.name == "screenshot");
    port.onMessage.addListener(function(msg) {
    if (msg.request == "screenshot"){
        chrome.tabs.captureVisibleTab(null,{format:"jpeg",quality:100},function(img) {
        //post message only after call back return with Data URL
        port.postMessage(img);
        });
    }
    });
});

工作版本演示

manifest.json

{
"name":"Screen Shot Demo",
"description":"This demonstrates Screen Shot API",
"manifest_version":2,
"version":"1",
"permissions":["tabs","<all_urls>"],
"background":{
    "scripts":["background.js"]
},
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["myscript.js"]
    }
  ]
}

背景.js

chrome.extension.onConnect.addListener(function(port) {
    console.assert(port.name == "screenshot");
    port.onMessage.addListener(function(msg) {
    if (msg.request == "screenshot"){
        chrome.tabs.captureVisibleTab(null,{format:"jpeg",quality:100},function(img) {
        //post message only after call back return with Data URL
        port.postMessage(img);
        });
    }
    });
});

Myscript.js （contentscript）

var port = chrome.extension.connect({
    name: "screenshot"
});
port.postMessage({
    request: "screenshot"
});
port.onMessage.addListener(function (msg) {
    var img = document.createElement('img');
    img.src = msg;
    document.body.appendChild(img);
});

如果您需要更多信息，请告诉我。