Adding `content_security_policy` to imageinfo extension.

chrome/common/extensions/docs/examples/extensions/imageinfo/info.js

+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+
+/**
+ * Quick template rendering function.  For each cell passed to it, check
+ * to see if the cell's text content is a key in the supplied data array.
+ * If yes, replace the cell's contents with the corresponding value and
+ * unhide the cell.  If no, then remove the cell's parent (tr) from the
+ * DOM.
+ */
+function renderCells(cells, data) {
+  for (var i = 0; i < cells.length; i++) {
+    var cell = cells[i];
+    var key = cell.innerText;
+    if (data[key]) {
+      cell.innerText = data[key];
+      cell.parentElement.className = "rendered";
+    } else {
+      cell.parentElement.parentElement.removeChild(cell.parentElement);
+    }
+  }
+};
+
+/**
+ * Returns true if the supplies object has no properties.
+ */
+function isEmpty(obj) {
+  for (var key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      return false;
+    }
+  }
+  return true;
+};
+
+/**
+ * Resizes the window to the current dimensions of this page's body.
+ */
+function resizeWindow() {
+  window.setTimeout(function() {
+    chrome.tabs.getCurrent(function (tab) {
+      var newHeight = Math.min(document.body.offsetHeight + 140, 700);
+      chrome.windows.update(tab.windowId, {
+        height: newHeight,
+        width: 520
+      });
+    });
+  }, 150);
+};
+
+/**
+ * Called directly by the background page with information about the
+ * image.  Outputs image data to the DOM.
+ */
+function renderImageInfo(imageinfo) {
+  console.log('imageinfo', imageinfo);
+
+  var divloader = document.querySelector('#loader');
+  var divoutput = document.querySelector('#output');
+  divloader.style.display = "none";
+  divoutput.style.display = "block";
+
+  var divinfo = document.querySelector('#info');
+  var divexif = document.querySelector('#exif');
+
+  // Render general image data.
+  var datacells = divinfo.querySelectorAll('td');
+  renderCells(datacells, imageinfo);
+
+  // If EXIF data exists, unhide the EXIF table and render.
+  if (imageinfo['exif'] && !isEmpty(imageinfo['exif'])) {
+    divexif.style.display = 'block';
+    var exifcells = divexif.querySelectorAll('td');
+    renderCells(exifcells, imageinfo['exif']);
+  }
+};
+
+/**
+ * Renders the URL for the image, trimming if the length is too long.
+ */
+function renderUrl(url) {
+  var divurl = document.querySelector('#url');
+  var urltext = (url.length < 45) ? url : url.substr(0, 42) + '...';
+  var anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.innerText = urltext;
+  divurl.appendChild(anchor);
+};
+
+/**
+ * Renders a thumbnail view of the image.
+ */
+function renderThumbnail(url) {
+  var canvas = document.querySelector('#thumbnail');
+  var context = canvas.getContext('2d');
+
+  canvas.width = 100;
+  canvas.height = 100;
+
+  var image = new Image();
+  image.addEventListener('load', function() {
+    var src_w = image.width;
+    var src_h = image.height;
+    var new_w = canvas.width;
+    var new_h = canvas.height;
+    var ratio = src_w / src_h;
+    if (src_w > src_h) {
+      new_h /= ratio;
+    } else {
+      new_w *= ratio;
+    }
+    canvas.width = new_w;
+    canvas.height = new_h;
+    context.drawImage(image, 0, 0, src_w, src_h, 0, 0, new_w, new_h);
+  });
+  image.src = url;
+};
+
+/**
+ * Returns a function which will handle displaying information about the
+ * image once the ImageInfo class has finished loading.
+ */
+function getImageInfoHandler(url) {
+  return function() {
+    renderUrl(url);
+    renderThumbnail(url);
+    var imageinfo = ImageInfo.getAllFields(url);
+    renderImageInfo(imageinfo);
+    resizeWindow();
+  };
+};
+
+/**
+ * Load the image in question and display it, along with its metadata.
+ */
+document.addEventListener("DOMContentLoaded", function () {
+  // The URL of the image to load is passed on the URL fragment.
+  var imageUrl = window.location.hash.substring(1);
+  if (imageUrl) {
+    // Use the ImageInfo library to load the image and parse it.
+    ImageInfo.loadInfo(imageUrl, getImageInfoHandler(imageUrl));
+  }
+});