Merge pull request #1 from elecordapp/options-logic

Add options menu logic and styling
elecordapp · May 14, 2024 · 93cb9b5 · 93cb9b5
2 parents 2fd35f3 + 2d03029
commit 93cb9b5
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 25 deletions.
diff --git a/background.js b/background.js
@@ -1,29 +1,32 @@
+// Parent context menu
 chrome.contextMenus.create({
-    id: "elecord",
+    id: "menu-elecord",
     title: "Elecord",
     contexts: ["selection"]
 });
 
+// Child context menus
 chrome.contextMenus.create({
-    id: "search-ggdeals",
+    id: "menu-ggdeals",
     title: "🔎 Search gg.deals for '%s'",
-    contexts: ["selection"], 
-    parentId: "elecord"
+    contexts: ["selection"],
+    parentId: "menu-elecord"
 });
 
 chrome.contextMenus.create({
-    id: "search-steam",
+    id: "menu-steam",
     title: "🔎 Search Steam for '%s'",
     contexts: ["selection"],
-    parentId: "elecord"
+    parentId: "menu-elecord"
 });
 
+// Event listeners
 chrome.contextMenus.onClicked.addListener((info, tab) => {
-    if (info.menuItemId === "search-ggdeals") {
+    if (info.menuItemId === "menu-ggdeals") {
         let url = `https://gg.deals/games/?view=list&title=${encodeURIComponent(info.selectionText)}`;
         chrome.tabs.create({ url: url });
     };
-    if (info.menuItemId === "search-steam") {
+    if (info.menuItemId === "menu-steam") {
         let url = `https://store.steampowered.com/search/?term=${encodeURIComponent(info.selectionText)}`;
         chrome.tabs.create({ url: url });
     };

diff --git a/manifest.json b/manifest.json
@@ -1,22 +1,26 @@
 {
     "name": "Elecord Extension",
-    "version": "1.0",
+    "version": "1.0.1",
     "manifest_version": 2,
     "description": "Collection of handy tools and tweaks for gamers across the web",
     "homepage_url": "https://github.com/elecordapp/elecord-extension",
     "permissions": [
         "contextMenus",
-        "tabs"
+        "tabs",
+        "storage"
     ],
     "background": {
-        "scripts": ["background.js"],
-        "persistent": false
+        "scripts": ["background.js"]
     },
     "icons": {
         "128": "icon.png"
     },
     "options_ui": {
         "page": "options.html",
-        "open_in_tab": true
+        "open_in_tab": false,
+        "browser_action": {
+            "default_title": "Elecord Extension",
+            "default_icon": "icon.png"
+        }
     }
 }
diff --git a/options.html b/options.html
@@ -6,9 +6,15 @@
     <style>
         body {
             font-family: sans-serif;
+            background-color: #222;
+            color: #fff;
         }
 
         h1 {
+            margin-bottom: 2rem;
+        }
+
+        h2 {
             margin-bottom: 1rem;
         }
 
@@ -19,23 +25,31 @@
         label {
             display: block;
         }
+
+        .container {
+            padding-left: 5vw;
+        }
     </style>
 </head>
 
 <body>
-    <h1>Options</h1>
-    <div class="option">
-        <label>
-            <input type="checkbox" id="search-games" checked>
-            Enable "Search Game" context menu
-        </label>
-    </div>
-    <div class="option">
-        <label>
-            <input type="checkbox" id="search-steam" checked>
-            Enable "Search on Steam" context menu
-        </label>
+    <div class="container">
+        <h1>Options</h1>
+        <h3>Context Menu</h3>
+        <div class="option">
+            <label>
+                <input type="checkbox" id="option-ggdeals">
+                Enable "Search gg.deals"
+            </label>
+        </div>
+        <div class="option">
+            <label>
+                <input type="checkbox" id="option-steam">
+                Enable "Search Steam"
+            </label>
+        </div>
     </div>
+    <script src="options.js"></script>
 </body>
 
 </html>
diff --git a/options.js b/options.js
@@ -0,0 +1,58 @@
+// Function to save the options to storage
+function saveOptions() {
+    // Get the values of the toggle boxes
+    var optionGGDeals = document.getElementById("option-ggdeals").checked;
+    var optionSteam = document.getElementById("option-steam").checked;
+
+    // Save the options to storage
+    chrome.storage.sync.set({
+        optionGGDeals: optionGGDeals,
+        optionSteam: optionSteam
+    }, function () {
+        // Update the context menus based on the options
+        updateContextMenus({
+            optionGGDeals: optionGGDeals,
+            optionSteam: optionSteam
+        });
+    });
+}
+
+// Function to restore the options from storage
+function restoreOptions() {
+    // Set the values of the toggle boxes based on the options, applies defaults if not set
+    chrome.storage.sync.get(["optionGGDeals", "optionSteam"], function (options) {
+        document.getElementById("option-ggdeals").checked = options.optionGGDeals || true;
+        document.getElementById("option-steam").checked = options.optionSteam || true;
+    });
+}
+
+// Function to update the context menus based on the options
+function updateContextMenus(options) {
+    // Hide or show "menu-ggdeals" context menu
+    chrome.contextMenus.update("menu-ggdeals", {
+        visible: options.optionGGDeals
+    });
+
+    // Hide or show "menu-steam" context menu
+    chrome.contextMenus.update("menu-steam", {
+        visible: options.optionSteam
+    });
+
+    // Hide or show "menu-elecord" parent context menu
+    if (!options.optionGGDeals && !options.optionSteam) {
+        chrome.contextMenus.update("menu-elecord", {
+            visible: false
+        });
+    } else {
+        chrome.contextMenus.update("menu-elecord", {
+            visible: true
+        });
+    }
+}
+
+// Add event listener for when the options are changed
+document.getElementById("option-ggdeals").addEventListener("change", saveOptions);
+document.getElementById("option-steam").addEventListener("change", saveOptions);
+
+// Restore the options when the page is loaded
+document.addEventListener("DOMContentLoaded", restoreOptions);