title: SECURITY_ERR: DOM Exception 18 on using getImageData in a Chrome Extension
body: <p>I'm writing my first Chrome extension. I'm trying to use jQuery and the <a href="http://plugins.jquery.com/project/desaturate" rel="noreferrer">jQuery Image Desaturate plugin</a> to desaturate an image on a page on <a href="http://www.flickr.com" rel="noreferrer">http://www.flickr.com</a>.</p>
  
  <p>I'm loading my script (and jQuery and the plugin) programatically in my background.html:</p>
  
  <pre><code>  // 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" });
        })
      });
    });
  </code></pre>
  
  <p>I've specified permissions for Flickr pages in my <code>manifest.json</code>:</p>
  
  <pre><code>"permissions": [
    "tabs", "http://www.flickr.com/", "http://*.static.flickr.com/"
  ]
  </code></pre>
  
  <p>That appears to be working fine, and I can, for example, turn the background of all divs on a Flickr photo page red by adding this to <code>flickrnoir.js</code>, and then opening up a Flickr page and clicking on my extension's button:</p>
  
  <pre><code>$("div").css("background-color", "#ff0000");
  </code></pre>
  
  <p>...so, I successfully have jQuery loaded and it can successfully access and change DOM elements of a <code>http://*.flickr.com/*</code> page.</p>
  
  <p>However, when I try to use the desaturate plugin to desaturate an image (or all images, in fact) I run across a security error. My code:</p>
  
  <pre><code>$("img").desaturate();
  </code></pre>
  
  <p>...eventually ends up in the jQuery.desaturate plugin's code running this line:</p>
  
  <pre><code>var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
  </code></pre>
  
  <p>At that point, Chrome throws a security exception:</p>
  
  <pre><code>Uncaught Error: SECURITY_ERR: DOM Exception 18
  </code></pre>
  
  <p>...and this stops me in my tracks.</p>
  
  <p>EDIT: Okay, so I'm guessing this is because the page is at <code>www.flickr.com</code>, whereas the image I'm copying to the canvas is at <code>farm6.static.flickr.com</code>? Is that violating the cross-domain policy?</p>
  
  <p>I'm really not familiar yet with the Chrome extension security model, or cross-domain restrictions on <code>canvas</code>, or how the two interact, so I could use any help you can give me in understanding this, but of course, my fundamental question is -- how do I get past this security exception and get my code working?</p>