diff --git a/beastify/content_scripts/beastify.js b/beastify/content_scripts/beastify.js index 240512e..26985e5 100644 --- a/beastify/content_scripts/beastify.js +++ b/beastify/content_scripts/beastify.js @@ -1,47 +1,48 @@ (function() { - /* - Check and set a global guard variable. - If this content script is injected into the same page again, - it will do nothing next time. - */ + /** + * Check and set a global guard variable. + * If this content script is injected into the same page again, + * it will do nothing next time. + */ if (window.hasRun) { return; } window.hasRun = true; - /* - beastify(): - * removes every node in the document.body, - * then inserts the chosen beast - */ - function beastify(request, sender, sendResponse) { - removeEverything(); - insertBeast(request.beastURL); - } - - /* - Remove every node under document.body - */ - function removeEverything() { - while (document.body.firstChild) { - document.body.firstChild.remove(); - } - } - - /* - Given a URL to a beast image, create and style an IMG node pointing to - that image, then insert the node into the document. - */ + /** + * Given a URL to a beast image, remove all existing beasts, then + * create and style an IMG node pointing to + * that image, then insert the node into the document. + */ function insertBeast(beastURL) { - var beastImage = document.createElement("img"); + removeExistingBeasts(); + let beastImage = document.createElement("img"); beastImage.setAttribute("src", beastURL); beastImage.style.height = "100vh"; + beastImage.className = "beastify-image"; document.body.appendChild(beastImage); } - /* - Assign beastify() as a listener for messages from the extension. + /** + * Remove every beast from the page. + */ + function removeExistingBeasts() { + let existingBeasts = document.querySelectorAll(".beastify-image"); + for (let beast of existingBeasts) { + beast.remove(); + } + } + + /** + * Listen for messages from the background script. + * Call "beastify()" or "reset()". */ - browser.runtime.onMessage.addListener(beastify); + browser.runtime.onMessage.addListener((message) => { + if (message.command === "beastify") { + insertBeast(message.beastURL); + } else if (message.command === "reset") { + removeExistingBeasts(); + } + }); })(); diff --git a/beastify/popup/choose_beast.css b/beastify/popup/choose_beast.css index 36c1068..e35ca25 100644 --- a/beastify/popup/choose_beast.css +++ b/beastify/popup/choose_beast.css @@ -18,10 +18,10 @@ html, body { background-color: #E5F2F2; } -.clear { +.reset { background-color: #FBFBC9; } -.clear:hover { +.reset:hover { background-color: #EAEA9D; } diff --git a/beastify/popup/choose_beast.html b/beastify/popup/choose_beast.html index 5984a4e..83b49f4 100644 --- a/beastify/popup/choose_beast.html +++ b/beastify/popup/choose_beast.html @@ -10,7 +10,7 @@
- +