feat(browser-extension): add button to add items manually in options page

packages/browser-extension/src/_locales/de/messages.json

@@ -8,6 +8,12 @@
   "contextMenu_settingsOption": {
     "message": "Ausnahmeliste verwalten"
   },
+  "options_addButton": {
+    "message": "Ausschluss hinzufügen"
+  },
+  "options_addPrompt": {
+    "message": "Domain eingeben"
+  },
   "options_clearButton": {
     "message": "Liste leeren"
   },

packages/browser-extension/src/_locales/en/messages.json

@@ -8,6 +8,12 @@
   "contextMenu_settingsOption": {
     "message": "Manage exclusion list"
   },
+  "options_addButton": {
+    "message": "Add exclusion"
+  },
+  "options_addPrompt": {
+    "message": "Enter domain"
+  },
   "options_clearButton": {
     "message": "Clear list"
   },

packages/browser-extension/src/_locales/es/messages.json

@@ -8,6 +8,12 @@
   "contextMenu_settingsOption": {
     "message": "Gestionar lista de exclusión"
   },
+  "options_addButton": {
+    "message": "Agregar exclusión"
+  },
+  "options_addPrompt": {
+    "message": "Ingrese el dominio"
+  },
   "options_clearButton": {
     "message": "Borrar lista"
   },

packages/browser-extension/src/_locales/fr/messages.json

@@ -8,6 +8,12 @@
   "contextMenu_settingsOption": {
     "message": "Gérer la liste d'exclusion"
   },
+  "options_addButton": {
+    "message": "Ajouter une exclusion"
+  },
+  "options_addPrompt": {
+    "message": "Entrez le domaine"
+  },
   "options_clearButton": {
     "message": "Effacer la liste"
   },

packages/browser-extension/src/_locales/it/messages.json

@@ -8,6 +8,12 @@
   "contextMenu_settingsOption": {
     "message": "Gestisci elenco di esclusione"
   },
+  "options_addButton": {
+    "message": "Aggiungi esclusione"
+  },
+  "options_addPrompt": {
+    "message": "Inserisci il dominio"
+  },
   "options_clearButton": {
     "message": "Cancella elenco"
   },

packages/browser-extension/src/_locales/pt_BR/messages.json

@@ -8,6 +8,12 @@
   "contextMenu_settingsOption": {
     "message": "Gerenciar lista de exclusão"
   },
+  "options_addButton": {
+    "message": "Adicionar exclusão"
+  },
+  "options_addPrompt": {
+    "message": "Digite o domínio"
+  },
   "options_clearButton": {
     "message": "Limpar lista"
   },

packages/browser-extension/src/_locales/pt_PT/messages.json

@@ -8,6 +8,12 @@
   "contextMenu_settingsOption": {
     "message": "Gerenciar lista de exclusão"
   },
+  "options_addButton": {
+    "message": "Adicionar exclusão"
+  },
+  "options_addPrompt": {
+    "message": "Digite o domínio"
+  },
   "options_clearButton": {
     "message": "Limpar lista"
   },

packages/browser-extension/src/_locales/ro/messages.json

@@ -8,6 +8,12 @@
   "contextMenu_settingsOption": {
     "message": "Gestionați lista de excludere"
   },
+  "options_addButton": {
+    "message": "Adăugați excludere"
+  },
+  "options_addPrompt": {
+    "message": "Introduceți domeniul"
+  },
   "options_clearButton": {
     "message": "Ștergeți lista"
   },

packages/browser-extension/src/_locales/ru/messages.json

@@ -8,6 +8,12 @@
   "contextMenu_settingsOption": {
     "message": "Управление списком исключений"
   },
+  "options_addButton": {
+    "message": "Добавить исключение"
+  },
+  "options_addPrompt": {
+    "message": "Введите домен"
+  },
   "options_clearButton": {
     "message": "Очистить список"
   },

packages/browser-extension/src/options.html

@@ -17,6 +17,22 @@
     </header>
     <main>
       <div class="button-group">
+        <button data-variant="large" id="add-button">
+          <span data-i18n="options_addButton"></span>
+          <svg
+            fill="none"
+            height="14"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            width="14"
+          >
+            <line x1="12" y1="5" x2="12" y2="19"></line>
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+          </svg>
+        </button>
         <button data-variant="large" id="clear-button">
           <span data-i18n="options_clearButton"></span>
           <svg
@@ -76,7 +92,6 @@
           </svg>
         </button>
       </div>
-
       <input id="filter-input" data-i18n-placeholder="options_filterPlaceholder" />
       <ul id="exclusion-list">
         <li id="exclusion-list-item-template" style="display: none">

packages/browser-extension/src/scripts/options.js

@@ -4,6 +4,12 @@
 
 const dispatch = chrome.runtime.sendMessage;
 
+/**
+ * @description Domain RegExp
+ */
+
+const domainRx = /^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/g;
+
 /**
  * @description Exclusion list, URLs where the user prefers to disable the extension
  * @type {string[]}
@@ -46,6 +52,26 @@ function createList() {
   }
 }
 
+/**
+ * @async
+ * @description Add a new item to the exclusion list
+ * @returns {Promise<void>}
+ */
+
+async function handleAddClick() {
+  const exclusionValue = window.prompt(chrome.i18n.getMessage('options_addPrompt'));
+
+  if (exclusionValue?.trim() && (domainRx.test(exclusionValue) || exclusionValue === 'localhost')) {
+    const filterInputElement = document.getElementById('filter-input');
+    const state = { enabled: false };
+    await dispatch({ hostname: exclusionValue, state, type: 'SET_HOSTNAME_STATE' });
+
+    exclusionList = [...new Set([...exclusionList, exclusionValue])].sort();
+    createList();
+    updateList(filterInputElement.value.trim());
+  }
+}
+
 /**
  * @async
  * @description Clear all items from the exclusion list
@@ -74,6 +100,9 @@ async function handleContentLoaded() {
   exclusionList = await dispatch({ type: 'GET_EXCLUSION_LIST' });
   createList();
 
+  const addButtonElement = document.getElementById('add-button');
+  addButtonElement.addEventListener('click', handleAddClick);
+
   const clearButtonElement = document.getElementById('clear-button');
   clearButtonElement.addEventListener('click', handleClearClick);