feat(browser-extension): add database and extension versions to the popup

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

@@ -35,6 +35,12 @@
   "popup_contributeOption": {
     "message": "Tragen Sie zu diesem Projekt bei"
   },
+  "popup_databaseVersion": {
+    "message": "Datenbankversion"
+  },
+  "popup_extensionVersion": {
+    "message": "Erweiterungsversion"
+  },
   "popup_helpOption": {
     "message": "Hilfe oder Probleme?"
   },

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

@@ -35,6 +35,12 @@
   "popup_contributeOption": {
     "message": "Contribute to this project"
   },
+  "popup_databaseVersion": {
+    "message": "Database version"
+  },
+  "popup_extensionVersion": {
+    "message": "Extension version"
+  },
   "popup_helpOption": {
     "message": "Help or issues?"
   },

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

@@ -35,6 +35,12 @@
   "popup_contributeOption": {
     "message": "Contribuye a este proyecto"
   },
+  "popup_databaseVersion": {
+    "message": "Versión de la base de datos"
+  },
+  "popup_extensionVersion": {
+    "message": "Versión de la extensión"
+  },
   "popup_helpOption": {
     "message": "¿Ayuda o problemas?"
   },

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

@@ -35,6 +35,12 @@
   "popup_contributeOption": {
     "message": "Contribuez à ce projet"
   },
+  "popup_databaseVersion": {
+    "message": "Version de la base de données"
+  },
+  "popup_extensionVersion": {
+    "message": "Version de l'extension"
+  },
   "popup_helpOption": {
     "message": "Aide ou problèmes?"
   },

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

@@ -35,6 +35,12 @@
   "popup_contributeOption": {
     "message": "Contribuisci a questo progetto"
   },
+  "popup_databaseVersion": {
+    "message": "Versione del database"
+  },
+  "popup_extensionVersion": {
+    "message": "Versione dell'estensione"
+  },
   "popup_helpOption": {
     "message": "Aiuto o problemi?"
   },

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

@@ -35,6 +35,12 @@
   "popup_contributeOption": {
     "message": "Weź udział w rozwoju projektu"
   },
+  "popup_databaseVersion": {
+    "message": "Wersja bazy danych"
+  },
+  "popup_extensionVersion": {
+    "message": "Wersja rozszerzenia"
+  },
   "popup_helpOption": {
     "message": "Potrzebujesz pomocy lub masz problem?"
   },

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

@@ -35,6 +35,12 @@
   "popup_contributeOption": {
     "message": "Contribua para este projeto"
   },
+  "popup_databaseVersion": {
+    "message": "Versão do banco de dados"
+  },
+  "popup_extensionVersion": {
+    "message": "Versão da extensão"
+  },
   "popup_helpOption": {
     "message": "Ajuda ou problemas?"
   },

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

@@ -35,6 +35,12 @@
   "popup_contributeOption": {
     "message": "Contribua para este projeto"
   },
+  "popup_databaseVersion": {
+    "message": "Versão do banco de dados"
+  },
+  "popup_extensionVersion": {
+    "message": "Versão da extensão"
+  },
   "popup_helpOption": {
     "message": "Ajuda ou problemas?"
   },

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

@@ -35,6 +35,12 @@
   "popup_contributeOption": {
     "message": "Contribuie la acest proiect"
   },
+  "popup_databaseVersion": {
+    "message": "Versiunea bazei de date"
+  },
+  "popup_extensionVersion": {
+    "message": "Versiunea extensiei"
+  },
   "popup_helpOption": {
     "message": "Ajutor sau probleme?"
   },

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

@@ -35,6 +35,12 @@
   "popup_contributeOption": {
     "message": "Внести свой вклад в этот проект"
   },
+  "popup_databaseVersion": {
+    "message": "Версия базы данных"
+  },
+  "popup_extensionVersion": {
+    "message": "Версия расширения"
+  },
   "popup_helpOption": {
     "message": "Помощь или проблемы?"
   },

packages/browser-extension/src/popup.html

@@ -105,6 +105,16 @@
         </svg>
         <span data-i18n="popup_rateOption"></span>
       </popup-button>
+      <popup-data-container>
+        <popup-data>
+          <strong data-i18n="popup_databaseVersion"></strong>
+          <time id="database-version"></time>
+        </popup-data>
+        <popup-data>
+          <strong data-i18n="popup_extensionVersion"></strong>
+          <span id="extension-version"></span>
+        </popup-data>
+      </popup-data-container>
     </main>
     <footer></footer>
   </body>

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

@@ -6,7 +6,7 @@ if (typeof browser === 'undefined') {
  * @description API URL
  * @type {string}
  */
-const apiUrl = 'https://api.cookie-dialog-monster.com/rest/v3';
+const apiUrl = 'https://api.cookie-dialog-monster.com/rest/v4';
 
 /**
  * @description Context menu identifier
@@ -163,6 +163,9 @@ browser.runtime.onMessage.addListener((message, sender, callback) => {
         script.insertCSS({ files: ['styles/dialog.css'], target: { tabId } });
       }
       break;
+    case 'REFRESH_DATA':
+      refreshData(callback);
+      return true;
     case 'REPORT':
       if (tabId !== undefined) {
         report(message, sender.tab, callback);

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

@@ -63,6 +63,7 @@ async function handleContentLoaded() {
     ? new URL(tab.url).hostname.split('.').slice(-3).join('.').replace('www.', '')
     : undefined;
 
+  const data = await browser.runtime.sendMessage({ hostname, type: 'GET_DATA' });
   const next = await browser.runtime.sendMessage({ hostname, type: 'GET_HOSTNAME_STATE' });
   state = { ...(next ?? state), tabId: tab?.id };
 
@@ -72,6 +73,13 @@ async function handleContentLoaded() {
   const contributeButtonElement = document.getElementById('contribute-option');
   contributeButtonElement?.addEventListener('click', handleLinkRedirect);
 
+  const databaseVersionElement = document.getElementById('database-version');
+  if (data.version) databaseVersionElement.innerText = data.version;
+  else databaseVersionElement.style.setProperty('display', 'none');
+
+  const extensionVersionElement = document.getElementById('extension-version');
+  extensionVersionElement.innerText = browser.runtime.getManifest().version;
+
   const helpButtonElement = document.getElementById('help-option');
   helpButtonElement?.addEventListener('click', handleLinkRedirect);
 

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

@@ -85,7 +85,9 @@ popup-button {
 
 popup-button:focus,
 popup-button:hover {
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+  box-shadow:
+    rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 }
 
 popup-button > span {
@@ -96,6 +98,25 @@ popup-button > svg {
   align-self: flex-end;
 }
 
+popup-data {
+  align-items: center;
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+  outline: none;
+}
+
+popup-data:not(:first-child) {
+  margin-top: 4px;
+}
+
+popup-data-container {
+  font-size: 12px;
+  grid-column: 1 / -1;
+  justify-self: center;
+  text-align: center;
+}
+
 strong {
   font-weight: bold;
 }