.all-contributorsrc

@@ -1,34 +0,0 @@
-{
-  "projectName": "Chhoto-URL-Extension",
-  "projectOwner": "SolninjaA",
-  "repoType": "github",
-  "repoHost": "https://github.com",
-  "files": [
-    "README.md"
-  ],
-  "contributors": [
-    {
-      "login": "SolninjaA",
-      "name": "SolninjaA",
-      "avatar_url": "https://avatars.githubusercontent.com/u/51935570?v=4",
-      "profile": "https://github.com/SolninjaA",
-      "contributions": [
-        "code",
-        "projectManagement",
-        "doc"
-      ]
-    },
-    {
-      "login": "DarioDarko",
-      "name": "DarioDarko",
-      "avatar_url": "https://avatars.githubusercontent.com/u/154679092?v=4",
-      "profile": "https://github.com/DarioDarko",
-      "contributions": [
-        "code"
-      ]
-    }
-  ],
-  "commitType": "docs",
-  "commitConvention": "angular",
-  "contributorsPerLine": 7
-}

CODE_OF_CONDUCT.md

@@ -1,128 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-We as members, contributors, and leaders pledge to make participation in our
-community a harassment-free experience for everyone, regardless of age, body
-size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, religion, or sexual identity
-and orientation.
-
-We pledge to act and interact in ways that contribute to an open, welcoming,
-diverse, inclusive, and healthy community.
-
-## Our Standards
-
-Examples of behavior that contributes to a positive environment for our
-community include:
-
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
-  and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
-  overall community
-
-Examples of unacceptable behavior include:
-
-* The use of sexualized language or imagery, and sexual attention or
-  advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
-  address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
-
-## Enforcement Responsibilities
-
-Community leaders are responsible for clarifying and enforcing our standards of
-acceptable behavior and will take appropriate and fair corrective action in
-response to any behavior that they deem inappropriate, threatening, offensive,
-or harmful.
-
-Community leaders have the right and responsibility to remove, edit, or reject
-comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, and will communicate reasons for moderation
-decisions when appropriate.
-
-## Scope
-
-This Code of Conduct applies within all community spaces, and also applies when
-an individual is officially representing the community in public spaces.
-Examples of representing our community include using an official e-mail address,
-posting via an official social media account, or acting as an appointed
-representative at an online or offline event.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to the community leaders responsible for enforcement at
-code-of-conduct-report@happy-mochi.com.
-All complaints will be reviewed and investigated promptly and fairly.
-
-All community leaders are obligated to respect the privacy and security of the
-reporter of any incident.
-
-## Enforcement Guidelines
-
-Community leaders will follow these Community Impact Guidelines in determining
-the consequences for any action they deem in violation of this Code of Conduct:
-
-### 1. Correction
-
-**Community Impact**: Use of inappropriate language or other behavior deemed
-unprofessional or unwelcome in the community.
-
-**Consequence**: A private, written warning from community leaders, providing
-clarity around the nature of the violation and an explanation of why the
-behavior was inappropriate. A public apology may be requested.
-
-### 2. Warning
-
-**Community Impact**: A violation through a single incident or series
-of actions.
-
-**Consequence**: A warning with consequences for continued behavior. No
-interaction with the people involved, including unsolicited interaction with
-those enforcing the Code of Conduct, for a specified period of time. This
-includes avoiding interactions in community spaces as well as external channels
-like social media. Violating these terms may lead to a temporary or
-permanent ban.
-
-### 3. Temporary Ban
-
-**Community Impact**: A serious violation of community standards, including
-sustained inappropriate behavior.
-
-**Consequence**: A temporary ban from any sort of interaction or public
-communication with the community for a specified period of time. No public or
-private interaction with the people involved, including unsolicited interaction
-with those enforcing the Code of Conduct, is allowed during this period.
-Violating these terms may lead to a permanent ban.
-
-### 4. Permanent Ban
-
-**Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
-individual, or aggression toward or disparagement of classes of individuals.
-
-**Consequence**: A permanent ban from any sort of public interaction within
-the community.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage],
-version 2.0, available at
-https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
-
-Community Impact Guidelines were inspired by [Mozilla's code of conduct
-enforcement ladder](https://github.com/mozilla/diversity).
-
-[homepage]: https://www.contributor-covenant.org
-
-For answers to common questions about this code of conduct, see the FAQ at
-https://www.contributor-covenant.org/faq. Translations are available at
-https://www.contributor-covenant.org/translations.

README.md

@@ -39,9 +39,9 @@ environment:
 ```
 
 ## Installation
-<a href="https://addons.mozilla.org/en-US/firefox/addon/chhoto-url/" target="_blank"><img alt="Firefox icon" src="https://imgur.com/ihXsdDO.png" width="64" height="64"></a>
+*This extension will be published to extension stores in the near future*
 
-Once you have installed the extension, either through an extension store (see icons above) or [from source](#installing-from-source), you must configure the extension.
+Once you have installed the extension, either through an extension store or [from source](#installing-from-source), you must configure the extension.
 
 ### Firefox
 1. Right-click on the Chhoto URL extension icon (![Chhoto URL extension icon](icons/chhoto-url-16.png)). If the extension is not pinned, the Chhoto URL extension icon will be under this highlighted icon:
@@ -100,33 +100,13 @@ This extension only communicates to the Chhoto URL server instance you configure
 4. Navigate to the cloned repository folder
 5. Click "Select"
 
-## Contributors
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tbody>
-    <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/SolninjaA"><img src="https://avatars.githubusercontent.com/u/51935570?v=4?s=100" width="100px;" alt="SolninjaA"/><br /><sub><b>SolninjaA</b></sub></a><br /><a href="https://github.com/SolninjaA/Chhoto-URL-Extension/commits?author=SolninjaA" title="Code">💻</a> <a href="#projectManagement-SolninjaA" title="Project Management">📆</a> <a href="https://github.com/SolninjaA/Chhoto-URL-Extension/commits?author=SolninjaA" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/DarioDarko"><img src="https://avatars.githubusercontent.com/u/154679092?v=4?s=100" width="100px;" alt="DarioDarko"/><br /><sub><b>DarioDarko</b></sub></a><br /><a href="https://github.com/SolninjaA/Chhoto-URL-Extension/commits?author=DarioDarko" title="Code">💻</a></td>
-    </tr>
-  </tbody>
-</table>
-
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
-
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
 ## Acknowledgements
 This project was inspired by and modified from Edward Shen's [Shlink extension][shlink-extension]. Modifications include:
 1. Rewriting the backend code to contact a Chhoto URL server, rather than a Shlink server.
-2. Adding a popup page for manual URL generation.
+2. Changing the appearance of the `options.html` page.
-3. Changing the appearance of the `options.html` page.
+3. Removing options which were either not possible to implement (because of the Chhoto URL server's limitations), or were not practical.
-4. Removing options which were either not possible to implement (because of the Chhoto URL server's limitations), or were not practical.
+4. Optimizing code where possible.
-5. Optimizing code where possible.
+5. Et cetera
-6. Et cetera.
 
 ## Information
 | Syncing from (main repository)                        | Syncing to                                            | Syncing every |

background/background.js

@@ -51,10 +51,7 @@
  * @type {object}
  * @property {number} status
  * @property {{success: boolean, error: boolean, shorturl: string}} json
- * @property {string} host The host of the server.
+ * @property {string} requestedLink The link that tried to be created. This only activates, and is only accurate, if the generateWithTitle option is enabled.
- * @property {string} requestedLink The link that tried to be created. This only activates, and is only accurate, if the generateWithTitle option is enabled or the type of the request is "popup"
- * @property {string} type The type of the request. This can be "background", which means the request came from the background page.
- *                                                  This can also be "popup", which means the request came from the popup page.
  */
 
 /**
@@ -146,20 +143,16 @@ function generateChhotoRequest([url, title, type]) {
       data.title = "";
     }
 
-    // Set the type of the request
-    data.type = type;
-
     // If "generateWithTitle" is true
     if (data.generateWithTitle) {
       // Get the configured word limit
       let wordLimit = data.titleWordLimit;
 
       // Format title name
-      // Trim all the whitespaces from the beginning and end of the string
       // Replace all occurences of ' - ' to '-'
       // Replace all occurences of ' ' to '-'
       // Replace all characters except for 'a-z', '0-9', '-' and '_' with ''
-      let titleName = title.trim().toLowerCase().replace(/ - /g, '-').replace(/\s+/g, '-').replace(/[^a-z0-9-_]/g, '');
+      let titleName = title.toLowerCase().replace(/ - /g, '-').replace(/\s+/g, '-').replace(/[^a-z0-9-_]/g, '');
 
       // If the wordLimit is not 0, and thus limited
       // If the type of the request does not equal "popup" (the word limit is always unlimited if it's generated from the popup page)
@@ -202,8 +195,8 @@ function requestChhoto(chhotoRequest) {
         longlink: chhotoRequest.longUrl,
       }),
     },
-    // Add the HTTP status code, type of the request, and requestedLink (see ChhotoResponse in type definitions for details) to the response
+    // Add the HTTP status code, and requestedLink (see ChhotoResponse in type definitions for details) to the response
-  )).then(r => r.json().then(data => ({ status: r.status, json: data, host: chhotoRequest.chhotoHost, requestedLink: chhotoRequest.title, type: chhotoRequest.type })))
+  )).then(r => r.json().then(data => ({ status: r.status, json: data, requestedLink: `${chhotoRequest.chhotoHost}/${chhotoRequest.title}` })))
   // If there was a HTTP error
   // This does not activate if the Chhoto server returns a JSON response with an error
     .catch(err => {
@@ -232,26 +225,11 @@ function validateChhotoResponse(httpResp) {
   if (httpResp.json.success) {
     return httpResp.json;
   } else {
-    // If there was a URL conflict
     if (httpResp.status === 409) {
-      // If the type is popup
-      if (httpResp.type === "popup") {
-        // Define the error
-        const error = `Error: The URL "${httpResp.host}/${httpResp.requestedLink}" already exists.`;
-
-        // Send a message to the popup
-        browser.runtime.sendMessage({type: "url-conflict", errorMessage: error, host: httpResp.host, shorturl: httpResp.requestedLink});
-
-        // Return an error
-        return Promise.reject(new Error(
-          error
-        ));
-      };
-
       const json = {
         success: true,
         error: false,
-        shorturl: `${httpResp.host}/${httpResp.requestedLink}`,
+        shorturl: httpResp.requestedLink,
       }
       return json;
     }
@@ -265,14 +243,11 @@ function validateChhotoResponse(httpResp) {
 /**
  * Copies the returned shortened link to the clipboard.
  *
- * @param {!ChhotoJSON} chhotoResp The JSON response from a Chhoto URL instance. **May also include "type"** if the request came from the popup.js script.
+ * @param {!ChhotoJSON} chhotoResp The JSON response from a Chhoto URL instance.
  * @returns {!Promise<ChhotoJSON, Error>} `ChhotoJSON`, unmodified, on
  * success, or an error indicating that we failed to copy to the clipboard.
  */
 function copyLinkToClipboard(chhotoResp) {
-  // Send finished message
-  browser.runtime.sendMessage({message: "finished"});
-
   // Chrome requires this hacky workaround :(
   if (typeof chrome !== "undefined") {
     const prevSelected = document.activeElement;
@@ -364,13 +339,12 @@ function popupGenerateChhoto(url, title) {
 browser.browserAction.onClicked.addListener(generateChhoto);
 
 // Create a context menu
-browser.contextMenus.removeAll();
 browser.contextMenus.create({
   title: "Manually generate a Chhoto URL",
   contexts: ["all"]
 });
 
 // Run code when the context menu is clicked
-browser.contextMenus.onClicked.addListener( (info) => {
+browser.contextMenus.onClicked.addListener( () => {
-  browser.windows.create({url: `/popup/popup.html?url=${info.pageUrl}`, type: "popup"});
+  browser.windows.create({url: "/popup/popup.html", type: "popup"});
 });

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Chhoto URL",
-  "version": "1.3.1",
+  "version": "1.2.0",
   "description": "An unofficial extension for shortening URLs using the Chhoto URL API. Requires a Chhoto URL instance.",
   "icons": {
     "16": "icons/chhoto-url-16.png",

options/options.html

@@ -150,16 +150,6 @@
         <p id="message2" class="note">Inputted value is not a number.</p>
     </div>
 
-    <div class="settings checkbox">
-        <h2>Popup Settings</h2>
-        <label>
-            Automatically insert long URL into the popup
-            <input type="checkbox" id="auto-insert-popup">
-            <p class="note">This will only autofill the long URL if the page's protocol is supported (see the allowed protocols setting).</p>
-        </label>
-    </div>
-
-
     <script type="application/javascript" src="/lib/browser-polyfill.min.js"></script>
     <script type="application/javascript" src="/options/options.js"></script>
   </body>

options/options.js

@@ -40,7 +40,6 @@ const generateWithTitleEle = document.getElementById("generate-with-title");
 const titleWordLimitLabelEle = document.getElementById("title-word-limit-label");
 const titleWordLimitEle = document.getElementById("title-word-limit");
 const message2Ele = document.getElementById("message2");
-const autoInsertPopupEle = document.getElementById("auto-insert-popup");
 
 // Get the browser storage
 const browserStorage = browser.storage.local;
@@ -165,21 +164,7 @@ titleWordLimitEle.oninput = (event) => {
   };
 }
 
-// Automatically insert long URL into popup
+function setCurrentChoice({ chhotoHost, chhotoKey, allowedProtocols, generateWithTitle, titleWordLimit }) {
-autoInsertPopupEle.onclick = () => {
-  // Get browser storage
-  browserStorage.get("autoInsertPopup").then(({ autoInsertPopup }) => {
-    // Get value
-    autoInsertPopup = autoInsertPopupEle.checked;
-
-    // Save value
-    browserStorage.set({ autoInsertPopup });
-  });
-};
-
-
-
-function setCurrentChoice({ chhotoHost, chhotoKey, allowedProtocols, generateWithTitle, titleWordLimit, autoInsertPopup }) {
   hostKeyEle.value = chhotoHost || "";
   apiKeyEle.value = chhotoKey || "";
 
@@ -206,25 +191,16 @@ function setCurrentChoice({ chhotoHost, chhotoKey, allowedProtocols, generateWit
     browserStorage.set({ titleWordLimit: titleWordLimit });
   }
 
-  // If autoInsertPopup is undefined, set the default value
-  if (autoInsertPopup === undefined) {
-    autoInsertPopup = false;
-    browserStorage.set({ autoInsertPopup: autoInsertPopup });
-  }
-
   // Initialize a list of protocols that are allowed if unset. This needs
   // to be synced with the initialization code in background.js#validateURL.
   allowedProtocols = new Set(allowedProtocols);
 
-
-  // Update the checkboxes to display the correct value
   AllowHttpEle.checked = allowedProtocols.has("http:");
   AllowHttpsEle.checked = allowedProtocols.has("https:");
   AllowFileEle.checked = allowedProtocols.has("file:");
   AllowFtpEle.checked = allowedProtocols.has("ftp:");
 
   generateWithTitleEle.checked = generateWithTitle;
-  autoInsertPopupEle.checked = autoInsertPopup;
 
   // Set default display
   let display = "none";

popup/popup.html

@@ -11,7 +11,6 @@
              height: 300px;
              font-size: 20px;
              font-family: sans-serif;
-             margin-bottom: 20px;
          }
 
          .header {
@@ -35,9 +34,7 @@
              cursor: pointer;
          }
 
-         .generate-button,
+         #generate {
-         #url-conflict-yes,
-         #url-conflict-no {
              border: black 1px solid;
              border-radius: 7px;
              background-color: white;
@@ -48,9 +45,7 @@
          }
 
          #close:hover,
-         .generate-button:hover,
+         #generate:hover {
-         #url-conflict-yes:hover,
-         #url-conflict-no:hover {
              background-color: #bbb;
          }
 
@@ -66,7 +61,7 @@
          }
 
          input {
-             min-width: 250px;
+             min-width: 150px;
              min-height: 17px;
              padding: 5px;
              border: 2px solid black;
@@ -77,9 +72,7 @@
 
          #message,
          #message2,
-         #message3,
+         #message3 {
-         #url-conflict,
-         #delete-error {
              display: none;
          }
 
@@ -103,40 +96,25 @@
 
         <button id="close" type="button">&#10006; Close</button>
 
-        <form id="generate">
+        <div class="generate">
-            <div class="generate">
+            <label>
-                <label>
+                Short URL
-                    Short URL
+                <input required type="text" id="shorturl" placeholder="interesting-short-url">
-                    <input autofocus required type="text" id="shorturl" placeholder="interesting-short-url">
+                <p id="message"></p>
-                    <p id="message"></p>
+            </label>
-                </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>
-
-        <div id="url-conflict">
-            <h2 id="url-conflict-header"></h2>
-            <h3>Would you like to replace it?</h3>
-            <input id="url-conflict-yes" type="submit" value="Yes">
-            <input id="url-conflict-no" type="submit" value="No (append a random string)">
-            <p>If you replace a link, your browser may still cache the old destination. Others will be able to see the correct destination, if their browser didn't do the same.</p>
         </div>
-
+        <div class="generate">
-        <div id="delete-error">
+            <label>
-            <h2>Error: Failed to replace link</h2>
+                Long URL
-            <p id="delete-error-message"></p>
+                <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>
 
 

popup/popup.js

@@ -36,273 +36,31 @@ const messageEle = document.querySelector("#message");
 const message2Ele = document.querySelector("#message2");
 const message3Ele = document.querySelector("#message3");
 const generateEle = document.querySelector("#generate");
-const urlConflictEle = document.querySelector("#url-conflict");
-const urlConflictHeaderEle = document.querySelector("#url-conflict-header");
-const urlConflictYesEle = document.querySelector("#url-conflict-yes");
-const urlConflictNoEle = document.querySelector("#url-conflict-no");
-const deleteErrorEle = document.querySelector("#delete-error");
-const deleteErrorMessageEle = document.querySelector("#delete-error-message");
 
 // Define values
 let shorturl;
 let longurl;
 
-// Get the passed long URL, if present
-const requestParams = new URLSearchParams(window.location.search);
-const requestValue = requestParams.get('url');
-
-// Get the background page, and call the sendRequest function (which is in this script)
-const backgroundFunc = browser.runtime.getBackgroundPage();
-
-/**
- * Functions
- */
-
-/**
- * Closing the popup
- */
-
-// Close function
 async function close() {
   try {
     const windowId = (await browser.windows.getCurrent()).id;
     await browser.windows.remove(windowId);
   } catch (error) {
     console.log("Closing failed:", error);
-  };
+  }
-};
-
-/**
- * Send requests to the background page
- */
-
-// Define the sendRequest function (which calls a background.js function to generate a shortened link)
-function sendRequest(page) {
-  page.popupGenerateChhoto(longurl, shorturl);
-};
-
-// Handle errors for sendRequest() function
-function onError(error) {
-  console.log(`Error: ${error}`);
 }
 
-/**
- * Random string generation (to append to the shorturl, when requested)
- */
-
-// Define the "generate()" function
-// This will generate a random string, if requested
-function generate() {
-  // Define the alphabet
-  // The letters "cfhistu" are commonly used in rude words, so they are omitted
-  const ALPHABET = '0123456789abdegjklmnopqrvwxyz';
-  const ID_LENGTH = 8;
-
-  // Generate
-  let rtn = "";
-  for (let i = 0; i < ID_LENGTH; i++) {
-    rtn += ALPHABET.charAt(Math.floor(Math.random() * ALPHABET.length));
-  };
-
-  // Return the string
-  return rtn;
-}
-
-/**
- * Link deletion / link replacement
- */
-
-// Delete the link, and then make another request to the server to generate it again
-// In other words, replace the link
-function deleteLink(host, link) {
-  browser.storage.local.get("chhotoKey").then((chhotoKey) => {
-    const headers = new Headers();
-    headers.append("accept", "application/json");
-    headers.append("Content-Type", "application/json");
-    // This has been pushed to the main branch of Chhoto URL!
-    headers.append("X-API-Key", chhotoKey.chhotoKey);
-
-    // Fetch
-    return fetch(new Request(
-      `${host}/api/del/${link}`,
-      {
-        method: "DELETE",
-        headers,
-      },
-    )).then(r => r.json().then(data => ({ status: r.status, json: data })))
-      .then(result => {
-        if (result.json.success) {
-          // Remove error class, if applied
-          deleteErrorEle.classList.remove("warning");
-
-          // Send request to function which handles requests to the background page
-          backgroundFunc.then(sendRequest, onError);
-        } else if (result.json.error) {
-          // Set error message
-          deleteErrorMessageEle.innerText = `Error (${result.status}): ${result.json.reason}`;
-
-          // Add warning style
-          deleteErrorEle.classList.add("warning");
-
-        };
-
-      })
-      .catch(err => {
-        // Set error message
-        deleteErrorMessageEle.innerText = `Error (${result.status}): ${result.json.reason}`;
-
-        // Add warning style
-        deleteErrorEle.classList.add("warning");
-
-        // Error
-        return Promise.reject(new Error(
-          `Error: ${err.message}`
-        ));
-      });
-  });
-};
-
-/**
- * Listening to runtime messages
- */
-
-// Handle the messages (i.e. errors)
-function handleMessage(request) {
-  // If the error was a URL conflict
-  if (request.type && request.type === "url-conflict") {
-    // Update the error message
-    urlConflictHeaderEle.innerText = request.errorMessage;
-
-    // Add warning class
-    urlConflictEle.classList.add("warning");
-
-    // When the user clicks "yes"
-    urlConflictYesEle.onclick = () => {
-      // Call the deleteLink function
-      deleteLink(request.host, request.shorturl);
-    };
-
-    // When the user clicks "no"
-    urlConflictNoEle.onclick = () => {
-      // Reassign the short URL
-      shorturl = shorturl + "-" + generate();
-
-      // Update the value of the input field
-      shortURLEle.value = shorturl;
-
-      // Remove the warning class
-      urlConflictEle.classList.remove("warning");
-    };
-  } else if (request.message === "finished") {
-    close();
-  };
-};
-
-
-
-
-
-/**
- * Event listeners
- * */
-
 // If the close button is clicked, close the window
 closeEle.addEventListener('click', () => {
   close();
 });
 
-// Listen for messages (i.e. errors)
-browser.runtime.onMessage.addListener(handleMessage);
-
-// If the generate button was clicked
-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") ) {
-
-    // Remove the warning class
-    message3Ele.classList.remove("warning");
-
-    // Send request to function which handles requests to the background page
-    backgroundFunc.then(sendRequest, onError);
-  } else {
-    // Add the warning class
-    message3Ele.classList.add("warning");
-  };
-});
-
-
-
-
-
-/**
- * If statements, i.e. the main functionality
- * */
-
-/**
- * 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}`);
-      };
-
-    };
-
-  });
-};
-
-
-/**
- * When the short URL is inputted
- * */
-
 // When the short URL is inputted
 shortURLEle.oninput = (event) => {
   if (event.type === "click") {
     event.preventDefault();
   };
 
-  // Hide the URL conflict error, if it is present
-  urlConflictEle.classList.remove("warning");
-
-  // Hide the deletion error, if it is present
-  deleteErrorEle.classList.remove("warning");
-
-
   // If the short URL value is greater than 0 (i.e. not an empty string)
   if (shortURLEle.value.length > 0) {
     // Get the browser storage
@@ -314,12 +72,10 @@ shortURLEle.oninput = (event) => {
       const chhotoHost = data.chhotoHost;
 
       // Format the short URL
-      // Trim all the whitespaces from the beginning and end of the string
       // Replace all occurences of ' - ' to '-'
       // Replace all occurences of ' ' to '-'
       // Replace all characters except for 'a-z', '0-9', '-' and '_' with ''
-      let shortURLText = shortURLEle.value.trim().toLowerCase().replace(/ - /g, '-').replace(/\s+/g, '-').replace(/[^a-z0-9-_]/g, '');
+      let shortURLText = shortURLEle.value.toLowerCase().replace(/ - /g, '-').replace(/\s+/g, '-').replace(/[^a-z0-9-_]/g, '');
-
 
       // If the wordLimit is not 0, and thus limited
       // And if the configured host is not undefined
@@ -340,12 +96,9 @@ shortURLEle.oninput = (event) => {
   } else {
     // If the short URL is an empty string, hide the message
     messageEle.classList.remove("shown");
-  };
+  }
-};
 
-/**
+};
- * When the long URL is inputted
- * */
 
 // When the long URL is inputted
 longURLEle.oninput = (event) => {
@@ -392,6 +145,8 @@ longURLEle.oninput = (event) => {
         message2Ele.classList.add("warning");
         longURLEle.style.color = "red";
       };
+
+
     });
   } else {
     // If the long URL is an empty string, hide the warning styling
@@ -399,3 +154,26 @@ longURLEle.oninput = (event) => {
     longURLEle.style.color = "black";
   }
 };
+
+// Define the sendRequest function (which calls a background.js function to generate a shortened link)
+function sendRequest(page) {
+  page.popupGenerateChhoto(longurl, shorturl);
+  close();
+}
+
+// If the generate button was clicked
+generateEle.addEventListener("click", () => {
+  // Ensure both fields have been filled out, and the long URL is valid
+  if ( shorturl !== undefined && longurl !== undefined && !message2Ele.classList.contains("warning") ) {
+
+    // Remove the warning class
+    message3Ele.classList.remove("warning");
+
+    // Get the background page, and call the sendRequest function (which is in this script)
+    const backgroundFunc = browser.runtime.getBackgroundPage();
+    backgroundFunc.then(sendRequest);
+  } else {
+    // Add the warning class
+    message3Ele.classList.add("warning");
+  };
+});