add debugging section and improve notification titles

Author: maxhoffmann

background.js

@@ -44,8 +44,8 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
             for (const id of ids) {
               showNotification(
                 id,
-                `${addedIds.size} ${addedIds.size === 1 ? "neue Anzeige" : "neue Anzeigen"}`,
-                titleById[id],
+                `Neue Anzeige (${id})`,
+                titleById[id] ?? '(keine Beschreibung)',
               );
             }
           } else {

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Immo24 Notifier",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "manifest_version": 3,
   "description": "Immo24 Notifier extension by Maximilian Hoffmann",
   "homepage_url": "https://github.com/maxhoffmann/immo-extension",

popup.html

@@ -14,6 +14,12 @@
       p {
         font-size: 11px;
       }
+      .form {
+        margin-block-start: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+      }
       details {
         margin-block-start: 1rem;
       }
@@ -27,14 +33,23 @@ <h2>So geht’s:</h2>
       Das funktioniert auch, wenn die Tabs im Hintergrund geöffnet sind und man auf anderen Seiten surft.
     </p>
     <hr>
-    <h2>Klicke hier, um Benachrichtigungen zu testen:</h2>
-    <button>Benachrichtung testen</button>
+    <h2>Klicke hier, um eine Benachrichtigung zu testen:</h2>
+    <button id="test-example">Benachrichtung testen</button>
     <details>
       <summary>keine Benachrichtigung erschienen?</summary>
       <p>
         Falls beim Klick auf den Button keine Benachrichtigung erscheint, fehlen dem Browser die Berechtigungen Benachrichtigungen zu schicken.
         Schau in deinen Browser- oder Systemeinstellungen nach und aktiviere Benachrichtigungen für deinen Browser.
       </p>
     </details>
+    <details>
+      <summary>Debug</summary>
+      <div class="form">
+        <input type="text" name="expose1" id="expose1" placeholder="Expose ID 1">
+        <input type="text" name="expose2" id="expose2" placeholder="Expose ID 2">
+        <button id="test-one">Eine Benachrichtung testen</button>
+        <button id="test-multiple">Mehrere Benachrichtungen testen</button>
+      </div>
+    </details>
   </body>
 </html>

popup.js

@@ -1,10 +1,57 @@
 document.addEventListener("DOMContentLoaded", () => {
-  document.querySelector("button").addEventListener("click", () => {
-    chrome.notifications.create({
+  const firstExpose = document.querySelector('#expose1');
+  const secondExpose = document.querySelector('#expose2');
+
+  firstExpose.addEventListener("input", (event) => {
+    localStorage.setItem('expose1', event.target.value);
+  });
+  secondExpose.addEventListener("input", (event) => {
+    localStorage.setItem('expose2', event.target.value);
+  });
+
+  if (localStorage.getItem('expose1')) {
+    firstExpose.value = localStorage.getItem('expose1');
+  }
+  if (localStorage.getItem('expose2')) {
+    secondExpose.value = localStorage.getItem('expose2');
+  }
+
+  document.querySelector("#test-example").addEventListener("click", async () => {
+    await chrome.notifications.create({
       type: "basic",
+      iconUrl: "icon-48.png",
       title: "x neue Anzeigen!",
       message: "auf ImmoScout24",
+      requireInteraction: true,
+    });
+  });
+  document.querySelector("#test-one").addEventListener("click", async () => {
+    const firstExposeId = firstExpose.value;
+
+    await chrome.notifications.create("immo24:" + firstExposeId, {
+      type: "basic",
       iconUrl: "icon-48.png",
+      title: "Test-Anzeige: "+firstExposeId,
+      message: "auf ImmoScout24",
+      requireInteraction: true,
+    });
+  });
+  document.querySelector("#test-multiple").addEventListener("click", async () => {
+    const firstExposeId = firstExpose.value;
+    const secondExposeId = secondExpose.value;
+
+    chrome.notifications.create("immo24:" + firstExposeId, {
+      type: "basic",
+      iconUrl: "icon-48.png",
+      title: "Test-Anzeige: "+firstExposeId,
+      message: "auf ImmoScout24",
+      requireInteraction: true,
+    });
+    chrome.notifications.create("immo24:" + secondExposeId, {
+      type: "basic",
+      iconUrl: "icon-48.png",
+      title: "Test-Anzeige: "+secondExposeId,
+      message: "auf ImmoScout24",
       requireInteraction: true,
     });
   });