From d552033b78cc2d32774e0a42ae536119956ce50c Mon Sep 17 00:00:00 2001
From: Will Bamberg <wbamberg@mozilla.com>
Date: Tue, 19 Jan 2016 15:15:59 -0800
Subject: [PATCH] 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                   | 26 ++++++++++++++++++++++++++
 beastify/content_scripts/beastify.js | 13 +++++++------
 beastify/popup/choose_beast.js       | 20 ++++++++++++++++++--
 3 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/beastify/README.md b/beastify/README.md
index a37979d..26443f1 100644
--- a/beastify/README.md
+++ b/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
diff --git a/beastify/content_scripts/beastify.js b/beastify/content_scripts/beastify.js
index 5204ddf..43816bb 100644
--- a/beastify/content_scripts/beastify.js
+++ b/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.
 */
diff --git a/beastify/popup/choose_beast.js b/beastify/popup/choose_beast.js
index cd6e0cb..e282e4f 100644
--- a/beastify/popup/choose_beast.js
+++ b/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});
   });
 
 });