Clear cache on relaod

background.js

@@ -647,6 +647,12 @@ function serializeTabEntries(state) {
     .map(serializeEntry);
 }
 
+async function clearAllCapturedState() {
+  TAB_CAPTURED.clear();
+  FULL_URL_BY_SAMPLE.clear();
+  await browser.storage.local.remove(HISTORY_KEY);
+}
+
 browser.runtime.onMessage.addListener((message, sender) => {
   if (!message || typeof message.type !== "string") {
     return undefined;
@@ -724,6 +730,10 @@ browser.runtime.onMessage.addListener((message, sender) => {
     });
   }
 
+  if (message.type === "CLEAR_CAPTURED_STATE") {
+    return clearAllCapturedState().then(() => ({ ok: true }));
+  }
+
   if (message.type === "DOWNLOAD_ENTRY") {
     return resolveAndDownloadEntry(message.entry)
       .then(async (result) => {
@@ -864,3 +874,7 @@ browser.webNavigation.onCommitted.addListener((details) => {
   }
   maybeClearTabState(details.tabId);
 });
+
+browser.runtime.onStartup.addListener(() => {
+  void clearAllCapturedState();
+});

history.css

@@ -11,6 +11,14 @@ body {
   padding: 24px;
 }
 
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
 h1 {
   margin: 0;
   font-size: 0;
@@ -27,6 +35,23 @@ p {
   color: #8ea292;
 }
 
+#clearHistoryBtn {
+  border: 1px solid #3f2a2a;
+  background: #1c1111;
+  color: #dcb9b9;
+  border-radius: 999px;
+  cursor: pointer;
+  padding: 6px 10px;
+  font-size: 12px;
+  transition: all 120ms ease;
+}
+
+#clearHistoryBtn:hover {
+  border-color: #6b4444;
+  color: #f3d7d7;
+  background: #241515;
+}
+
 #historyList {
   list-style: none;
   margin: 0;

history.html

@@ -13,6 +13,7 @@
   <main class="history-page">
     <header>
       <h1><img class="brand-logo" src="logo.png" alt="Splirate"></h1>
+      <button id="clearHistoryBtn" type="button">Clear</button>
     </header>
     <p id="status">Loading history...</p>
     <ul id="historyList"></ul>

history.js

@@ -2,6 +2,7 @@
 
 const statusEl = document.getElementById("status");
 const listEl = document.getElementById("historyList");
+const clearHistoryBtn = document.getElementById("clearHistoryBtn");
 
 function formatMeta(entry) {
   const packName = entry && entry.packName ? entry.packName : "n/a";
@@ -140,3 +141,19 @@ async function loadHistory() {
 loadHistory().catch(() => {
   statusEl.textContent = "Unexpected error while loading history.";
 });
+
+if (clearHistoryBtn) {
+  clearHistoryBtn.addEventListener("click", async () => {
+    const confirmed = window.confirm("Clear all captured samples and history?");
+    if (!confirmed) {
+      return;
+    }
+    const result = await browser.runtime.sendMessage({ type: "CLEAR_CAPTURED_STATE" });
+    if (!result || !result.ok) {
+      statusEl.textContent = "Unable to clear captured samples.";
+      return;
+    }
+    await loadHistory();
+    statusEl.textContent = "Captured samples cleared.";
+  });
+}

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Splirate",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Splirate captures Splice sample links and downloads playable audio.",
   "icons": {
     "48": "icons/icon-48.png",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "splirate",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "description": "Splirate Firefox extension",
   "scripts": {

popup.css

@@ -20,6 +20,12 @@ body {
   margin-bottom: 10px;
 }
 
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .popup-header h1 {
   margin: 0;
   font-size: 0;
@@ -43,12 +49,29 @@ body {
   transition: all 120ms ease;
 }
 
+#clearBtn {
+  border: 1px solid #3f2a2a;
+  background: #1c1111;
+  color: #dcb9b9;
+  border-radius: 999px;
+  cursor: pointer;
+  padding: 6px 10px;
+  font-size: 12px;
+  transition: all 120ms ease;
+}
+
 #openHistoryBtn:hover {
   border-color: #3c5342;
   color: #e3f3e7;
   background: #151d18;
 }
 
+#clearBtn:hover {
+  border-color: #6b4444;
+  color: #f3d7d7;
+  background: #241515;
+}
+
 .status {
   margin: 8px 0 12px;
   color: #829589;

popup.html

@@ -11,7 +11,10 @@
     <main class="popup">
       <header class="popup-header">
         <h1><img class="brand-logo" src="logo.png" alt="Splirate"></h1>
-        <button id="openHistoryBtn" type="button">Open Full History</button>
+        <div class="header-actions">
+          <button id="clearBtn" type="button">Clear</button>
+          <button id="openHistoryBtn" type="button">History</button>
+        </div>
       </header>
       <section>
         <p id="status" class="status">Loading captured URLs...</p>

popup.js

@@ -3,6 +3,7 @@
 const statusEl = document.getElementById("status");
 const listEl = document.getElementById("urlList");
 const openHistoryBtn = document.getElementById("openHistoryBtn");
+const clearBtn = document.getElementById("clearBtn");
 
 function setStatus(message) {
   statusEl.textContent = message;
@@ -153,6 +154,22 @@ openHistoryBtn.addEventListener("click", async () => {
   window.close();
 });
 
+if (clearBtn) {
+  clearBtn.addEventListener("click", async () => {
+    const confirmed = window.confirm("Clear all captured samples and history?");
+    if (!confirmed) {
+      return;
+    }
+    const result = await browser.runtime.sendMessage({ type: "CLEAR_CAPTURED_STATE" });
+    if (!result || !result.ok) {
+      setStatus("Unable to clear captured samples.");
+      return;
+    }
+    await loadCapturedUrls();
+    setStatus("Captured samples cleared.");
+  });
+}
+
 loadCapturedUrls().catch(() => {
   setStatus("Unexpected error while loading URLs.");
 });