如何將屏幕截圖從擴展程序移動到內容腳本？

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

在我的background.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（） 回調 ie; 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"]
    }
  ]
}

background.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 （內容腳本 ）

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

如果您需要更多信息，請與我們聯系。