:red_circle: Chrome Extension 'Advanced Options'

3 files changed, 40 insertions, 1 deletions

diff --git a/Extensions/chrome/popup.css b/Extensions/chrome/popup.css
index 08ede4d..052d2eb 100644
--- a/Extensions/chrome/popup.css
+++ b/Extensions/chrome/popup.css
@@ -23,4 +23,16 @@ button {
     border-radius: 4px;
     font-weight: 500;
     box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
+}
+
+#advancedToggle {
+    margin-top: 1em;
+    margin-bottom: 2em;
+}
+
+#advancedSettings {
+    display: none;
+    border: 2px solid var(--secondary);
+    border-radius: 4px;
+    padding: 0.5em;
 }
\ No newline at end of file
diff --git a/Extensions/chrome/popup.html b/Extensions/chrome/popup.html
index 29e67ad..218814e 100644
--- a/Extensions/chrome/popup.html
+++ b/Extensions/chrome/popup.html
@@ -16,8 +16,16 @@
       <button id="link_website">Website</button>
       <button id="link_github">Github</button>
       <button id="link_discord">Discord</button>
+
+      <br>
+      <button id="advancedToggle">Show Advanced</button>
+
     </center>
 
+    <div id="advancedSettings">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo laboriosam, veritatis sint dolores assumenda harum quidem molestiae ad repellendus aliquid?
+    </div>
+
 
   </body>
   <script src="popup.js"></script>
diff --git a/Extensions/chrome/popup.js b/Extensions/chrome/popup.js
index 48fd9a9..0d3c991 100644
--- a/Extensions/chrome/popup.js
+++ b/Extensions/chrome/popup.js
@@ -1,10 +1,14 @@
 /*   Config   */
 const config = {
+  advanced: false,
+  showAdvancedMessage: "Show Advanced",
+  hideAdvancedMessage: "Hide Advanced",
+
   links: {
     website: 'https://returnyoutubedislike.com',
     github: 'https://github.com/Anarios/return-youtube-dislike',
     discord: 'https://discord.gg/mYnESY4Md5'
-  }
+  },
 };
 
 /*   Links   */
@@ -20,6 +24,21 @@ document.getElementById('link_discord').addEventListener('click', () => {
   chrome.tabs.create({url: config.links.discord});
 });
 
+/*   Advanced Toggle   */
+const advancedToggle = document.getElementById('advancedToggle');
+advancedToggle.addEventListener('click', () => {
+  const adv = document.getElementById('advancedSettings');
+  if (config.advanced) {
+    adv.style.display = "none";
+    advancedToggle.innerHTML = config.showAdvancedMessage;
+    config.advanced = false;
+  } else {
+    adv.style.display = "block";
+    advancedToggle.innerHTML = config.hideAdvancedMessage;
+    config.advanced = true;
+  }
+});
+
 
 
 /* popup-script.js