fixed the header on posts being broken due to the addition of the wun…

…gle text button

wungle-extension/content_script.js

@@ -1,13 +1,11 @@
 const development = true;
 
-console.log("Wungle text here:", encode("Hello World {wungle text ends here}"));
-
 // Define the functionality needed to compare arrays
 // Warn if overriding existing method
 if (Array.prototype.equals) {
   if (development) {
     console.warn(
-      "[Wungle Text]: Overriding existing Array.prototype.equals. Possible causes: New API defines the method, there's a framework conflict or you've got double inclusions in your code.",
+      "[Wungle Text]: Overriding existing Array.prototype.equals. Possible causes: New API defines the method, there's a framework conflict or you've got double inclusions in your code."
     );
   }
 }
@@ -43,7 +41,7 @@ main();
 function main() {
   if (development) {
     console.log(
-      "[Wungle Text]: Hello from the content_script.js of the Wungle text extension!",
+      "[Wungle Text]: Hello from the content_script.js of the Wungle text extension!"
     );
   }
 
@@ -53,14 +51,11 @@ function main() {
 // This function runs the callback function once the page is loaded
 function runOnLoaded(callback) {
   if (document.readyState == "complete") {
-    return callback();
+    callback();
   } else {
-    let result;
-    document.addEventListener("DOMContentLoaded", () => {
-      result = callback();
+    document.addEventListener("load", () => {
+      callback();
     });
-
-    return result;
   }
 }
 
@@ -79,10 +74,11 @@ function proccessPost(postToProccess) {
   if (development) {
     console.log(
       "[Wungle Text]: Last post content field ",
-      lastPostContentField,
+      lastPostContentField
     );
   }
 
+  /*
   header.innerHTML += `<button class="wungle-text-button" style="margin-left: 0.2rem; border: 1px solid ${
     window.matchMedia &&
     window.matchMedia("(prefers-color-scheme: dark)").matches
@@ -99,6 +95,36 @@ function proccessPost(postToProccess) {
       ? "white"
       : "black"
   };">Wungle Text</button>`;
+*/
+
+  // Create the button element to be added to the header
+  const wungleTextButton = document.createElement("button");
+  wungleTextButton.className = "wungle-text-button";
+  wungleTextButton.style =
+    "margin-left: 0.2rem; border: 1px solid " +
+    (window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "white"
+      : "black") +
+    "; height: 4rem; padding: 0.1rem 0.5rem 0.1rem 0.5rem; border-radius: 0.5rem; min-width: 6rem; line-height: 1.2rem; white-space: normal; word-wrap: break-word; background-color: " +
+    (window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "#333"
+      : "white") +
+    "; color: " +
+    (window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "white"
+      : "black") +
+    ";";
+  wungleTextButton.textContent = "Wungle Text";
+
+  // Add the button to the header
+  header.appendChild(wungleTextButton);
+
+  if (development) {
+    console.log("[Wungle Text]: Wungle Text button ", wungleTextButton);
+  }
 
   header
     .querySelector(".wungle-text-button")
@@ -113,7 +139,7 @@ function proccessPost(postToProccess) {
         if (development) {
           console.log(
             "[Wungle Text]: The text in the paragraph ",
-            theTextInTheParagraph,
+            theTextInTheParagraph
           );
         }
 
@@ -125,7 +151,7 @@ function proccessPost(postToProccess) {
           if (development) {
             console.log(
               "[Wungle Text]: The decoded text in the paragraph ",
-              decodedText,
+              decodedText
             );
           }
 
@@ -145,7 +171,7 @@ function proccessPost(postToProccess) {
           if (development) {
             console.log(
               "[Wungle Text]: The paragraph to be made empty since theres no wungle text ",
-              p.innerHTML,
+              p.innerHTML
             );
           }
 
@@ -164,7 +190,7 @@ function proccessPost(postToProccess) {
               function whenWungleTextButtonIsClickedAgain() {
                 if (development) {
                   console.log(
-                    "[Wungle Text]: Wungle text button clicked again",
+                    "[Wungle Text]: Wungle text button clicked again"
                   );
                 }
 
@@ -176,12 +202,12 @@ function proccessPost(postToProccess) {
                   .querySelector(".wungle-text-button")
                   .removeEventListener(
                     "click",
-                    whenWungleTextButtonIsClickedAgain,
+                    whenWungleTextButtonIsClickedAgain
                   );
                 header
                   .querySelector(".wungle-text-button")
                   .addEventListener("click", whenWungleTextButtonIsClicked);
-              },
+              }
             );
 
           header.querySelector(".wungle-text-button").textContent =
@@ -192,7 +218,7 @@ function proccessPost(postToProccess) {
           "[Wungle Text]: Does the text '",
           theTextInTheParagraph,
           "' contain wungle text?",
-          containsWungleText,
+          containsWungleText
         );
       });
     });
@@ -211,7 +237,7 @@ function proccessPostsContinuously() {
       console.log("[Wungle Text]: Processing post ", posts[i]);
       console.log(
         "[Wungle Text]: Is post already processed ",
-        postsThatWereAlreadyProcessed.includes(posts[i]),
+        postsThatWereAlreadyProcessed.includes(posts[i])
       );
     }
     if (!postsThatWereAlreadyProcessed.includes(posts[i])) {