diff --git a/beastify/content_scripts/clear.js b/beastify/content_scripts/clear.js
new file mode 100644
index 0000000..0f2c2dd
--- /dev/null
+++ b/beastify/content_scripts/clear.js
@@ -0,0 +1,27 @@
+/*
+clear():
+* either reloads or clears the page depending on the request
+*/
+function clear(request, sender, sendResponse) {
+ switch (request.type){
+ case "Reload":
+ location.reload();
+ break;
+ case "Blank":
+ removeEverything();
+ break;
+ }
+
+ chrome.runtime.onMessage.removeListener(clear);
+}
+
+function removeEverything() {
+ while (document.body.firstChild) {
+ document.body.firstChild.remove();
+ }
+}
+
+/*
+Assign clear() as a listener for messages from the extension.
+*/
+chrome.runtime.onMessage.addListener(clear);
diff --git a/beastify/popup/choose_beast.css b/beastify/popup/choose_beast.css
index e439cb0..e7276e6 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 {
+.button:hover {
background-color: #CFF2F2;
}
+
+.beast {
+ background-color: #E5F2F2;
+}
+
+.clear {
+ background-color: #E74C3C;
+}
+
+.clear:hover {
+ background-color: #C0392B;
+}
diff --git a/beastify/popup/choose_beast.html b/beastify/popup/choose_beast.html
index 47bc5e3..edeaea1 100644
--- a/beastify/popup/choose_beast.html
+++ b/beastify/popup/choose_beast.html
@@ -7,9 +7,11 @@
- Frog
- Turtle
- Snake
+ Frog
+ Turtle
+ Snake
+ Blank
+ Reload
diff --git a/beastify/popup/choose_beast.js b/beastify/popup/choose_beast.js
index e282e4f..b41d716 100644
--- a/beastify/popup/choose_beast.js
+++ b/beastify/popup/choose_beast.js
@@ -16,29 +16,46 @@ 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 beast buttons:
+ The text content of the node is the name of the beast we want.
-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.
-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.
-Then get the active tab and send "beastify.js" a message
-containing the URL to the chosen beast's image.
+Else if the click is on one of the clear buttons:
+ The text content of the node is the clear method we want.
+
+ Inject the "clear.js" content script in the active tab.
+
+ Then get the active tab and send "clear.js" a message
+ containing the clear method.
*/
document.addEventListener("click", function(e) {
- if (!e.target.classList.contains("beast")) {
- return;
+ 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});
+ });
+ }
+ else if (e.target.classList.contains("clear")) {
+ var chosenMethod = e.target.textContent;
+
+ chrome.tabs.executeScript(null, {
+ file: "/content_scripts/clear.js"
+ });
+
+ chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+ chrome.tabs.sendMessage(tabs[0].id, {type: chosenMethod});
+ });
}
- 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;
});