Add possibility to add a proxy manually

package.json

@@ -91,6 +91,7 @@
   "dependencies": {
     "ipaddr.js": "^2.2.0",
     "naive-ui": "^2.39.0",
+    "tldts": "^6.1.39",
     "uuid": "^10.0.0",
     "vue-query": "^1.26.0",
     "vue-router": "^4.4.0"

src/components/Proxy/CustomProxies.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { NCard, NCheckbox, NDivider, NSwitch, NTooltip } from 'naive-ui';
+import { NCard, NCheckbox, NDivider, NSwitch, NTooltip, NInput } from 'naive-ui';
+import { parse } from 'tldts';
+import { computed, ref } from 'vue';
 
 import Button from '@/components/Buttons/Button.vue';
 import TitleCategory from '@/components/TitleCategory.vue';
@@ -30,6 +31,25 @@ const handleCustomProxySelect = (host: string) => {
   hostProxySelect.value = true;
   toggleLocations();
 };
+
+const customProxyDomain = ref('');
+const formError = ref('');
+
+const isValidDomain = (input: string) => {
+  return !!parse(input).domain;
+};
+
+const selectLocationForNewProxy = () => {
+  if (!isValidDomain(customProxyDomain.value)) {
+    formError.value = 'Please enter a valid domain name.';
+    return;
+  }
+
+  customProxy.value = parse(customProxyDomain.value).hostname!;
+  hostProxySelect.value = true;
+  toggleLocations();
+  formError.value = '';
+};
 </script>
 
 <template>
@@ -68,6 +88,21 @@ const handleCustomProxySelect = (host: string) => {
         <Button color="error" @click="removeCustomProxy(host)">Remove proxy</Button>
       </div>
     </div>
+
+    <div class="mb-3">
+      <n-divider />
+      <TitleCategory title="Add a proxy manually" />
+
+      <div class="flex">
+        <NInput
+          v-model:value="customProxyDomain"
+          placeholder="Enter domain name"
+          class="flex-grow mr-2"
+        />
+        <Button class="w-3/12" @click="selectLocationForNewProxy">Select location</Button>
+      </div>
+      <div v-if="formError" class="text-red-500 mt-2">{{ formError }}</div>
+    </div>
   </NCard>
 
   <NCard v-if="excludedHosts.length > 0" :bordered="false">

src/helpers/socksProxy.ts

@@ -1,4 +1,5 @@
 import ipaddr from 'ipaddr.js';
+import { getDomain } from 'tldts';
 
 import { RequestDetails, ProxyDetails } from '@/helpers/socksProxy.types';
 
@@ -32,12 +33,15 @@ const getHostProxyDetails = async (): Promise<ProxyDetails> => {
 export const getActiveTabDetails = async () => {
   const activeTab = await browser.tabs.query({ active: true });
 
-  return activeTab[0].url
-    ? {
-        host: new URL(activeTab[0].url).hostname,
-        protocol: new URL(activeTab[0].url).protocol,
-      }
-    : { host: '', protocol: '' };
+  if (activeTab[0].url) {
+    const activeURL = new URL(activeTab[0].url);
+
+    return {
+      host: getDomain(activeURL.hostname)!,
+      protocol: activeURL.protocol,
+    };
+  }
+  return { host: '', protocol: '' };
 };
 
 export const getActiveProxyDetails = async () => {