Fixed allowedProtocols issue

background.js

@@ -84,7 +84,9 @@ function validateURL(url) {
       allowedProtocols.add("https:");
       allowedProtocols.add("ftp:");
       allowedProtocols.add("file:");
-      browser.storage.local.set({ allowedProtocols });
+      browser.storage.local.set({ allowedProtocols: Array(...allowedProtocols) });
+    } else {
+      allowedProtocols = new Set(allowedProtocols);
     }
 
     // If no protocols are set, allow every protocol
@@ -110,12 +112,12 @@ function generateChhotoRequest(url) {
     // If the user didn't specify an API key
     if (!data.chhotoKey) {
       return Promise.reject(new Error(
-        "Missing API Key. Please configure the Chhoto URL extension by navigating to Settings > Extensions & Themes > Chhoto URL > Preferences."
+        "Missing API Key. Please configure the Chhoto URL extension. See https://git.solomon.tech/solomon/Chhoto-URL-Extension for more information."
       ));
     }
     // If the user didn't specify an API key or a host
     if (!data.chhotoKey || !data.chhotoHost) {
-      return Promise.reject(new Error("Please configure the Chhoto URL extension by navigating to Settings > Extensions & Themes > Chhoto URL > Preferences."));
+      return Promise.reject(new Error("Please configure the Chhoto URL extension. See https://git.solomon.tech/solomon/Chhoto-URL-Extension for more information."));
     }
     data.longUrl = url.href;
 
@@ -136,7 +138,7 @@ function requestChhoto(chhotoRequest) {
   headers.append("accept", "application/json");
   headers.append("Content-Type", "application/json");
   // This has been pushed to the main branch of Chhoto URL!
-  headers.append("Chhoto-Api-Key", chhotoRequest.chhotoKey);
+  headers.append("X-API-Key", chhotoRequest.chhotoKey);
 
   // Return output of fetch
   return fetch(new Request(

options.html

@@ -43,6 +43,15 @@
          margin-top: 0px;
      }
 
+     p,
+     label {
+         font-size: 15px;
+     }
+
+     code {
+         font-weight: bold;
+     }
+
      main {
          display: flex;
          flex-direction: column;
@@ -72,7 +81,7 @@
          min-width: 110px;
      }
 
-     .protocol {
+     .checkbox {
          flex-wrap: wrap;
      }
 
@@ -90,7 +99,7 @@
         <label>
             <input type="text" id="host" placeholder="https://l.example.com">
             <br>
-            Don't have one? See <a href="https://github.com/sintan1729/chhoto-url">here</a> for more information.
+            <p>Don't have one? See <a target="_blank" href="https://github.com/sintan1729/chhoto-url#building-and-running-with-docker">here</a> for more information.</p>
         </label>
     </div>
     <p id="message" class="note">A non-HTTPS connection is insecure! Only use this if you are testing.</p>
@@ -99,14 +108,14 @@
         <h2>API Key</h2>
         <label>
             <input type="password" id="key" placeholder="Long API Key">
-            <p>This is the API key that the extension will use to connecr to your Chhoto URL instance. To enable this, set the "api_key" environment variable in the server configuration.</p>
-            <p>See <a href="https://github.com/sintan1729/chhoto-url">here</a> for more information.</p>
+            <p>This is the API key that the extension will use to connect to your Chhoto URL instance. To enable this, set the <strong>"api_key"</strong> environment variable in the server configuration.</p>
+            <p>See <strong>Section 1.c</strong> <a target="_blank" href="https://github.com/sintan1729/chhoto-url#building-and-running-with-docker">here</a> for more information.</p>
         </label>
     </div>
-    <p class="note">Important: Chhoto URL will output in the console whether or not your key is secure. If it isn't, it will generate a suggested key and output it. Always follow its advice.</p>
+    <p class="note">Important: The Chhoto URL server (not the extension) will output in the console whether or not your key is secure. If it isn't, it will generate a suggested key and output it. Always follow its advice.</p>
 
-    <div class="settings protocol">
-        <h2>Protocol filters</h2>
+    <div class="settings checkbox">
+        <h2>Protocol Filters</h2>
         <label>
             Allow <code>http://</code> links
             <input type="checkbox" id="allow-http">

options.js

@@ -96,7 +96,7 @@ apiKeyEle.oninput = (event) => {
   browserStorage.set({ chhotoKey });
 };
 
-// Allowed protocols - set by the user
+// Allowed protocols
 const allowProtocolsMapping = [
   [AllowHttpEle, "http:"],
   [AllowHttpsEle, "https:"],
@@ -106,31 +106,39 @@ const allowProtocolsMapping = [
 
 for (const [ele, protocol] of allowProtocolsMapping) {
   ele.onclick = () => {
+    // Get allowedProtocols
     browserStorage.get("allowedProtocols").then(({ allowedProtocols }) => {
+      // New set
+      allowedProtocols = new Set(allowedProtocols);
       if (ele.checked) {
         allowedProtocols.add(protocol);
       } else {
         allowedProtocols.delete(protocol);
       }
-      browserStorage.set({ allowedProtocols });
+      // Save to browser storage
+      browserStorage.set({ allowedProtocols: Array(...allowedProtocols) });
     });
   };
 }
 
-function setCurrentChoice({ chhotoHost, chhotoKey, allowedProtocols, chhotoButtonOption, createOptions, modifyOptions }) {
+function setCurrentChoice({ chhotoHost, chhotoKey, allowedProtocols }) {
   hostKeyEle.value = chhotoHost || "";
   apiKeyEle.value = chhotoKey || "";
 
+  // If "allowedProtocols" is undefined, set default protocols
+  // If the user deselects every protocol, this does not activate
+  // since the value would be empty, not undefined.
+  //
+  // In other words, this only gets activated when there is absolutely no data
+  // regarding "allowedProtocols".
+  if (!allowedProtocols) {
+    allowedProtocols = allowProtocolsMapping.flatMap(([_, protocol]) => protocol);
+    browserStorage.set({ allowedProtocols: allowedProtocols });
+  }
+
   // Initialize a list of protocols that are allowed if unset. This needs
   // to be synced with the initialization code in background.js#validateURL.
-  if (allowedProtocols === undefined) {
-    allowedProtocols = new Set();
-    allowedProtocols.add("http:");
-    allowedProtocols.add("https:");
-    allowedProtocols.add("ftp:");
-    allowedProtocols.add("file:");
-    browser.storage.local.set({ allowedProtocols });
-  }
+  allowedProtocols = new Set(allowedProtocols);
 
   AllowHttpEle.checked = allowedProtocols.has("http:");
   AllowHttpsEle.checked = allowedProtocols.has("https:");