feat(browser-extension): add extension update banner

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 id="update-banner-text"></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]
  */
 
 /**
@@ -128,6 +129,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;