10

初めての Chrome 拡張機能を作成しています。jQuery とjQuery Image Desaturate プラグインを使用して、 http://www.flickr.comのページの画像の彩度を下げようとしています。

スクリプト (および jQuery とプラグイン) をプログラムで background.html にロードしています。

  // On browser action click, we load jQuery and the desaturate plugin, then 
  // call our own flickrnoir.js to desaturate the photo.
  chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
      chrome.tabs.executeScript(null, {file: "jQuery.desaturate.js" }, function() {
        chrome.tabs.executeScript(null, { file: "flickrnoir.js" });
      })
    });
  });

で Flickr ページのアクセス許可を指定しましたmanifest.json。

"permissions": [
  "tabs", "http://www.flickr.com/", "http://*.static.flickr.com/"
]

これは問題なく動作しているように見えます。たとえば、これを に追加flickrnoir.jsし、Flickr ページを開いて拡張機能のボタンをクリックすることで、Flickr の写真ページのすべての div の背景を赤に変えることができます。

$("div").css("background-color", "#ff0000");

http://*.flickr.com/*...ということで、jQuery が正常に読み込まれ、ページの DOM 要素に正常にアクセスして変更できるようになりました。

しかし、desaturate プラグインを使用して画像 (または実際にはすべての画像) の彩度を下げようとすると、セキュリティ エラーが発生します。私のコード:

$("img").desaturate();

...最終的には、次の行を実行する jQuery.desaturate プラグインのコードで終了します。

var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

その時点で、Chrome はセキュリティ例外をスローします。

Uncaught Error: SECURITY_ERR: DOM Exception 18

...そして、これは私の足を止めます。

編集：さて、これはページがにあるためだとwww.flickr.com思いますが、キャンバスにコピーしている画像はfarm6.static.flickr.com？それはクロスドメイン ポリシーに違反していますか?

Chrome 拡張機能のセキュリティ モデル、クロスドメインの制限、または 2 つの相互作用についてはまだよく知らないcanvasので、これを理解するためにあなたが私に与えてくれる助けを借りることができますが、もちろん、私の基本的な質問は - - このセキュリティ例外を回避してコードを機能させるにはどうすればよいですか?

4

2 に答える 2

13

はい、これはセキュリティ上の制限です。それがスペックで言うように：

origin-cleanフラグがfalseに設定されているcanvas要素のtoDataURL（）メソッドが呼び出されるたびに、メソッドはSECURITY_ERR例外を発生させる必要があります。

origin-cleanフラグがfalseに設定されているcanvas要素の2DコンテキストのgetImageData（）メソッドが、それ以外の場合は正しい引数で呼び出されるたびに、メソッドはSECURITY_ERR例外を発生させる必要があります。

キャンバス要素の2DコンテキストのmeasureText（）メソッドが、キャンバス要素を所有するDocumentオブジェクトの原点とは異なる原点を持つフォントを使用することになった場合は常に、メソッドはSECURITY_ERR例外を発生させる必要があります。

同様の拡張機能で作業していたとき、コンテンツスクリプトからバックグラウンドページに画像のURLを渡し、そこですべてのキャンバス操作を行ってから、キャンバスをデータURLに変換して、コンテンツスクリプトに送り返しました。

//background.html:
function adjustImage(src, tab) {
    var img = new Image();
    img.onload = function() {
            var canvas = Pixastic.process(img);
            
            chrome.tabs.sendRequest(tab.id, {cmd: "replace", data: canvas.toDataURL()});
    };
    img.src = src;
}
于 2011-04-01T15:33:10.707 に答える
1

私も、クロスドメインで取得した画像からの画像データを使用したい拡張機能に取り組んでいましたが、それが可能であることがわかりました! (ファンキーなバックグラウンド ページ メッセージの受け渡しなし)

@Serg、結局のところ、Webページではクロスドメインのことはできませんが、さらに掘り下げた後、Chrome拡張機能ではできることがわかりました!

その要点は、マニフェストで Cross-Origin XMLHttpRequests のアクセス許可を要求することだけです。

{
  "name": "My extension",
  ...
  "permissions": [
    "http://www.google.com/"
  ],
  ...
}

詳細 (特に安全性を維持する方法) については、こちらをお読みください。

于 2011-08-22T13:16:19.867 に答える