Final

beastify/README.md

@@ -18,6 +18,8 @@ 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.
 
+When the user clicks the reset button, the page reloads, and reverts to its original form.
+
 ## What it shows ##
 
 * write a browser action with a popup
@@ -25,3 +27,4 @@ content with an image of the chosen beast.
 * 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
+* reload web pages

beastify/popup/choose_beast.css

@@ -10,7 +10,7 @@ html, body {
   cursor: pointer;
 }
 
-.button:hover {
+.beast:hover {
   background-color: #CFF2F2;
 }
 
@@ -25,8 +25,3 @@ html, body {
 .clear:hover {
   background-color: #EAEA9D;
 }
-
-.inactive {
-  opacity: 0;
-  pointer-events: none;
-}

beastify/popup/choose_beast.js

@@ -12,18 +12,18 @@ function beastNameToURL(beastName) {
   }
 }
 
-
 /*
 Listen for clicks in the popup.
 
-If the click is not on one of the beasts, return early.
+If the click is on one of the beasts:
+  Inject the "beastify.js" content script in the active tab.
 
-Otherwise, the text content of the node is the name of the beast we want.
+  Then get the active tab and send "beastify.js" a message
+  containing the URL to the chosen beast's image.
 
-Inject the "beastify.js" content script in the active tab.
+If it's on a button wich contains class "clear":
-
+  Reload the page.
-Then get the active tab and send "beastify.js" a message
+  Close the popup. This is needed, as the content script malfunctions after page reloads.
-containing the URL to the chosen beast's image.
 */
 document.addEventListener("click", function(e) {
   if (e.target.classList.contains("beast")) {