Fix review comments: https://github.com/mdn/webextensions-examples/issues/28#issuecomment-172645256

* added README
* do name->URL conversion in the popup
* define functions before they are added as listeners

beastify/README.md

@@ -1 +1,27 @@
 # beastify
+
+## What it does ##
+
+The extension includes:
+
+* a browser action with a popup including HTML, CSS, and JS
+* a content script
+* three images, each of a different beast, packaged as web accessible resources
+
+When the user clicks the browser action button, the popup is shown, enabling
+the user to choose one of three beasts.
+
+When they choose a beast, the extension injects the content script into
+the current page, and sends the content script a message containing
+the name of the chosen beast.
+
+When the content script receives this message, it replaces the current page
+content with an image of the chosen beast.
+
+## What it shows ##
+
+* write a browser action with a popup
+* give the popup style and behavior using CSS and JS
+* inject a content script programmatically using `tabs.executeScript()`
+* send a message from the main extension to a content script
+* use web accessible resources to enable web pages to load packaged content

beastify/content_scripts/beastify.js

@@ -1,8 +1,3 @@
-/*
-Assign beastify() as a listener for messages from the extension.
-*/
-chrome.runtime.onMessage.addListener(beastify);
-
 /*
 beastify():
 * removes every node in the document.body,
@@ -11,7 +6,7 @@ beastify():
 */
 function beastify(request, sender, sendResponse) {
   removeEverything();
-  insertBeast(beastNameToURL(request.beast));
+  insertBeast(request.beastURL);
   chrome.runtime.onMessage.removeListener(beastify);
 }
 
@@ -36,6 +31,12 @@ function insertBeast(beastURL) {
   document.body.appendChild(beastImage);
 }
 
+/*
+Assign beastify() as a listener for messages from the extension.
+*/
+chrome.runtime.onMessage.addListener(beastify);
+
+
 /*
 Given the name of a beast, get the URL to the corresponding image.
 */

beastify/popup/choose_beast.js

@@ -1,3 +1,18 @@
+/*
+Given the name of a beast, get the URL to the corresponding image.
+*/
+function beastNameToURL(beastName) {
+  switch (beastName) {
+    case "Frog":
+      return chrome.extension.getURL("beasts/frog.jpg");
+    case "Snake":
+      return chrome.extension.getURL("beasts/snake.jpg");
+    case "Turtle":
+      return chrome.extension.getURL("beasts/turtle.jpg");
+  }
+}
+
+
 /*
 Listen for clicks in the popup.
 
@@ -8,7 +23,7 @@ Otherwise, the text content of the node is the name of the beast we want.
 Inject the "beastify.js" content script in the active tab.
 
 Then get the active tab and send "beastify.js" a message
-containing the chosen beast's name.
+containing the URL to the chosen beast's image.
 */
 document.addEventListener("click", function(e) {
   if (!e.target.classList.contains("beast")) {
@@ -16,13 +31,14 @@ document.addEventListener("click", function(e) {
   }
 
   var chosenBeast = e.target.textContent;
+  var chosenBeastURL = beastNameToURL(chosenBeast);
 
   chrome.tabs.executeScript(null, {
     file: "/content_scripts/beastify.js"
   });
 
   chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
-    chrome.tabs.sendMessage(tabs[0].id, {beast: chosenBeast});
+    chrome.tabs.sendMessage(tabs[0].id, {beastURL: chosenBeastURL});
   });
 
 });