javascript - Chrome拡張機能によって生成されたスクリーンショットを含むキャンバスからピクセルデータを取得するには?

Question

非常に単純なカラー ピッカー クローム拡張機能を実装しようとしています。考え方は単純です。

1. クロムが提供する captureVisibleTab API を利用して、現在のページのスクリーンショットを定期的に取得します。
2. このスクリーンショットをキャンバスにロードし、キャンバス コンテキストに getImageData メソッドを使用して、マウス座標に基づいてピクセルの色の値を表示します。

このアイデアはかなり簡単に実装できると思っていましたが、実際にはそれほどうまくいきませんでした。次のスニペットに関するヘルプは役に立ちます。

background.js (完全に機能しています!)

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.action == 'capture') {
        chrome.tabs.captureVisibleTab(null, null, function(dataUrl) {
            sendResponse({ imageUrl: dataUrl });
        });
    }
    return true;
});

content_script.js

function fill_canvas(){
    chrome.extension.sendMessage({action: 'capture'}, function(response) {
        canvas = document.createElement('canvas');
        canvas.width= $(window).width();
        canvas.width= $(window).height();
        canvasContext = canvas.getContext('2d');
        var img = new Image();
        img.onLoad = function(){
            canvasContext.drawImage(img, 0, 0);
        }  
        img.src = response.imageUrl;
    });
}
$(document).ready(function(){
    fill_canvas();
    $(document).mousemove(function(e) {
        pixelData   = canvasContext.getImageData(e.offsetX,e.offsetY, 1, 1).data;
        console.log(pixelData);
    });
});

周囲のコードが正しく機能し (単純なアクティブ化拡張機能ボタンなど)、マニフェストで付与されたすべての関連するアクセス許可を期待してください。

pixelData に対して生成された出力は次のようになります。

[0, 0, 0, 0, byteLength: 4, byteOffset: 0, buffer: ArrayBuffer, subarray: function, set: function…]

開くと、必要なものを除いて、多くの情報が含まれています。

乾杯！