Revamp popup settings

popup/popup.html

@@ -34,7 +34,7 @@
              cursor: pointer;
          }
 
-         #generate {
+         .generate-button {
              border: black 1px solid;
              border-radius: 7px;
              background-color: white;
@@ -45,7 +45,7 @@
          }
 
          #close:hover,
-         #generate:hover {
+         .generate-button:hover {
              background-color: #bbb;
          }
 
@@ -61,7 +61,7 @@
          }
 
          input {
-             min-width: 150px;
+             min-width: 250px;
              min-height: 17px;
              padding: 5px;
              border: 2px solid black;
@@ -96,26 +96,28 @@
 
         <button id="close" type="button">&#10006; Close</button>
 
-        <div class="generate">
-            <label>
-                Short URL
-                <input required type="text" id="shorturl" placeholder="interesting-short-url">
-                <p id="message"></p>
-            </label>
-        </div>
-        <div class="generate">
-            <label>
-                Long URL
-                <input required type="text" id="longurl" placeholder="https://example.com">
-                <p id="message2">The provided URL is invalid.</p>
-            </label>
-        </div>
-        <div class="generate">
-            <label>
-                <input id="generate" type="button" value="Shorten!">
-                <p id="message3">Error: Required fields are missing.</p>
-            </label>
-        </div>
+        <form id="generate">
+            <div class="generate">
+                <label>
+                    Short URL
+                    <input autofocus required type="text" id="shorturl" placeholder="interesting-short-url">
+                    <p id="message"></p>
+                </label>
+            </div>
+            <div class="generate">
+                <label>
+                    Long URL
+                    <input required type="text" id="longurl" placeholder="https://example.com">
+                    <p id="message2">The provided URL is invalid.</p>
+                </label>
+            </div>
+            <div class="generate">
+                <label>
+                    <input class="generate-button" type="submit" value="Shorten!">
+                    <p id="message3">Error: Required fields are missing.</p>
+                </label>
+            </div>
+        </form>
 
 
         <script type="application/javascript" src="/lib/browser-polyfill.min.js"></script>

popup/popup.js

@@ -41,6 +41,56 @@ const generateEle = document.querySelector("#generate");
 let shorturl;
 let longurl;
 
+const requestParams = new URLSearchParams(window.location.search);
+const requestValue = requestParams.get('url');
+
+/**
+ * Automatically insert the long URL, if enabled
+ */
+
+// If a URL was passed in the request
+if (requestValue) {
+  browser.storage.local.get().then(( data ) => {
+    if (data.autoInsertPopup !== undefined && data.autoInsertPopup) {
+      let allowedProtocols;
+      // Initialize a list of protocols that are allowed if unset.
+      if (data.allowedProtocols === undefined) {
+        allowedProtocols = new Set();
+        allowedProtocols.add("http:");
+        allowedProtocols.add("https:");
+        allowedProtocols.add("ftp:");
+        allowedProtocols.add("file:");
+        browser.storage.local.set({ allowedProtocols: Array(...allowedProtocols) });
+      } else {
+        allowedProtocols = data.allowedProtocols;
+        allowedProtocols = new Set(allowedProtocols);
+      }
+
+      // Try and catch structure
+      try {
+        // Define the URL
+        const url = new URL(requestValue);
+
+        // Ensure the URL has a valid protocol
+        if (allowedProtocols.size > 0 && !allowedProtocols.has(url.protocol)) {
+          throw new Error("The URL is invalid");
+        };
+
+        ////// If anything beyond this point is trigerred, the URL protocol is valid. //////
+
+        // Reassign the long url
+        longURLEle.value = url;
+        longurl = url;
+      } catch (error) {
+        console.log(`Error while auto inserting the long URL - ${error}`);
+      };
+
+    };
+
+  });
+};
+
+// Close function
 async function close() {
   try {
     const windowId = (await browser.windows.getCurrent()).id;
@@ -162,7 +212,8 @@ function sendRequest(page) {
 }
 
 // If the generate button was clicked
-generateEle.addEventListener("click", () => {
+generateEle.addEventListener("submit", (event) => {
+  event.preventDefault();
   // Ensure both fields have been filled out, and the long URL is valid
   if ( shorturl !== undefined && longurl !== undefined && !message2Ele.classList.contains("warning") ) {