Add settings icon to popup.html and redirect user to the settings modal in welcome.html

Author: febinbellamy

manifest.json

@@ -2,7 +2,7 @@
   "name": "CodeHub",
   "description": "Automatically pushes your Codewars submissions to GitHub",
   "homepage_url": "https://github.com/FebinBellamy/CodeHub",
-  "version": "1.0.1",
+  "version": "2.0.1",
   "author": "Febin Bellamy",
   "action": {
     "default_icon": {
@@ -23,17 +23,11 @@
     "type": "module",
     "persistent": false
   },
-  "permissions": [
-    "storage",
-    "tabs",
-    "scripting",
-    "webNavigation",
-    "activeTab"
-  ],
+  "permissions": ["storage", "tabs", "scripting", "webNavigation", "activeTab"],
   "host_permissions": [
     "https://www.codewars.com/*",
     "https://github.com/*",
     "https://api.github.com/*"
   ],
   "manifest_version": 3
-}
+}

popup.html

@@ -45,7 +45,6 @@ <h2>Automatically sync your code from Codewars to GitHub</h2>
               />
             </svg>
           </a>
-
           <a
             href="https://github.com/febinbellamy/CodeHub/labels/bug"
             target="_blank"
@@ -80,7 +79,6 @@ <h2>Automatically sync your code from Codewars to GitHub</h2>
               />
             </svg>
           </a>
-
           <a
             href="mailto:febinbellamy@gmail.com?subject=CodeHub"
             target="_blank"
@@ -98,6 +96,20 @@ <h2>Automatically sync your code from Codewars to GitHub</h2>
               />
             </svg>
           </a>
+          <a id="settings-icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              fill="currentColor"
+              class="bi bi-gear-fill"
+              viewBox="0 0 16 16"
+            >
+              <path
+                d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"
+              />
+            </svg>
+          </a>
         </div>
       </footer>
     </main>

popup.js

@@ -8,6 +8,7 @@ const repoConnectedSection = document.querySelector("#repo-connected");
 const aTagForRepoUrl = document.querySelector("#repo-url");
 const starCodeHubButton = document.querySelector("#star-repo-button");
 const globeIcon = document.querySelector("#globe-icon");
+const settingsIcon = document.querySelector("#settings-icon");
 
 authButton.addEventListener("click", () => {
   chrome.runtime.sendMessage({ action: "authenticateUser" });
@@ -25,6 +26,10 @@ starCodeHubButton.addEventListener("click", () => {
   chrome.tabs.create({ url: "http://www.github.com/febinbellamy/codehub" });
 });
 
+settingsIcon.addEventListener("click", () => {
+  chrome.tabs.create({ url: "welcome.html?openSettings=true" });
+});
+
 updateUI(
   authRequestSection,
   linkRepoRequestSection,

scripts/welcome.js

@@ -23,6 +23,11 @@ document.addEventListener("DOMContentLoaded", () => {
       radio.checked = true;
     }
   });
+
+  const params = new URLSearchParams(window.location.search);
+  if (params.get("openSettings") === "true") {
+    settingsModal.style.display = "block";
+  }
 });
 
 authButton.addEventListener("click", () => {
@@ -41,22 +46,31 @@ settingsIcon.addEventListener("click", () => {
   settingsModal.style.display = "block";
 });
 
+const removeOpenSettingsParam = () => {
+  const url = new URL(window.location);
+  url.searchParams.delete("openSettings");
+  window.history.replaceState({}, document.title, url.pathname + url.search);
+};
+
 saveSettingsBtn.addEventListener("click", () => {
   const selected = document.querySelector(
     'input[name="folder-structure"]:checked'
   ).value;
   chrome.storage.local.set({ folderStructure: selected }, () => {
     settingsModal.style.display = "none";
+    removeOpenSettingsParam();
   });
 });
 
 closeModal.addEventListener("click", () => {
   settingsModal.style.display = "none";
+  removeOpenSettingsParam();
 });
 
 window.addEventListener("click", (event) => {
   if (event.target === settingsModal) {
     settingsModal.style.display = "none";
+    removeOpenSettingsParam();
   }
 });