fix: remove innerHTML usage (#173)

cdrani · Nov 6, 2023 · 25d0d4a · 25d0d4a
1 parent 2ff6828
commit 25d0d4a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "chorus",
   "private": true,
   "type": "module",
-  "version": "1.16.0",
+  "version": "1.16.2",
   "scripts": {
     "build": "rollup -c",
     "watch": "rollup -c -w"

diff --git a/src/manifest.chrome.json b/src/manifest.chrome.json
@@ -2,7 +2,7 @@
   "short_name": "Chorus",
   "name": "Chorus - Spotify Enhancer",
   "description": "Enhance Spotify with controls to save favourite snips, auto-skip tracks, and set global and custom speed. More to come!",
-  "version": "1.16.1",
+  "version": "1.16.2",
   "manifest_version": 3,
   "author": "cdrani",
   "action": {

diff --git a/src/manifest.firefox.json b/src/manifest.firefox.json
@@ -2,7 +2,7 @@
   "short_name": "Chorus",
   "name": "Chorus - Spotify Enhancer",
   "description": "Enhance Spotify with controls to save favourite snips, auto-skip tracks, and set global and custom speed. More to come!",
-  "version": "1.16.1",
+  "version": "1.16.2",
   "manifest_version": 3,
   "author": "cdrani",
   "action": {

diff --git a/src/popup/index.js b/src/popup/index.js
@@ -20,13 +20,24 @@ PORT.onMessage.addListener(async ({ type, data }) => {
     await setCoverImage(data)
 })
 
+function getTextNode({ text, isShortText }) {
+    const shortTextHtml = `<p>${text}</p>`
+    const displayText = isShortText
+        ? shortTextHtml
+        : `<div>${shortTextHtml}&ensp;&bullet;&ensp;${shortTextHtml}&ensp;&centerdot;&ensp;</div>` 
+
+    return parseNodeString(displayText) 
+}
+
 function setNowPlayingTextElement({ element, text, textColour }) {
-    element.innerHTML = `<p>${text}</p>`
+    const isShortText = text.length < 28
+    const textNode = getTextNode({ isShortText, text })
+
+    element.replaceChildren(textNode)
     element.style.color = textColour
 
-    if (text.length < 28) return element.classList.remove('marquee')
+    if (isShortText) return element.classList.remove('marquee')
 
-    element.innerHTML += `&ensp;&bullet;&ensp;${element.innerHTML}&ensp;&centerdot;&ensp;`
     element.classList.add('marquee')
 }