SECURITY_ERR:关于在Chrome扩展程序中使用getImageData的DOM异常18

Question

我正在写第一个Chrome扩展程序.我正在尝试使用jQuery和jQuery Image Desaturate插件在http://www.flickr.com上对页面上的图像进行去饱和处理.

我在我的background.html中以编程方式加载我的脚本(以及jQuery和插件):

  // 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/"
]

这看起来工作得很好,例如,我可以将Flickr照片页面上所有div的背景添加为红色flickrnoir.js,然后打开Flickr页面并点击我的扩展程序按钮:

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

...所以,我成功加载了jQuery,它可以成功访问和更改http://*.flickr.com/*页面的DOM元素.

但是,当我尝试使用去饱和插件去饱和图像(或者所有图像,实际上)时,我遇到了安全错误.我的代码:

$("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扩展安全模型,或跨域限制canvas,或两者如何互动,所以我可以使用任何帮助你可以让我理解这一点,但当然,我的基本问题是 - - 如何通过此安全性异常并使我的代码正常工作？

Answer 1

是的,这是一个安全限制.正如规范中所述:

每当调用origin-clean标志设置为false的canvas元素的toDataURL()方法时,该方法必须引发SECURITY_ERR异常.

每当使用其他正确的参数调用其origin-clean标志设置为false的canvas元素的2D上下文的getImageData()方法时,该方法必须引发SECURITY_ERR异常.

每当canvas元素的2D上下文的measureText()方法最终使用的原点与拥有canvas元素的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;
}