diff --git a/beastify/README.md b/beastify/README.md
index 26443f1..54c9864 100644
--- a/beastify/README.md
+++ b/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
diff --git a/beastify/popup/choose_beast.css b/beastify/popup/choose_beast.css
index e439cb0..36c1068 100644
--- a/beastify/popup/choose_beast.css
+++ b/beastify/popup/choose_beast.css
@@ -2,15 +2,26 @@ html, body {
width: 100px;
}
-.beast {
+.button {
margin: 3% auto;
padding: 4px;
text-align: center;
font-size: 1.5em;
- background-color: #E5F2F2;
cursor: pointer;
}
.beast:hover {
background-color: #CFF2F2;
}
+
+.beast {
+ background-color: #E5F2F2;
+}
+
+.clear {
+ background-color: #FBFBC9;
+}
+
+.clear:hover {
+ background-color: #EAEA9D;
+}
diff --git a/beastify/popup/choose_beast.html b/beastify/popup/choose_beast.html
index 47bc5e3..5984a4e 100644
--- a/beastify/popup/choose_beast.html
+++ b/beastify/popup/choose_beast.html
@@ -7,9 +7,10 @@
- Frog
- Turtle
- Snake
+ Frog
+ Turtle
+ Snake
+ Reset
diff --git a/beastify/popup/choose_beast.js b/beastify/popup/choose_beast.js
index e282e4f..c7dcb7b 100644
--- a/beastify/popup/choose_beast.js
+++ b/beastify/popup/choose_beast.js
@@ -12,33 +12,38 @@ 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.
-
-Then get the active tab and send "beastify.js" a message
-containing the URL to the chosen beast's image.
+If it's on a button wich contains class "clear":
+ Reload the page.
+ Close the popup. This is needed, as the content script malfunctions after page reloads.
*/
document.addEventListener("click", function(e) {
- if (!e.target.classList.contains("beast")) {
+ if (e.target.classList.contains("beast")) {
+ 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, {beastURL: chosenBeastURL});
+ });
+
return;
}
+ else if (e.target.classList.contains("clear")) {
+ chrome.tabs.reload();
+ window.close();
- 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, {beastURL: chosenBeastURL});
- });
-
+ return;
+ }
});