4

アイデアは次のようになります... 特定のコンテンツ スクリプトが読み込まれるとすぐに、拡張機能の背景ページを呼び出すだけです。(この場合、ページが読み込まれるとき) コンテンツ スクリプトにこのようなものがあります。

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を返すときに実際には画像を渡しません

4

1 に答える 1

3

問題は、バックグラウンド ページで同期イベントと非同期イベントの間の同期を達成しようとしていることです。

a) chrome.tabs.captureVisibleTab()は非同期です

b) port.postMessage()は同期的です

が呼び出されると、 takeScreenshot()コールバックport.postMessage({response: takeScreenshot() });を待機しません。そのため、空の JSON オブジェクトがコンテンツ スクリプトに送信されます return img;

コールバックが戻った後にメッセージを投稿して回避する

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

ワーキングバージョンのデモンストレーション

マニフェスト.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);
});

さらに情報が必要な場合はお知らせください。

于 2012-12-04T03:18:05.837 に答える