安全错误: DOM Exception 18 on using getImageData in a Chrome Extension

Question

我正在编写我的第一个 Chrome 扩展程序。我正在尝试使用 jQuery 和 jQuery Image Desaturate plugin对 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" });
      })
    });
  });

我已在 manifest.json 中指定了 Flickr 页面的权限:

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

这似乎工作正常，例如，我可以通过将其添加到 flickrnoir.js，然后打开 Flickr，将 Flickr 照片页面上的所有 div 的背景变成红色页面并单击我的扩展程序按钮:

$("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，而我复制到 Canvas 的图像位于 farm6.static .flickr.com？这是否违反了跨域政策？

我真的不熟悉 Chrome 扩展程序安全模型，或者 canvas 上的跨域限制，或者两者如何交互，所以我可以使用您可以为我提供的任何帮助来理解当然，我的根本问题是——如何克服这个安全异常并使我的代码正常工作？

Answer 1

是的，这是一个安全限制。正如 specs 中所述:

Whenever the toDataURL() method of a canvas element whose origin-clean flag is set to false is called, the method must raise a SECURITY_ERR exception.

Whenever the getImageData() method of the 2D context of a canvas element whose origin-clean flag is set to false is called with otherwise correct arguments, the method must raise a SECURITY_ERR exception.

Whenever the measureText() method of the 2D context of a canvas element ends up using a font that has an origin that is not the same as that of the Document object that owns the canvas element, the method must raise a SECURITY_ERR exception.

当我开发类似的扩展时，我所做的是将图像 url 从内容脚本传递到后台页面，并在那里进行所有 Canvas 操作，然后将 Canvas 转换为数据 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;
}