Moved styles to a css file, renamed global variables to prevent clashing with other extensions or page scripts

extension/run.js

@@ -1,110 +1,26 @@
-(function twitchnotes() {
+(function twitchNotes() {
-  if (document.querySelector("script#twitchnotes")) {
+  if (!chrome) {
     return;
   }
 
-  const script = document.createElement("script");
-  script.type = "text/javascript";
-  script.src = chrome.runtime.getURL("twitchnotes.js");
-  script.id = "twitchnotes";
   const head = document.getElementsByTagName("head")[0];
   if (!head) {
     return;
   }
 
+  if (!document.querySelector("script#twitchNotesScript")) {
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.src = chrome.runtime.getURL("twitchnotes.js");
+    script.id = "twitchNotesScript";
     head.appendChild(script);
+  }
 
+  if (!document.querySelector("style#twitchNotesStyle")) {
     const style = document.createElement("style");
-  style.innerHTML = `
+    style.src = chrome.runtime.getURL("twitchnotes.css");
-    :root {  
+    style.id = "twitchNotesStyle";
-        --window-close: #f77669;
-        --window-minify: #ffcb6b;
-        --window-expand: #c3e88d;
 
-        --background-header: #393d3e;
-        --background-code: #1f1e1e;
-    }
-
-    .twitchnote img {
-        height: 18px;
-        padding: 0 4px 0;
-    }
-
-    .twitch-note-container {
-        position: fixed;
-        z-index: 1000000;
-        min-width: 420px;
-        max-width: 95vw;
-        min-height: 240px;
-        max-height: 50vh;
-        background: var(--color-background-base);
-        border: var(--border-width-default) solid var(--color-border-base)  !important;
-    }
-
-    .twitch-note-header {
-        width: 100%;
-        height: 32px;
-        line-height: 32px;
-        border-bottom: var(--border-width-default) solid var(--color-border-base)  !important;
-        position: relative;
-        cursor: move;
-    }
-
-    .twitch-note-title {
-        color: var(--color-text-alt) !important;
-        font-size: var(--font-size-6) !important;
-        font-weight: var(--font-weight-semibold) !important;
-        text-transform: uppercase !important;
-        padding-left: calc((32px - var(--font-size-6)) / 2);
-    }
-
-    .twitch-note-close-button {
-        position: absolute;
-        right: 5px;
-        top: 5px;
-        width: 22px;
-        height: 22px;
-        line-height: 22px;
-        text-align: center;
-        aspect-ration: 1;
-        color: var(--color-text-alt) !important;
-        font-size: var(--font-size-6) !important;
-        font-weight: var(--font-weight-semibold) !important;
-        text-transform: uppercase !important;
-        border: var(--border-width-default) solid var(--color-border-base)  !important;
-        cursor: pointer;
-    }
-
-    .twitch-note-content {
-        position: absolute;
-        top: 32px;
-        left: 0;
-        right: 0;
-        bottom: 32px;
-        background: transparent;
-        color: var(--color-text-base) !important;
-        font-family: var(--font-base);
-        vertical-align: baseline;
-        outline: none;
-        overflow: auto;
-        padding: calc((32px - var(--font-size-6)) / 2);
-    }
-
-    .twitch-note-save-button {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 32px;
-        border-top: var(--border-width-default) solid var(--color-border-base)  !important;
-        cursor: pointer;
-        color: var(--color-text-alt) !important;
-        font-size: var(--font-size-6) !important;
-        font-weight: var(--font-weight-semibold) !important;
-        text-transform: uppercase !important;
-        text-align: center;
-        line-height: 32px;
-    }
-`;
     head.appendChild(style);
+  }
 })();

extension/twitchnotes.css

@@ -0,0 +1,97 @@
+:root {
+  --window-close: #f77669;
+  --window-minify: #ffcb6b;
+  --window-expand: #c3e88d;
+
+  --background-header: #393d3e;
+  --background-code: #1f1e1e;
+}
+
+.twitchnote img {
+  height: 18px;
+  padding: 0 4px 0;
+}
+
+.twitch-note-container {
+  position: fixed;
+  z-index: 1000000;
+  min-width: 420px;
+  max-width: 95vw;
+  min-height: 240px;
+  max-height: 50vh;
+  background: var(--color-background-base);
+  border: var(--border-width-default) solid var(--color-border-base) !important;
+}
+
+.twitch-note-header {
+  width: 100%;
+  height: 32px;
+  line-height: 32px;
+  border-bottom: var(--border-width-default) solid var(--color-border-base) !important;
+  position: relative;
+  cursor: move;
+}
+
+.twitch-note-title {
+  color: var(--color-text-alt) !important;
+  font-size: var(--font-size-6) !important;
+  font-weight: var(--font-weight-semibold) !important;
+  text-transform: uppercase !important;
+  padding-left: calc((32px - var(--font-size-6)) / 2);
+}
+
+.twitch-note-close-button {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  width: 22px;
+  height: 22px;
+  line-height: 22px;
+  text-align: center;
+  aspect-ration: 1;
+  color: var(--color-text-alt) !important;
+  font-size: var(--font-size-6) !important;
+  font-weight: var(--font-weight-semibold) !important;
+  text-transform: uppercase !important;
+  border: var(--border-width-default) solid var(--color-border-base) !important;
+  cursor: pointer;
+}
+
+.twitch-note-content {
+  position: absolute;
+  top: 32px;
+  left: 0;
+  right: 0;
+  bottom: 32px;
+  background: transparent;
+  color: var(--color-text-base) !important;
+  font-family: var(--font-base);
+  vertical-align: baseline;
+  outline: none;
+  overflow: auto;
+  padding: calc((32px - var(--font-size-6)) / 2);
+}
+
+.twitch-note-save-button {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 32px;
+  border-top: var(--border-width-default) solid var(--color-border-base) !important;
+  cursor: pointer;
+  color: var(--color-text-alt) !important;
+  font-size: var(--font-size-6) !important;
+  font-weight: var(--font-weight-semibold) !important;
+  text-transform: uppercase !important;
+  text-align: center;
+  line-height: 32px;
+}
+
+.twitch-note-settings-container {
+  position: absolute;
+  z-index: var(--z-index-balloon);
+  inset: auto 0px 100% auto;
+  margin-bottom: 8px;
+  margin-right: -5.3rem;
+}

extension/twitchnotes.js

@@ -1,16 +1,30 @@
-let mousePosition = { x: 0, y: 0 };
+let TN_mousePosition = { x: 0, y: 0 };
-let lastMousePosition = { x: 0, y: 0 };
+let TN_lastMousePosition = { x: 0, y: 0 };
-let openContainers = {};
+let TN_openContainers = {};
-let isMouseDown = false;
+let TN_isMouseDown = false;
-let activeContainer = null;
+let TN_activeContainer = null;
+let TN_settingsWindowOpen = false;
 
 document.addEventListener("mousemove", handleMouseMove);
 document.addEventListener("mouseup", handleMouseUp);
 
-function saveNote(username, note) {
+function createSettingsButton(buttonContainer) {
-  let userList = JSON.parse(
+  const settingsButton = document.createElement("div");
-    localStorage.getItem("twitch-note-all-users-list") || "[]"
+  settingsButton.innerHTML = "<b>Notes</b>";
+  settingsButton.addEventListener("click", () => {});
+
+  buttonContainer.lastChild.insertBefore(
+    settingsButton,
+    buttonContainer.lastChild.firstChild
   );
+}
+
+function getSavedUserList() {
+  return JSON.parse(localStorage.getItem("twitch-note-all-users-list") || "[]");
+}
+
+function addUserToSavedList(username) {
+  let userList = getSavedUserList();
 
   if (!userList.includes(username)) {
     userList.push(username);
@@ -19,7 +33,10 @@ function saveNote(username, note) {
       JSON.stringify(userList)
     );
   }
+}
 
+function saveNote(username, note) {
+  addUserToSavedList(username);
   localStorage.setItem("twitch-note-" + username, note);
 }
 function getNote(username) {
@@ -28,55 +45,55 @@ function getNote(username) {
 
 function handleMouseMove(event) {
   event = event || window.event;
-  if (isMouseDown) {
+  if (TN_isMouseDown) {
-    if (activeContainer) {
+    if (TN_activeContainer) {
-      const dx = mousePosition.x - lastMousePosition.x;
+      const dx = TN_mousePosition.x - TN_lastMousePosition.x;
-      const dy = mousePosition.y - lastMousePosition.y;
+      const dy = TN_mousePosition.y - TN_lastMousePosition.y;
-      openContainers[activeContainer].style.top =
+      TN_openContainers[TN_activeContainer].style.top =
-        parseInt(openContainers[activeContainer].style.top) + dy + "px";
+        parseInt(TN_openContainers[TN_activeContainer].style.top) + dy + "px";
-      openContainers[activeContainer].style.left =
+      TN_openContainers[TN_activeContainer].style.left =
-        parseInt(openContainers[activeContainer].style.left) + dx + "px";
+        parseInt(TN_openContainers[TN_activeContainer].style.left) + dx + "px";
     }
   }
   updateMousePosition(event.clientX, event.clientY);
 }
 
 function handleMouseUp(event) {
-  activeContainer = null;
+  TN_activeContainer = null;
-  isMouseDown = false;
+  TN_isMouseDown = false;
 }
 
 function updateMousePosition(x, y) {
-  lastMousePosition = { ...mousePosition };
+  TN_lastMousePosition = { ...TN_mousePosition };
-  mousePosition.x = x;
+  TN_mousePosition.x = x;
-  mousePosition.y = y;
+  TN_mousePosition.y = y;
 }
 
 function removeContainer(username) {
-  if (!openContainers[username]) return;
+  if (!TN_openContainers[username]) return;
-  openContainers[username].remove();
+  TN_openContainers[username].remove();
-  delete openContainers[username];
+  delete TN_openContainers[username];
 }
 
 function addContainer(username, container) {
-  if (openContainers[username]) return;
+  if (TN_openContainers[username]) return;
-  openContainers[username] = container;
+  TN_openContainers[username] = container;
   document.body.appendChild(container);
 }
 
 function openTwitchNote(username) {
   // CONTAINER
   const container = document.createElement("div");
-  container.style.left = mousePosition.x + "px";
+  container.style.left = TN_mousePosition.x + "px";
-  container.style.top = mousePosition.y + 10 + "px";
+  container.style.top = TN_mousePosition.y + 10 + "px";
   container.classList.add("twitch-note-container");
 
   // HEADER
   const header = document.createElement("div");
   header.classList.add("twitch-note-header");
   header.addEventListener("mousedown", function close() {
-    activeContainer = username;
+    TN_activeContainer = username;
-    isMouseDown = true;
+    TN_isMouseDown = true;
   });
   const closeButton = document.createElement("span");
   closeButton.classList.add("twitch-note-close-button");
@@ -134,13 +151,7 @@ function openTwitchNote(username) {
     )[0];
   } while (!buttonContainer || giveUpAt < Date.now());
 
-  const settingsButton = document.createElement("div");
+  createSettingsButton(buttonContainer);
-  settingsButton.innerHTML = "<b>Notes</b>";
-
-  buttonContainer.lastChild.insertBefore(
-    settingsButton,
-    buttonContainer.lastChild.firstChild
-  );
 
   // Options for the observer (which mutations to observe)
   const config = { attributes: true, childList: true, subtree: true };