refactor(browser-extension): move report dialog to popup

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

@@ -53,28 +53,31 @@
   "popup_rateOption": {
     "message": "Bewerten Sie diese Erweiterung"
   },
-  "reportDialog_bodyText": {
+  "report_bodyText": {
     "message": "Bitte geben Sie in diesem Bericht keine persönlichen Informationen weiter. Wenn Sie weitere Details hinzufügen möchten, öffnen Sie das GitHub-Problem im nächsten Schritt und fügen Sie einen Kommentar hinzu."
   },
-  "reportDialog_reasonInputError": {
+  "report_cancelButtonText": {
+    "message": "Abbrechen"
+  },
+  "report_reasonInputError": {
     "message": "Bitte geben Sie einen Grund mit mindestens 10 und höchstens 1000 Zeichen ein"
   },
-  "reportDialog_reasonInputLabel": {
+  "report_reasonInputLabel": {
     "message": "Grund"
   },
-  "reportDialog_reasonInputPlaceholder": {
+  "report_reasonInputPlaceholder": {
     "message": "Popup ist erschienen"
   },
-  "reportDialog_submitExtraText": {
+  "report_submitExtraText": {
     "message": "Während wir daran arbeiten, können Sie diese Website zur Ausschlussliste in den Erweiterungseinstellungen hinzufügen oder einfach die Erweiterung für diese Website deaktivieren, indem Sie auf das Erweiterungssymbol in Ihrer Browser-Symbolleiste klicken."
   },
-  "reportDialog_submitText": {
+  "report_submitText": {
     "message": "Bericht gesendet!"
   },
-  "reportDialog_urlInputError": {
+  "report_urlInputError": {
     "message": "Bitte geben Sie eine gültige URL mit höchstens 1000 Zeichen ein"
   },
-  "reportDialog_urlInputLabel": {
+  "report_urlInputLabel": {
     "message": "URL"
   }
 }

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

@@ -53,28 +53,31 @@
   "popup_rateOption": {
     "message": "Rate this extension"
   },
-  "reportDialog_bodyText": {
+  "report_bodyText": {
     "message": "Please, do not share any personal information in this report. If you want to add more details, open the GitHub issue in the next step and add a comment."
   },
-  "reportDialog_reasonInputError": {
+  "report_cancelButtonText": {
+    "message": "Cancel"
+  },
+  "report_reasonInputError": {
     "message": "Please enter a reason with at least 10 characters and no more than 1000 characters"
   },
-  "reportDialog_reasonInputLabel": {
+  "report_reasonInputLabel": {
     "message": "Reason"
   },
-  "reportDialog_reasonInputPlaceholder": {
+  "report_reasonInputPlaceholder": {
     "message": "Popup showed up"
   },
-  "reportDialog_submitExtraText": {
+  "report_submitExtraText": {
     "message": "While we are working on this, you can add this website to the exclusion list in the extension settings or just disable the extension for this website clicking on the extension icon in your browser toolbar"
   },
-  "reportDialog_submitText": {
+  "report_submitText": {
     "message": "Report sent!"
   },
-  "reportDialog_urlInputError": {
+  "report_urlInputError": {
     "message": "Please enter a valid URL with no more than 1000 characters"
   },
-  "reportDialog_urlInputLabel": {
+  "report_urlInputLabel": {
     "message": "URL"
   }
 }

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

@@ -53,28 +53,31 @@
   "popup_rateOption": {
     "message": "Califica esta extensión"
   },
-  "reportDialog_bodyText": {
+  "report_bodyText": {
     "message": "Por favor, no compartas ninguna información personal en este informe. Si deseas agregar más detalles, abre el problema de GitHub en el siguiente paso y agrega un comentario."
   },
-  "reportDialog_reasonInputError": {
+  "report_cancelButtonText": {
+    "message": "Cancelar"
+  },
+  "report_reasonInputError": {
     "message": "Por favor, ingrese una razón con al menos 10 caracteres y no más de 1000 caracteres"
   },
-  "reportDialog_reasonInputLabel": {
+  "report_reasonInputLabel": {
     "message": "Razón"
   },
-  "reportDialog_reasonInputPlaceholder": {
+  "report_reasonInputPlaceholder": {
     "message": "Apareció un popup"
   },
-  "reportDialog_submitExtraText": {
+  "report_submitExtraText": {
     "message": "Mientras trabajamos en esto, puedes agregar este sitio web a la lista de exclusión en la configuración de la extensión o simplemente deshabilitar la extensión para este sitio web haciendo clic en el ícono de la extensión en la barra de herramientas de tu navegador."
   },
-  "reportDialog_submitText": {
+  "report_submitText": {
     "message": "¡Informe enviado!"
   },
-  "reportDialog_urlInputError": {
+  "report_urlInputError": {
     "message": "Por favor, ingrese una URL válida con no más de 1000 caracteres"
   },
-  "reportDialog_urlInputLabel": {
+  "report_urlInputLabel": {
     "message": "URL"
   }
 }

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

@@ -53,28 +53,31 @@
   "popup_rateOption": {
     "message": "Évaluer cette extension"
   },
-  "reportDialog_bodyText": {
+  "report_bodyText": {
     "message": "Veuillez ne pas partager d'informations personnelles dans ce rapport. Si vous souhaitez ajouter plus de détails, ouvrez le problème GitHub à l'étape suivante et ajoutez un commentaire."
   },
-  "reportDialog_reasonInputError": {
+  "report_cancelButtonText": {
+    "message": "Annuler"
+  },
+  "report_reasonInputError": {
     "message": "Veuillez entrer une raison d'au moins 10 caractères et de pas plus de 1000 caractères"
   },
-  "reportDialog_reasonInputLabel": {
+  "report_reasonInputLabel": {
     "message": "Raison"
   },
-  "reportDialog_reasonInputPlaceholder": {
+  "report_reasonInputPlaceholder": {
     "message": "Le popup est apparu"
   },
-  "reportDialog_submitExtraText": {
+  "report_submitExtraText": {
     "message": "Pendant que nous travaillons sur ce point, vous pouvez ajouter ce site web à la liste d'exclusion dans les paramètres de l'extension ou simplement désactiver l'extension pour ce site web en cliquant sur l'icône de l'extension dans la barre d'outils de votre navigateur."
   },
-  "reportDialog_submitText": {
+  "report_submitText": {
     "message": "Rapport envoyé!"
   },
-  "reportDialog_urlInputError": {
+  "report_urlInputError": {
     "message": "Veuillez entrer une URL valide de pas plus de 1000 caractères"
   },
-  "reportDialog_urlInputLabel": {
+  "report_urlInputLabel": {
     "message": "URL"
   }
 }

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

@@ -53,28 +53,31 @@
   "popup_rateOption": {
     "message": "Valuta questa estensione"
   },
-  "reportDialog_bodyText": {
+  "report_bodyText": {
     "message": "Per favore, non condividere informazioni personali in questo rapporto. Se vuoi aggiungere più dettagli, apri il problema su GitHub nel passaggio successivo e aggiungi un commento."
   },
-  "reportDialog_reasonInputError": {
+  "report_cancelButtonText": {
+    "message": "Annulla"
+  },
+  "report_reasonInputError": {
     "message": "Inserisci una motivazione con almeno 10 caratteri e non più di 1000 caratteri"
   },
-  "reportDialog_reasonInputLabel": {
+  "report_reasonInputLabel": {
     "message": "Motivo"
   },
-  "reportDialog_reasonInputPlaceholder": {
+  "report_reasonInputPlaceholder": {
     "message": "Popup apparso"
   },
-  "reportDialog_submitExtraText": {
+  "report_submitExtraText": {
     "message": "Mentre lavoriamo su questo, puoi aggiungere questo sito web alla lista di esclusione nelle impostazioni dell'estensione o semplicemente disattivare l'estensione per questo sito web cliccando sull'icona dell'estensione nella barra degli strumenti del browser."
   },
-  "reportDialog_submitText": {
+  "report_submitText": {
     "message": "Rapporto inviato!"
   },
-  "reportDialog_urlInputError": {
+  "report_urlInputError": {
     "message": "Inserisci un URL valido con non più di 1000 caratteri"
   },
-  "reportDialog_urlInputLabel": {
+  "report_urlInputLabel": {
     "message": "URL"
   }
 }

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

@@ -53,28 +53,31 @@
   "popup_rateOption": {
     "message": "Oceń to rozszerzenie"
   },
-  "reportDialog_bodyText": {
+  "report_bodyText": {
     "message": "Prosimy, nie udostępniaj żadnych danych osobowych w tym raporcie. Jeśli chcesz dodać więcej szczegółów, otwórz zgłoszenie na GitHub w następnym kroku i dodaj komentarz."
   },
-  "reportDialog_reasonInputError": {
+  "report_cancelButtonText": {
+    "message": "Anuluj"
+  },
+  "report_reasonInputError": {
     "message": "Proszę podać powód zawierający co najmniej 10 znaków i nie więcej niż 1000 znaków"
   },
-  "reportDialog_reasonInputLabel": {
+  "report_reasonInputLabel": {
     "message": "Powód"
   },
-  "reportDialog_reasonInputPlaceholder": {
+  "report_reasonInputPlaceholder": {
     "message": "Pojawił się popup"
   },
-  "reportDialog_submitExtraText": {
+  "report_submitExtraText": {
     "message": "Podczas gdy nad tym pracujemy, możesz dodać tę stronę do listy wykluczeń w ustawieniach rozszerzenia lub po prostu wyłączyć rozszerzenie dla tej strony, klikając ikonę rozszerzenia na pasku narzędzi przeglądarki."
   },
-  "reportDialog_submitText": {
+  "report_submitText": {
     "message": "Zgłoszenie wysłane!"
   },
-  "reportDialog_urlInputError": {
+  "report_urlInputError": {
     "message": "Proszę wprowadzić prawidłowy URL zawierający nie więcej niż 1000 znaków"
   },
-  "reportDialog_urlInputLabel": {
+  "report_urlInputLabel": {
     "message": "URL"
   }
 }

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

@@ -53,28 +53,31 @@
   "popup_rateOption": {
     "message": "Avalie esta extensão"
   },
-  "reportDialog_bodyText": {
+  "report_bodyText": {
     "message": "Por favor, não compartilhe nenhuma informação pessoal neste relatório. Se você quiser adicionar mais detalhes, abra o problema no GitHub na próxima etapa e adicione um comentário."
   },
-  "reportDialog_reasonInputError": {
+  "report_cancelButtonText": {
+    "message": "Cancelar"
+  },
+  "report_reasonInputError": {
     "message": "Por favor, insira um motivo com pelo menos 10 caracteres e no máximo 1000 caracteres"
   },
-  "reportDialog_reasonInputLabel": {
+  "report_reasonInputLabel": {
     "message": "Motivo"
   },
-  "reportDialog_reasonInputPlaceholder": {
+  "report_reasonInputPlaceholder": {
     "message": "Popup apareceu"
   },
-  "reportDialog_submitExtraText": {
+  "report_submitExtraText": {
     "message": "Enquanto estamos trabalhando nisso, você pode adicionar este site à lista de exclusão nas configurações da extensão ou simplesmente desativar a extensão para este site clicando no ícone da extensão na barra de ferramentas do navegador."
   },
-  "reportDialog_submitText": {
+  "report_submitText": {
     "message": "Relatório enviado!"
   },
-  "reportDialog_urlInputError": {
+  "report_urlInputError": {
     "message": "Por favor, insira uma URL válida com no máximo 1000 caracteres"
   },
-  "reportDialog_urlInputLabel": {
+  "report_urlInputLabel": {
     "message": "URL"
   }
 }

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

@@ -53,28 +53,31 @@
   "popup_rateOption": {
     "message": "Avalie esta extensão"
   },
-  "reportDialog_bodyText": {
+  "report_bodyText": {
     "message": "Por favor, não partilhe nenhuma informação pessoal neste relatório. Se quiser adicionar mais detalhes, abra o problema no GitHub na próxima etapa e adicione um comentário."
   },
-  "reportDialog_reasonInputError": {
+  "report_cancelButtonText": {
+    "message": "Cancelar"
+  },
+  "report_reasonInputError": {
     "message": "Por favor, insira um motivo com pelo menos 10 caracteres e no máximo 1000 caracteres"
   },
-  "reportDialog_reasonInputLabel": {
+  "report_reasonInputLabel": {
     "message": "Motivo"
   },
-  "reportDialog_reasonInputPlaceholder": {
+  "report_reasonInputPlaceholder": {
     "message": "Popup apareceu"
   },
-  "reportDialog_submitExtraText": {
+  "report_submitExtraText": {
     "message": "Enquanto trabalhamos nisso, pode adicionar este site à lista de exclusão nas definições da extensão ou simplesmente desativar a extensão para este site clicando no ícone da extensão na barra de ferramentas do navegador."
   },
-  "reportDialog_submitText": {
+  "report_submitText": {
     "message": "Relatório enviado!"
   },
-  "reportDialog_urlInputError": {
+  "report_urlInputError": {
     "message": "Por favor, insira uma URL válida com no máximo 1000 caracteres"
   },
-  "reportDialog_urlInputLabel": {
+  "report_urlInputLabel": {
     "message": "URL"
   }
 }

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

@@ -53,28 +53,31 @@
   "popup_rateOption": {
     "message": "Evaluează această extensie"
   },
-  "reportDialog_bodyText": {
+  "report_bodyText": {
     "message": "Te rugăm să nu împărtășești informații personale în acest raport. Dacă dorești să adaugi mai multe detalii, deschide problema GitHub în pasul următor și adaugă un comentariu."
   },
-  "reportDialog_reasonInputError": {
+  "report_cancelButtonText": {
+    "message": "Anulează"
+  },
+  "report_reasonInputError": {
     "message": "Vă rugăm să introduceți un motiv cu cel puțin 10 caractere și maximum 1000 de caractere"
   },
-  "reportDialog_reasonInputLabel": {
+  "report_reasonInputLabel": {
     "message": "Motiv"
   },
-  "reportDialog_reasonInputPlaceholder": {
+  "report_reasonInputPlaceholder": {
     "message": "A apărut un popup"
   },
-  "reportDialog_submitExtraText": {
+  "report_submitExtraText": {
     "message": "În timp ce lucrăm la acest aspect, poți adăuga acest site web la lista de excludere din setările extensiei sau poți dezactiva extensia pentru acest site web făcând clic pe pictograma extensiei din bara de instrumente a browserului."
   },
-  "reportDialog_submitText": {
+  "report_submitText": {
     "message": "Raport trimis!"
   },
-  "reportDialog_urlInputError": {
+  "report_urlInputError": {
     "message": "Vă rugăm să introduceți o adresă URL validă cu maximum 1000 de caractere"
   },
-  "reportDialog_urlInputLabel": {
+  "report_urlInputLabel": {
     "message": "URL"
   }
 }

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

@@ -53,28 +53,31 @@
   "popup_rateOption": {
     "message": "Оцените это расширение"
   },
-  "reportDialog_bodyText": {
+  "report_bodyText": {
     "message": "Пожалуйста, не делитесь личной информацией в этом отчете. Если вы хотите добавить больше деталей, откройте вопрос на GitHub на следующем шаге и добавьте комментарий."
   },
-  "reportDialog_reasonInputError": {
+  "report_cancelButtonText": {
+    "message": "Отмена"
+  },
+  "report_reasonInputError": {
     "message": "Пожалуйста, введите причину длиной не менее 10 и не более 1000 символов"
   },
-  "reportDialog_reasonInputLabel": {
+  "report_reasonInputLabel": {
     "message": "Причина"
   },
-  "reportDialog_reasonInputPlaceholder": {
+  "report_reasonInputPlaceholder": {
     "message": "Появилось всплывающее окно"
   },
-  "reportDialog_submitExtraText": {
+  "report_submitExtraText": {
     "message": "Пока мы работаем над этим, вы можете добавить этот сайт в список исключений в настройках расширения или просто отключить расширение для этого сайта, нажав на значок расширения на панели инструментов вашего браузера."
   },
-  "reportDialog_submitText": {
+  "report_submitText": {
     "message": "Отчет отправлен!"
   },
-  "reportDialog_urlInputError": {
+  "report_urlInputError": {
     "message": "Пожалуйста, введите корректный URL длиной не более 1000 символов"
   },
-  "reportDialog_urlInputLabel": {
+  "report_urlInputLabel": {
     "message": "URL"
   }
 }

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

@@ -186,7 +186,7 @@ async function refreshData() {
   try {
     const { data } = await requestManager.fetchData(`${apiUrl}/data/`);
 
-    await triggerStoreUpdate('data', data);
+    await updateStore('data', data);
 
     return data;
   } catch {
@@ -205,14 +205,14 @@ async function refreshIssue(hostname) {
     const { data } = await requestManager.fetchData(`${apiUrl}/issues/${hostname}`);
 
     if (Object.keys(data).length === 0) {
-      await triggerStoreUpdate(hostname, { issue: { expiresIn: Date.now() + 8 * 60 * 60 * 1000 } });
+      await updateStore(hostname, { issue: { expiresIn: Date.now() + 8 * 60 * 60 * 1000 } });
 
       return undefined;
     }
 
     const issue = { expiresIn: Date.now() + 4 * 60 * 60 * 1000, flags: data.flags, url: data.url };
 
-    await triggerStoreUpdate(hostname, { issue });
+    await updateStore(hostname, { issue });
 
     return data;
   } catch {
@@ -251,7 +251,7 @@ async function report(message) {
  * @param {Object} value
  * @returns {Promise<void>}
  */
-async function triggerStoreUpdate(key, value) {
+async function updateStore(key, value) {
   if (key) {
     const { [key]: prev } = await storage.get(key);
 
@@ -262,14 +262,10 @@ async function triggerStoreUpdate(key, value) {
 /**
  * @description Listen to context menus clicked
  */
-browser.contextMenus.onClicked.addListener((info, tab) => {
+browser.contextMenus.onClicked.addListener((info) => {
-  const tabId = tab?.id;
-
   switch (info.menuItemId) {
     case reportMenuItemId:
-      if (tabId !== undefined) {
+      browser.action.openPopup();
-        browser.tabs.sendMessage(tabId, { type: 'SHOW_REPORT_DIALOG' }, suppressLastError);
-      }
       break;
     case settingsMenuItemId:
       browser.runtime.openOptionsPage();
@@ -309,9 +305,9 @@ browser.runtime.onMessage.addListener((message, sender, callback) => {
       return true;
     case 'GET_EXCLUSION_LIST':
       storage.get(null, (exclusions) => {
-        const exclusionList = Object.entries(exclusions || {}).flatMap((exclusion) =>
+        const exclusionList = Object.entries(exclusions || {}).flatMap((exclusion) => {
-          exclusion[0] !== 'data' && !exclusion[1]?.on ? [exclusion[0]] : []
+          return exclusion[0] !== 'data' && exclusion[1].on === false ? [exclusion[0]] : [];
-        );
+        });
         callback(exclusionList);
       });
       return true;
@@ -326,20 +322,12 @@ browser.runtime.onMessage.addListener((message, sender, callback) => {
         callback(tabs[0]);
       });
       return true;
-    case 'INSERT_DIALOG_CSS':
-      if (isPage && tabId !== undefined) {
-        script.insertCSS({ files: ['styles/dialog.css'], target: { tabId } });
-      }
-      break;
     case 'REFRESH_DATA':
       refreshData().then(callback);
       return true;
     case 'REPORT':
-      if (tabId !== undefined) {
+      report(message).then(callback);
-        report(message).then(callback);
+      return true;
-        return true;
-      }
-      break;
     case 'UPDATE_BADGE':
       if (isPage && tabId !== undefined) {
         browser.action.setBadgeBackgroundColor({ color: '#6b7280' });
@@ -347,7 +335,7 @@ browser.runtime.onMessage.addListener((message, sender, callback) => {
       }
       break;
     case 'UPDATE_STORE':
-      triggerStoreUpdate(hostname, message.state).then(callback);
+      updateStore(hostname, message.state).then(callback);
       return true;
     default:
       break;

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

@@ -20,6 +20,11 @@ if (typeof browser === 'undefined') {
  */
 const chromeUrl = 'https://chrome.google.com/webstore/detail/djcbfpkdhdkaflcigibkbpboflaplabg';
 
+/**
+ * @description Shortcut to send messages to background script
+ */
+const dispatch = browser.runtime.sendMessage;
+
 /**
  * @description Edge Add-ons link
  * @type {string}
@@ -63,19 +68,32 @@ const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
  */
 let state = { on: true };
 
+/**
+ * @description Close report form
+ * @returns {void}
+ */
+function handleCancelClick() {
+  const content = document.getElementsByClassName('content')[0];
+  const report = document.getElementsByClassName('report')[0];
+
+  if (content instanceof HTMLElement && report instanceof HTMLElement) {
+    content.style.removeProperty('display');
+    report.style.display = 'none';
+  }
+}
+
 /**
  * @async
  * @description Setup stars handlers and result message links
  * @returns {Promise<void>}
  */
 async function handleContentLoaded() {
-  const tab = await browser.runtime.sendMessage({ type: 'GET_TAB' });
+  const tab = await dispatch({ type: 'GET_TAB' });
+  const tabUrl = tab?.url ? new URL(tab.url) : undefined;
 
-  hostname = tab?.url
+  hostname = tabUrl?.hostname.split('.').slice(-3).join('.').replace('www.', '');
-    ? new URL(tab.url).hostname.split('.').slice(-3).join('.').replace('www.', '')
-    : undefined;
 
-  const next = await browser.runtime.sendMessage({ hostname, type: 'GET_STATE' });
+  const next = await dispatch({ hostname, type: 'GET_STATE' });
   state = { ...(next ?? state), tabId: tab?.id };
 
   if (state.issue?.url) {
@@ -89,6 +107,25 @@ async function handleContentLoaded() {
 
     const issueBannerUrl = document.getElementById('issue-banner-url');
     issueBannerUrl.setAttribute('href', state.issue.url);
+  } else {
+    const cancelButtonElement = document.getElementsByClassName('report-cancel-button')[0];
+    cancelButtonElement?.addEventListener('click', handleCancelClick);
+
+    const reasonInputElement = document.getElementById('report-input-reason');
+    reasonInputElement?.addEventListener('input', handleInputChange);
+    reasonInputElement?.addEventListener('keydown', handleInputKeyDown);
+
+    const reportButtonElement = document.getElementById('report-button');
+    reportButtonElement?.addEventListener('click', handleReportClick);
+    reportButtonElement?.removeAttribute('disabled');
+
+    const urlInputElement = document.getElementById('report-input-url');
+    urlInputElement?.addEventListener('input', handleInputChange);
+    urlInputElement?.addEventListener('keydown', handleInputKeyDown);
+    if (tabUrl) urlInputElement?.setAttribute('value', `${tabUrl.origin}${tabUrl.pathname}`);
+
+    const submitButtonElement = document.getElementsByClassName('report-submit-button')[0];
+    submitButtonElement?.addEventListener('click', handleSubmitButtonClick);
   }
 
   const hostTextElement = document.getElementById('host');
@@ -118,10 +155,10 @@ async function handleContentLoaded() {
   else if (isFirefox) rateButtonElement?.setAttribute('data-href', firefoxUrl);
 
   const settingsButtonElement = document.getElementById('settings-button');
-  settingsButtonElement.addEventListener('click', handleSettingsClick);
+  settingsButtonElement?.addEventListener('click', handleSettingsClick);
 
   translate();
-  updateDatabaseVersion();
+  await updateDatabaseVersion();
 }
 
 /**
@@ -141,12 +178,12 @@ async function handleDatabaseRefresh(event) {
 
   target.setAttribute('data-refreshing', 'true');
   target.setAttribute('aria-disabled', 'true');
-  await browser.runtime.sendMessage({ type: 'REFRESH_DATA' });
+  await dispatch({ type: 'REFRESH_DATA' });
   checkIcon.style.setProperty('display', 'block');
   spinnerIcon.style.setProperty('display', 'none');
   target.removeAttribute('data-animation');
   target.removeAttribute('data-refreshing');
-  updateDatabaseVersion();
+  await updateDatabaseVersion();
 
   window.setTimeout(() => {
     checkIcon.style.setProperty('display', 'none');
@@ -156,6 +193,25 @@ async function handleDatabaseRefresh(event) {
   }, 5000);
 }
 
+/**
+ * @description Input change handler
+ * @param {InputEvent} event
+ */
+function handleInputChange(event) {
+  event.currentTarget.removeAttribute('aria-invalid');
+}
+
+/**
+ * @description Input key down handler
+ * @param {KeyboardEvent} event
+ */
+function handleInputKeyDown(event) {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    event.currentTarget.blur();
+  }
+}
+
 /**
  * @async
  * @description Open a new tab
@@ -171,17 +227,32 @@ async function handleLinkRedirect(event) {
 }
 
 /**
+ * @async
  * @description Disable or enable extension on current page
  * @returns {void}
  */
-function handlePowerToggle() {
+async function handlePowerToggle() {
   const next = { on: !state.on };
 
-  browser.runtime.sendMessage({ hostname, state: next, type: 'UPDATE_STORE' });
+  await dispatch({ hostname, state: next, type: 'UPDATE_STORE' });
-  browser.tabs.reload(state.tabId, { bypassCache: true });
+  await browser.tabs.reload(state.tabId, { bypassCache: true });
   window.close();
 }
 
+/**
+ * @description Show report form
+ * @returns {void}
+ */
+function handleReportClick() {
+  const content = document.getElementsByClassName('content')[0];
+  const report = document.getElementsByClassName('report')[0];
+
+  if (content instanceof HTMLElement && report instanceof HTMLElement) {
+    content.style.display = 'none';
+    report.style.removeProperty('display');
+  }
+}
+
 /**
  * @async
  * @description Open options page
@@ -191,6 +262,56 @@ async function handleSettingsClick() {
   await browser.runtime.openOptionsPage();
 }
 
+/**
+ * @async
+ * @description Report submit button click handler
+ * @param {MouseEvent} event
+ */
+async function handleSubmitButtonClick(event) {
+  event.preventDefault();
+
+  if (event.currentTarget.getAttribute('aria-disabled') === 'true') {
+    return;
+  }
+
+  event.currentTarget.setAttribute('aria-disabled', 'true');
+
+  const reasonInput = document.getElementById('report-input-reason');
+  const reasonText = reasonInput?.value.trim();
+  const urlInput = document.getElementById('report-input-url');
+  const urlText = urlInput?.value.trim();
+
+  const errors = validateForm({ reason: reasonText, url: urlText });
+
+  if (errors) {
+    if (errors.reason) {
+      reasonInput?.setAttribute('aria-invalid', 'true');
+      reasonInput?.setAttribute('aria-errormessage', 'report-input-reason-error');
+    }
+
+    if (errors.url) {
+      urlInput?.setAttribute('aria-invalid', 'true');
+      urlInput?.setAttribute('aria-errormessage', 'report-input-url-error');
+    }
+
+    event.currentTarget.setAttribute('aria-disabled', 'false');
+    return;
+  }
+
+  const formView = document.getElementsByClassName('report-form-view')[0];
+  const issueButton = document.getElementsByClassName('report-issue-button')[0];
+  const submitView = document.getElementsByClassName('report-submit-view')[0];
+  const userAgent = window.navigator.userAgent;
+  const issueUrl = await dispatch({ userAgent, reason: reasonText, url: urlText, type: 'REPORT' });
+  const issue = { expiresIn: Date.now() + 8 * 60 * 60 * 1000, flags: ['bug'], url: issueUrl };
+
+  await dispatch({ hostname, state: { issue }, type: 'UPDATE_STORE' });
+  await dispatch({ hostname, type: 'ENABLE_ICON' });
+  formView?.setAttribute('hidden', 'true');
+  issueButton?.addEventListener('click', () => window.open(issueUrl, '_blank'));
+  submitView?.removeAttribute('hidden');
+}
+
 /**
  * @description Apply translations to tags with i18n data attribute
  * @returns {void}
@@ -218,13 +339,41 @@ function translate() {
  * @returns {Promise<void>}
  */
 async function updateDatabaseVersion() {
-  const data = await browser.runtime.sendMessage({ hostname, type: 'GET_DATA' });
+  const data = await dispatch({ hostname, type: 'GET_DATA' });
   const databaseVersionElement = document.getElementById('database-version');
 
   if (data.version) databaseVersionElement.innerText = data.version;
   else databaseVersionElement.style.setProperty('display', 'none');
 }
 
+/**
+ * @description Validate form
+ * @param {{ reason: string | undefined | undefined, url: string | undefined }} params
+ * @returns {{ reason: string | undefined, url: string | undefined } | undefined}
+ */
+function validateForm(params) {
+  const { reason, url } = params;
+  let errors = undefined;
+
+  if (!reason || reason.length < 10 || reason.length > 1000) {
+    errors = {
+      ...(errors ?? {}),
+      reason: browser.i18n.getMessage('report_reasonInputError'),
+    };
+  }
+
+  try {
+    new URL(url);
+  } catch {
+    errors = {
+      ...(errors ?? {}),
+      url: browser.i18n.getMessage('report_urlInputError'),
+    };
+  }
+
+  return errors;
+}
+
 /**
  * @description Listen to document ready
  * @listens document#DOMContentLoaded

packages/browser-extension/src/styles/popup.css

@@ -11,8 +11,6 @@
 body {
   box-sizing: border-box;
   color: var(--color-tertiary);
-  display: flex;
-  flex-direction: column;
   font-family: Inter, Arial, Helvetica, sans-serif;
   width: 320px;
 }
@@ -32,16 +30,22 @@ button {
   outline: none;
   padding: 2px;
   transition: 0.4s;
-}
 
-button:focus,
+  &:focus:not(:disabled),
-button:hover {
+  &:hover:not(:disabled) {
-  background-color: var(--color-white);
+    background-color: var(--color-white);
-  color: var(--color-secondary);
+    color: var(--color-secondary);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
 }
 
 footer {
   background-color: var(--color-secondary);
+  flex-shrink: 0;
   font-size: 12px;
   height: 4px;
   margin-top: auto;
@@ -53,10 +57,21 @@ header {
   background-color: var(--color-secondary);
   color: var(--color-white);
   display: flex;
+  flex-shrink: 0;
   font-size: 16px !important;
   height: 48px;
   justify-content: space-between;
   padding: 0 16px;
+
+  & .header-actions {
+    display: flex;
+    gap: 8px;
+
+    & #report-button:focus:not(:disabled) > svg,
+    & #report-button:hover:not(:disabled) > svg {
+      color: var(--color-error);
+    }
+  }
 }
 
 main > .banner {
@@ -159,6 +174,207 @@ popup-data-container {
   text-align: center;
 }
 
+.report {
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.2;
+  padding: 16px;
+
+  & .report-buttons {
+    margin-top: auto;
+  }
+
+  & .report-form {
+    display: grid;
+    gap: 10px;
+  }
+
+  & .report-form-view {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  & .report-form-view[hidden] {
+    display: none;
+  }
+
+  & .report-input {
+    all: unset;
+    border: 1px solid var(--color-tertiary);
+    border-radius: 4px;
+    color: var(--color-secondary);
+    cursor: text;
+    font-family: Inter, Arial, Helvetica, sans-serif;
+    font-size: 14px;
+    line-height: 1;
+    outline: none;
+    padding: 12px 8px;
+  }
+
+  & .report-input:hover {
+    border-color: var(--color-secondary);
+  }
+
+  & .report-input:focus {
+    border-color: var(--color-primary);
+  }
+
+  & .report-input:focus-visible {
+    box-shadow: initial;
+    transition: initial;
+  }
+
+  & .report-input::-webkit-scrollbar {
+    display: none;
+  }
+
+  & .report-input[aria-invalid='true'] {
+    border-color: var(--color-error);
+  }
+
+  & .report-input[aria-invalid='true'] + .report-input-error {
+    display: block;
+  }
+
+  & .report-input[aria-multiline='false'] {
+    -ms-overflow-style: none;
+    display: flex;
+    height: 40px;
+    overflow-x: auto;
+    scrollbar-width: none;
+    text-wrap: nowrap;
+  }
+
+  & .report-input[aria-multiline='true'] {
+    -ms-overflow-style: none;
+    height: 120px;
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+
+  & .report-input-error {
+    color: var(--color-error);
+    display: none;
+    font-family: Inter, Arial, Helvetica, sans-serif;
+    font-size: 10px;
+    line-height: 1.2;
+  }
+
+  & .report-input-group {
+    display: grid;
+    gap: 4px;
+  }
+
+  & .report-input-label {
+    color: var(--color-secondary);
+    font-family: Inter, Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    line-height: 1.2;
+  }
+
+  & .report-input-label-required {
+    color: var(--color-error);
+  }
+
+  & .report-cancel-button {
+    align-items: center;
+    background-color: var(--color-white);
+    border: 1px solid var(--color-white);
+    border-radius: 4px;
+    color: var(--color-secondary);
+    cursor: pointer;
+    display: flex;
+    font-family: Inter, Arial, Helvetica, sans-serif;
+    font-size: 14px;
+    height: 34px;
+    justify-content: center;
+    line-height: 1.2;
+    outline: none;
+    padding: 8px 16px 0px 16px;
+    text-align: center;
+    width: 100%;
+  }
+
+  & .report-cancel-button:focus,
+  & .report-cancel-button:hover {
+    color: var(--color-error);
+  }
+
+  & .report-issue-button,
+  & .report-submit-button {
+    align-items: center;
+    background-color: var(--color-secondary);
+    border: 1px solid var(--color-secondary);
+    border-radius: 4px;
+    color: var(--color-white);
+    cursor: pointer;
+    display: flex;
+    font-family: Inter, Arial, Helvetica, sans-serif;
+    font-size: 14px;
+    height: 42px;
+    justify-content: center;
+    line-height: 1.2;
+    margin-top: 8px;
+    outline: none;
+    padding: 8px 16px;
+    text-align: center;
+    width: 100%;
+  }
+
+  & .report-issue-button:focus,
+  & .report-issue-button:hover,
+  & .report-submit-button:focus,
+  & .report-submit-button:hover {
+    background-color: var(--color-white);
+    color: var(--color-secondary);
+  }
+
+  & .report-issue-button:focus-visible,
+  & .report-submit-button:focus-visible {
+    box-shadow: initial;
+    transition: initial;
+  }
+
+  & .report-issue-button[aria-disabled='true'],
+  & .report-submit-button[aria-disabled='true'] {
+    background-color: var(--color-tertiary);
+    border: 1px solid var(--color-tertiary);
+    color: var(--color-white);
+    cursor: not-allowed;
+  }
+
+  & .report-submit-extra-text {
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 1.2;
+    margin: 0px;
+    text-align: justify;
+  }
+
+  & .report-submit-text {
+    font-family: inherit;
+    font-size: 18px;
+    line-height: 1.2;
+    margin: 0px;
+    text-align: center;
+  }
+
+  & .report-submit-view {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    font-family: Inter, Arial, Helvetica, sans-serif;
+    gap: 24px;
+    justify-content: center;
+    margin-top: 16px;
+  }
+
+  & .report-submit-view[hidden] {
+    display: none;
+  }
+}
+
 strong {
   font-weight: bold;
 }