feat(browser-extension): add extension update banner

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

@@ -38,6 +38,9 @@
   "popup_bannerIssueWontFix": {
     "message": "Ein Problem wurde für diese Seite gemeldet, wird jedoch nicht behoben. Bitte beachten Sie, dass die Erweiterung auf dieser Seite möglicherweise nicht wie erwartet funktioniert. Wir empfehlen dringend, die Erweiterung über die Schaltfläche unten zu deaktivieren."
   },
+  "popup_bannerUpdateAvailable": {
+    "message": "Update verfügbar. Bitte installieren Sie die neueste Version, um bekannte Probleme zu beheben, bevor Sie neue melden"
+  },
   "popup_contributeOption": {
     "message": "Zu diesem Projekt beitragen"
   },

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

@@ -38,6 +38,9 @@
   "popup_bannerIssueWontFix": {
     "message": "An issue has been reported for this page, but it won't be fixed. Please be aware that the extension may not function as expected on this page. We highly recommend turning off the extension using the button below"
   },
+  "popup_bannerUpdateAvailable": {
+    "message": "Update available. Please install the latest version to address known issues before reporting new ones"
+  },
   "popup_contributeOption": {
     "message": "Contribute to this project"
   },

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

@@ -38,6 +38,9 @@
   "popup_bannerIssueWontFix": {
     "message": "Se ha informado de un problema en esta página, pero no se solucionará. Tenga en cuenta que la extensión puede no funcionar como se espera en esta página. Recomendamos encarecidamente desactivar la extensión utilizando el botón a continuación."
   },
+  "popup_bannerUpdateAvailable": {
+    "message": "Actualización disponible. Por favor, instale la última versión para solucionar problemas conocidos antes de informar nuevos"
+  },
   "popup_contributeOption": {
     "message": "Contribuir a este proyecto"
   },

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

@@ -38,6 +38,9 @@
   "popup_bannerIssueWontFix": {
     "message": "Un problème a été signalé pour cette page, mais il ne sera pas résolu. Veuillez noter que l'extension pourrait ne pas fonctionner comme prévu sur cette page. Nous vous recommandons vivement de désactiver l'extension en utilisant le bouton ci-dessous."
   },
+  "popup_bannerUpdateAvailable": {
+    "message": "Mise à jour disponible. Veuillez installer la dernière version pour résoudre les problèmes connus avant d'en signaler de nouveaux"
+  },
   "popup_contributeOption": {
     "message": "Contribuer à ce projet"
   },

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

@@ -38,6 +38,9 @@
   "popup_bannerIssueWontFix": {
     "message": "È stato segnalato un problema per questa pagina, ma non verrà risolto. Si prega di notare che l'estensione potrebbe non funzionare come previsto su questa pagina. Si consiglia vivamente di disattivare l'estensione utilizzando il pulsante qui sotto."
   },
+  "popup_bannerUpdateAvailable": {
+    "message": "Aggiornamento disponibile. Si prega di installare l'ultima versione per risolvere i problemi noti prima di segnalarne di nuovi"
+  },
   "popup_contributeOption": {
     "message": "Contribuisci a questo progetto"
   },

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

@@ -38,6 +38,9 @@
   "popup_bannerIssueWontFix": {
     "message": "Zgłoszono problem z tą stroną, ale nie zostanie on naprawiony. Należy pamiętać, że rozszerzenie może nie działać zgodnie z oczekiwaniami na tej stronie. Zdecydowanie zalecamy wyłączenie rozszerzenia za pomocą poniższego przycisku."
   },
+  "popup_bannerUpdateAvailable": {
+    "message": "Dostępna aktualizacja. Zainstaluj najnowszą wersję, aby rozwiązać znane problemy przed zgłoszeniem nowych"
+  },
   "popup_contributeOption": {
     "message": "Wesprzyj ten projekt"
   },

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

@@ -38,6 +38,9 @@
   "popup_bannerIssueWontFix": {
     "message": "Um problema foi relatado para esta página, mas não será corrigido. Esteja ciente de que a extensão pode não funcionar conforme o esperado nesta página. Recomendamos desativar a extensão usando o botão abaixo."
   },
+  "popup_bannerUpdateAvailable": {
+    "message": "Atualização disponível. Por favor, instale a versão mais recente para corrigir problemas conhecidos antes de relatar novos"
+  },
   "popup_contributeOption": {
     "message": "Contribuir para este projeto"
   },

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

@@ -38,6 +38,9 @@
   "popup_bannerIssueWontFix": {
     "message": "Foi relatado um problema para esta página, mas não será resolvido. Esteja ciente de que a extensão pode não funcionar conforme o esperado nesta página. Recomendamos desativar a extensão usando o botão abaixo."
   },
+  "popup_bannerUpdateAvailable": {
+    "message": "Atualização disponível. Por favor, instale a versão mais recente para resolver problemas conhecidos antes de relatar novos"
+  },
   "popup_contributeOption": {
     "message": "Contribuir para este projeto"
   },

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

@@ -38,6 +38,9 @@
   "popup_bannerIssueWontFix": {
     "message": "A fost raportată o problemă pentru această pagină, dar nu va fi rezolvată. Rețineți că extensia poate să nu funcționeze conform așteptărilor pe această pagină. Vă recomandăm cu insistență să dezactivați extensia folosind butonul de mai jos."
   },
+  "popup_bannerUpdateAvailable": {
+    "message": "Actualizare disponibilă. Vă rugăm să instalați cea mai recentă versiune pentru a rezolva problemele cunoscute înainte de a raporta altele noi."
+  },
   "popup_contributeOption": {
     "message": "Contribuie la acest proiect"
   },

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

@@ -38,6 +38,9 @@
   "popup_bannerIssueWontFix": {
     "message": "Для этой страницы было сообщено о проблеме, но она не будет исправлена. Обратите внимание, что расширение может работать некорректно на этой странице. Мы настоятельно рекомендуем отключить расширение, используя кнопку ниже."
   },
+  "popup_bannerUpdateAvailable": {
+    "message": "Доступно обновление. Установите последнюю версию, чтобы устранить известные проблемы перед отправкой новых отчётов."
+  },
   "popup_contributeOption": {
     "message": "Содействовать этому проекту"
   },

packages/browser-extension/src/popup.html

@@ -49,7 +49,7 @@
       </div>
     </header>
     <main>
-      <p aria-hidden="true" class="banner" id="issue-banner" role="alert">
+      <p aria-hidden="true" class="banner" data-variant="warning" id="issue-banner" role="alert">
         <span id="issue-banner-text"></span>
         <a id="issue-banner-url" target="_blank">
           <svg
@@ -69,6 +69,30 @@
           </svg>
         </a>
       </p>
+      <p aria-hidden="true" class="banner" data-variant="notice" id="update-banner" role="alert">
+        <span data-i18n="popup_bannerUpdateAvailable"></span>
+        <a
+          href="https://git.wanhose.dev/wanhose/cookie-dialog-monster/releases"
+          id="update-banner-url"
+          target="_blank"
+        >
+          <svg
+            aria-hidden="true"
+            fill="none"
+            height="12"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            width="12"
+          >
+            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+            <polyline points="15 3 21 3 21 9"></polyline>
+            <line x1="10" y1="14" x2="21" y2="3"></line>
+          </svg>
+        </a>
+      </p>
       <div class="content">
         <popup-button id="power-option" role="button" tabindex="0">
           <svg

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

@@ -9,6 +9,7 @@
  * @typedef {Object} ExtensionState
  * @property {ExtensionIssue} [issue]
  * @property {boolean} on
+ * @property {string} [updateAvailable]
  */
 
 if (typeof browser === 'undefined') {
@@ -160,13 +161,14 @@ async function getTab() {
  * @returns {Promise<ExtensionState>}
  */
 async function getState(hostname) {
-  const { [hostname]: state = stateByDefault } = await storage.get(hostname);
+  const keys = [hostname, 'updateAvailable'];
+  const { [hostname]: state = stateByDefault, updateAvailable } = await storage.get(keys);
 
   if ((state.issue && Date.now() > state.issue.expiresIn) || !state.issue?.expiresIn) {
     state.issue = await refreshIssue(hostname);
   }
 
-  return { ...stateByDefault, ...state };
+  return { ...stateByDefault, ...state, updateAvailable };
 }
 
 /**
@@ -222,7 +224,7 @@ async function refreshData() {
  */
 async function refreshIssue(hostname) {
   try {
-    const { data } = await requestManager.fetchData(`${apiUrl}/issues/${hostname}`);
+    const { data } = await requestManager.fetchData(`${apiUrl}/issues/${hostname}/`);
 
     if (Object.keys(data).length === 0) {
       await updateStore(hostname, { issue: { expiresIn: Date.now() + 8 * 60 * 60 * 1000 } });

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

@@ -1,7 +1,8 @@
 /**
  * @typedef {Object} ExtensionState
- * @property {boolean} on
  * @property {ExtensionIssue} [issue]
+ * @property {boolean} on
+ * @property {string} [updateAvailable]
  */
 
 /**
@@ -115,9 +116,11 @@ async function handleContentLoaded() {
     reasonInputElement?.addEventListener('input', handleInputChange);
     reasonInputElement?.addEventListener('keydown', handleInputKeyDown);
 
-    const reportButtonElement = document.getElementById('report-button');
+    if (!state.updateAvailable) {
-    reportButtonElement?.addEventListener('click', handleReportClick);
+      const reportButtonElement = document.getElementById('report-button');
-    reportButtonElement?.removeAttribute('disabled');
+      reportButtonElement?.addEventListener('click', handleReportClick);
+      reportButtonElement?.removeAttribute('disabled');
+    }
 
     const urlInputElement = document.getElementById('report-input-url');
     urlInputElement?.addEventListener('input', handleInputChange);
@@ -128,6 +131,14 @@ async function handleContentLoaded() {
     submitButtonElement?.addEventListener('click', handleSubmitButtonClick);
   }
 
+  if (state.updateAvailable) {
+    const updateBanner = document.getElementById('update-banner');
+    updateBanner.removeAttribute('aria-hidden');
+
+    const updateBannerUrl = document.getElementById('update-banner-url');
+    updateBannerUrl.href += `/tag/${state.updateAvailable}`;
+  }
+
   const hostTextElement = document.getElementById('host');
   hostTextElement.innerText = hostname ?? 'unknown';
 

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

@@ -89,8 +89,6 @@ header {
 }
 
 main > .banner {
-  background-color: #f39c12;
-  color: #c0392b;
   margin: 0px;
   padding: 16px;
 
@@ -98,7 +96,18 @@ main > .banner {
     display: none;
   }
 
-  & #issue-banner-url {
+  &[data-variant='notice'] {
+    background-color: #2196f3;
+    color: var(--color-white);
+  }
+
+  &[data-variant='warning'] {
+    background-color: #f39c12;
+    color: #c0392b;
+  }
+
+  & #issue-banner-url,
+  & #update-banner-url {
     color: inherit;
     display: inline-block;
     vertical-align: middle;