added toggle switches

popup.html

@@ -22,27 +22,27 @@
     </div>
     
     <div id="settings-area">
-        <div class="setting" id="setting-global">
+        <div class="setting">
             <label class="switch">
-                <input type="checkbox">
+                <input type="checkbox" id="setting-global">
                 <span class="slider round"></span>
             </label>
 
             <span class="description">Enable Furikani</span>
         </div>
         
-        <div class="setting" id="setting-vocabulary">
+        <div class="setting">
             <label class="switch">
-                <input type="checkbox">
+                <input type="checkbox" id="setting-vocabulary">
                 <span class="slider round"></span>
             </label>
 
             <span class="description">Use Vocabulary List</span>
         </div>
 
-        <div class="setting" id="setting-kanji">
+        <div class="setting">
             <label class="switch">
-                <input type="checkbox">
+                <input type="checkbox" id="setting-kanji">
                 <span class="slider round"></span>
             </label>
 

src/content.js

@@ -1,10 +1,37 @@
+var vocabStyle = `
+    .furikani-vocabulary {
+        display: none;
+    }
+`
+
+var kanjiStyle  = `
+    .furikani-kanji {
+        display: none;
+    }
+`
+
+var vocabStyleSheet = document.createElement("style")
+var kanjiStyleSheet = document.createElement("style")
+
+document.head.appendChild(vocabStyleSheet)
+document.head.appendChild(kanjiStyleSheet)
+
 // Get stored word list from chrome storage
-chrome.storage.local.get(["vocabulary", "kanji", "validUserLevel"], (data) => {
+chrome.storage.local.get(["vocabulary", "kanji", "validUserLevel", "enabled", "enabledVocab", "enabledKanji"], (data) => {    
     // The users level is not valid, e.g. it exceeds the maximum allowed level
     // WaniKani requires that devs check if users are actually allowed to access content of this level
     if(!data.validUserLevel)
         return
 
+    if(data.enabled)
+    {
+        if(data.enabledVocab)
+            vocabStyleSheet.innerHTML = vocabStyle
+        
+        if(data.enabledKanji)
+            kanjiStyleSheet.innerHTML = kanjiStyle
+    }
+
     const vocabulary = data.vocabulary
     const kanji = data.kanji
 
@@ -32,17 +59,32 @@ chrome.storage.local.get(["vocabulary", "kanji", "validUserLevel"], (data) => {
         }
 
         // If the contents of the <ruby> tag are in the word list, remove the <rt> tag
-        if(vocabulary.includes(ruby.innerText) || kanji.includes(ruby.innerText))
+        var rtTag = rubyTags.item(tag).getElementsByTagName("rt").item(0)
-        {
+        if(vocabulary.includes(ruby.innerText))
-            var rtTag = rubyTags.item(tag).getElementsByTagName("rt").item(0)
+            rtTag.classList.add("furikani-vocabulary")
-            try 
+        else if(kanji.includes(ruby.innerText))
-            {
+            rtTag.classList.add("furikani-kanji")
-                rtTag.parentNode.removeChild(rtTag)
-            } catch(error)
-            {
-                console.error(error)
-                console.log(rubyTags.item(tag))
-            }
-        }
     }
+})
+
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+    if(msg.action === "settingsUpdated")
+    {
+        chrome.storage.local.get(["enabled", "enabledVocab", "enabledKanji"], (data) => {  
+            console.log(data)
+
+            if(!data.enabled)
+            {
+                vocabStyleSheet.innerHTML = ""
+                kanjiStyleSheet.innerHTML = ""
+
+                return
+            }
+
+            vocabStyleSheet.innerHTML = data.enabledVocab ? vocabStyle : ""
+            kanjiStyleSheet.innerHTML = data.enabledKanji ? kanjiStyle : ""
+        })
+    }
+
+    return true;
 })

src/popup.js

@@ -8,7 +8,7 @@ const vocabSetting = document.getElementById("setting-vocabulary")
 const kanjiSetting = document.getElementById("setting-kanji")
 
 // Set popup content
-chrome.storage.local.get(["level", "token"], (data) => {
+chrome.storage.local.get(["level", "token", "enabled", "enabledVocab", "enabledKanji"], (data) => {
     if(data.token === undefined)
     {
         statusField.innerHTML = String.fromCodePoint(0x2757)
@@ -36,6 +36,10 @@ chrome.storage.local.get(["level", "token"], (data) => {
             submitButton.classList.remove("new-token")
         }
     })
+
+    globalSetting.checked = data.enabled
+    vocabSetting.checked = data.enabledVocab
+    kanjiSetting.checked = data.enabledKanji
 })
 
 // Set the wanikani token
@@ -64,4 +68,47 @@ submitButton.addEventListener( "click", () => {
                 errorField.innerHTML = response.error
             }
         })
+})
+
+// Set settings event listeners
+globalSetting.addEventListener("change", () => {
+    chrome.storage.local.set({"enabled": globalSetting.checked})
+
+    if(!globalSetting.checked)
+    {
+        vocabSetting.checked = false
+        kanjiSetting.checked = false
+
+        vocabSetting.setAttribute("disabled", true)
+        kanjiSetting.setAttribute("disabled", true)
+    }
+    else
+    {
+        chrome.storage.local.get(["enabledVocab", "enabledKanji"], (data) => {
+            vocabSetting.checked = data.enabledVocab
+            kanjiSetting.checked = data.enabledKanji
+        })
+
+        vocabSetting.removeAttribute("disabled")
+        kanjiSetting.removeAttribute("disabled")
+    }
+
+    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
+        chrome.tabs.sendMessage(tabs[0].id, {action: "settingsUpdated"}, (r) => {})
+    })
+    
+})
+
+vocabSetting.addEventListener("change", () => {
+    chrome.storage.local.set({"enabledVocab": vocabSetting.checked})
+    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
+        chrome.tabs.sendMessage(tabs[0].id, {action: "settingsUpdated"}, (r) => {})
+    })
+})
+
+kanjiSetting.addEventListener("change", () => {
+    chrome.storage.local.set({"enabledKanji": kanjiSetting.checked})
+    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
+        chrome.tabs.sendMessage(tabs[0].id, {action: "settingsUpdated"}, (r) => {})
+    })
 })