all repos — mailcatcher-viewer @ dcc7c0a0ccfb2e91745d8ea997b7f62ff4219606 

feat: ✨ Setup basic addon
Tim Izzo tim@5ika.ch
Thu, 18 Jun 2026 14:14:53 +0200
commit

dcc7c0a0ccfb2e91745d8ea997b7f62ff4219606

3 files changed, 136 insertions(+), 0 deletions(-)

jump to
A manifest.json 
@@ -0,0 +1,15 @@ 
+{
+  "manifest_version": 2,
+  "name": "Mailcatcher Viewer",
+  "version": "1.0",
+  "description": "Affiche les emails depuis une instance Mailcatcher",
+  "permissions": ["storage", "http://*/", "https://*/", "activeTab"],
+  "browser_action": {
+    "default_popup": "popup.html",
+    "default_icon": "icons/icon-48.png"
+  },
+  "icons": {
+    "48": "icons/icon-48.png",
+    "96": "icons/icon-96.png"
+  }
+}
A popup.html 
@@ -0,0 +1,49 @@ 
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Mailcatcher Viewer</title>
+    <style>
+      body {
+        width: 400px;
+        padding: 10px;
+        font-family: Arial, sans-serif;
+      }
+      .email-list {
+        max-height: 300px;
+        overflow-y: auto;
+        border: 1px solid #ccc;
+        margin-top: 10px;
+      }
+      .email-item {
+        padding: 8px;
+        border-bottom: 1px solid #eee;
+        cursor: pointer;
+      }
+      .email-item:hover {
+        background-color: #f5f5f5;
+      }
+      #config {
+        margin-bottom: 10px;
+      }
+      button {
+        margin-top: 5px;
+        padding: 5px 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="config">
+      <label for="mailcatcher-url">URL de Mailcatcher :</label>
+      <input
+        type="text"
+        id="mailcatcher-url"
+        placeholder="http://localhost:1080"
+      />
+      <button id="save-url">Enregistrer</button>
+    </div>
+    <button id="refresh-emails">Rafraîchir</button>
+    <div class="email-list" id="email-list"></div>
+    <script src="popup.js"></script>
+  </body>
+</html>
A popup.js 
@@ -0,0 +1,72 @@ 
+// Sauvegarde l'URL de Mailcatcher
+document.getElementById("save-url").addEventListener("click", () => {
+  const url = document.getElementById("mailcatcher-url").value;
+  if (url) {
+    browser.storage.local.set({ mailcatcherUrl: url });
+    alert("URL enregistrée !");
+  }
+});
+
+// Charge l'URL sauvegardée au démarrage
+browser.storage.local.get("mailcatcherUrl").then((data) => {
+  if (data.mailcatcherUrl) {
+    document.getElementById("mailcatcher-url").value = data.mailcatcherUrl;
+    fetchEmails(data.mailcatcherUrl);
+  }
+});
+
+// Rafraîchit la liste des emails
+document.getElementById("refresh-emails").addEventListener("click", () => {
+  browser.storage.local.get("mailcatcherUrl").then((data) => {
+    if (data.mailcatcherUrl) {
+      fetchEmails(data.mailcatcherUrl);
+    } else {
+      alert("Veuillez configurer l'URL de Mailcatcher.");
+    }
+  });
+});
+
+// Récupère les emails depuis Mailcatcher
+function fetchEmails(baseUrl) {
+  const emailList = document.getElementById("email-list");
+  emailList.innerHTML = "<p>Chargement...</p>";
+
+  fetch(`${baseUrl}/messages`)
+    .then((response) => response.json())
+    .then((emails) => {
+      emailList.innerHTML = "";
+      if (emails.length === 0) {
+        emailList.innerHTML = "<p>Aucun email trouvé.</p>";
+        return;
+      }
+      emails.forEach((email) => {
+        const item = document.createElement("div");
+        item.className = "email-item";
+        item.innerHTML = `
+          <strong>${email.sender}</strong> → ${email.recipients.join(", ")}
+          <br><small>${new Date(email.sent_at).toLocaleString()}</small>
+        `;
+        item.addEventListener("click", () =>
+          showEmailDetails(baseUrl, email.id),
+        );
+        emailList.appendChild(item);
+      });
+    })
+    .catch((error) => {
+      emailList.innerHTML = `<p>Erreur : ${error.message}</p>`;
+    });
+}
+
+// Affiche les détails d'un email
+function showEmailDetails(baseUrl, emailId) {
+  fetch(`${baseUrl}/messages/${emailId}.json`)
+    .then((response) => response.json())
+    .then((email) => {
+      alert(
+        `De : ${email.sender}\nÀ : ${email.recipients}\nSujet : ${email.subject}\n\n${email.text_body || email.html_body}`,
+      );
+    })
+    .catch((error) => {
+      alert(`Erreur : ${error.message}`);
+    });
+}