1

問題があります。chrome.experimental.offscreenTabs.createうまくいきましたが、このtoDataUrl方法では高さが1ピクセルの画像が生成されました。最善を尽くしましたが、作成した画像toDataUrlに指定したサイズが表示されません。この問題はどのように解決できますか？

これが私のコードです：

chrome.experimental.offscreenTabs.create({ url: "http:/www.baidu.com" }, function(offscreenTab) {
    // console.log(offscreenTab);
    chrome.experimental.offscreenTabs.toDataUrl(offscreenTab.id, { format: "png" }, function(imgUrl) {
        $("#container").html("<img src='" + imgUrl + "' />");
    });
});
4

1 に答える 1

5

offscreenTabsAPIは実験的なものです。以下のソリューションは、Chromium 20.0.1132.57（Linux）で正常にテストされていますが、それ以降のバージョンでコードが機能することを意味するわけではありません。この回答は、実験的なoffscreenTabAPIの使用方法
のフォローアップ

のコールバック関数はchrome.experimental.offscreenTabs.create、タブの作成時に呼び出されます。chrome.webRequestAPIとUNIXnetcatコマンドを使用したテストでは、サーバーが応答する前にコールバックを起動できることが示されました。したがって、ページがレンダリングされた後にコールバックがトリガーされる可能性はほとんどありません。

私のデモ拡張機能は5つのファイルで構成されています。それらの役割について簡単に説明します。

  • manifest.json-エクステンションに必要な接着剤（ドキュメントを参照）。
  • sayhello.js-バックグラウンドページに通知するコンテンツスクリプト。chrome.tabsとchrome.webRequestは役に立たないため、このヘルパーが必要です。のイベントリスナーはchrome.tabsオフスクリーンタブに対してトリガーされることはなく、のイベントリスナーはchrome.webRequestページがレンダリングされる前にトリガーされます。
  • background.js-コンテンツスクリプトからメッセージを受信するためのバックグラウンドページ。chrome.extension.getViews()オフスクリーンタブを起動するビューを見つけるために使用されます。
  • options.html-オフスクリーンタブを起動する表示ビュー。（背景ページはオフスクリーンタブを起動できません）。
  • options.js-マニフェストバージョン2がアクティブな場合、インラインスクリプトは実行されません。スクリプトは外部ファイルに配置し、を使用してロードする必要があります<script src>。

http://rob.lekensteyn.nl/offscreentabs.zip 同じファイル、crx拡張子：CRXに拡張子をアップロードしました。テストする場合は、で実験許可を有効にすることを忘れないでくださいchrome://flags。

manifest.json

{
    "name": "OffscreenTabs API test",
    "version": "1.0",
    "description": "offscreenTabs demo - See https://stackoverflow.com/q/11606135",
    "manifest_version": 2,
    "permissions": ["experimental", "<all_urls>"],
    "options_page": "options.html",
    "background": {"scripts": ["background.js"] },
    "content_scripts": [{
        "js": ["sayhello.js"],
        "matches": ["<all_urls>"]
    }]
}

sayhello.js

chrome.extension.sendMessage("Hello"); // Yup, that's it

background.js

chrome.extension.onMessage.addListener(function(message, sender) {
    if (message === "Hello" && sender && sender.tab) {
        // Message received from content script, pass information to a view
        //  within our extension, which processes offscreenTabs
        chrome.extension.getViews({type:"tab"}).forEach(function(_window) {
            if (_window.checkTab) _window.checkTab(sender.tab.id);
        });
    }
});

options.html

<!DOCTYPE html>
<head>
<meta charset="utf8">
<title>offscreenTabs test</title>
<script src="options.js"></script>
</head>
<body>
Enter an URL and press <kbd>Enter</kbd>.<br>
<input type="url" size="100" id="url" value="https://stackoverflow.com/users/938089/rob-w">
<img id="lastImg">
</body>
</html>

options.js

"use strict";

var collection = [];
// This function is called by the background (via the content script)
// If the tabId is recognised, take a screenshot
function checkTab(tabId) {
    var index = collection.indexOf(tabId);
    if (index !== -1) {
        collection.splice(index, 1); // Remove tabId
        toDataUrl(tabId);            // Take screenshot
    }
}

function create(url, width, height) {
    var createProperties = {url: url};
    if (width) createProperties.width = width;
    if (height) createProperties.height = height;

    // Create offscreen tab
    chrome.experimental.offscreenTabs.create(createProperties, function(offscreenTab) {
        console.log("Created " + offscreenTab.id, offscreenTab);
        collection.push(offscreenTab.id);
    });
}
function toDataUrl(offscreenTabId, options) {
    chrome.experimental.offscreenTabs.toDataUrl(offscreenTabId, options, function(dataUrl) {
        document.getElementById('lastImg').src = dataUrl;
    });
}

document.addEventListener('DOMContentLoaded', function() {
    // "Press Enter to load the offscreen tab and take a screenshot"
    document.getElementById('url').onkeyup = function(ev) {
        if (ev.keyCode == 13) 
            create(this.value);
    };
});
于 2012-07-24T13:48:28.140 に答える