Initial release — per-site container isolation with unique device fingerprints

Automatic per-domain containers with hardened fingerprint spoofing: canvas, WebGL, audio, navigator, screen, timezone, WebRTC, fonts, ClientRects, plugins, battery, and connection APIs.
2026-02-28 22:59:46 -06:00
commit a058d78c20
11 changed files with 1153 additions and 0 deletions
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -0,0 +1,35 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { width: 300px; font: 13px/1.4 system-ui, sans-serif; color: #e0e0e0; background: #1e1e2e; }
+h1 { padding: 10px 12px 6px; font-size: 15px; font-weight: 600; border-bottom: 1px solid #333; }
+#container-list { max-height: 320px; overflow-y: auto; }
+.row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid #2a2a3a; }
+.row:hover { background: #2a2a3a; }
+.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+.name { flex: 1; overflow: hidden; min-width: 0; }
+.name-primary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.name-domain { font-size: 10px; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.toggle { appearance: none; width: 32px; height: 18px; background: #444; border-radius: 9px; position: relative; cursor: pointer; flex-shrink: 0; }
+.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #888; border-radius: 50%; transition: .15s; }
+.toggle:checked { background: #4a9eff; }
+.toggle:checked::after { left: 16px; background: #fff; }
+.regen { background: none; border: 1px solid #555; color: #aaa; border-radius: 4px; padding: 2px 6px; font-size: 11px; cursor: pointer; flex-shrink: 0; }
+.regen:hover { border-color: #888; color: #ddd; }
+.actions { padding: 8px 12px; border-top: 1px solid #333; }
+#regen-all { width: 100%; padding: 6px; background: #333; border: 1px solid #555; color: #ccc; border-radius: 4px; cursor: pointer; font-size: 12px; }
+#regen-all:hover { background: #444; color: #fff; }
+.actions-row { display: flex; gap: 6px; margin-top: 6px; }
+.actions-row button { flex: 1; padding: 6px; border-radius: 4px; cursor: pointer; font-size: 12px; }
+.secondary { background: #2a2a3a; border: 1px solid #555; color: #aaa; }
+.secondary:hover { background: #333; color: #ddd; }
+.danger { background: #3a1a1a; border: 1px solid #663333; color: #ff613d; }
+.danger:hover { background: #4a2020; color: #ff8866; }
+
+.dot-blue { background: #37adff; }
+.dot-turquoise { background: #00c79a; }
+.dot-green { background: #51cd00; }
+.dot-yellow { background: #ffcb00; }
+.dot-orange { background: #ff9f00; }
+.dot-red { background: #ff613d; }
+.dot-pink { background: #ff4bda; }
+.dot-purple { background: #af51f5; }
+.dot-toolbar { background: #888; }
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <h1>ContainSite</h1>
+  <div id="container-list"></div>
+  <div class="actions">
+    <button id="regen-all">Regenerate All</button>
+    <div class="actions-row">
+      <button id="prune" class="secondary">Prune Unused</button>
+      <button id="reset" class="danger">Reset All</button>
+    </div>
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -0,0 +1,88 @@
+async function loadContainers() {
+  const containers = await browser.runtime.sendMessage({ type: "getContainerList" });
+  const list = document.getElementById("container-list");
+  list.innerHTML = "";
+
+  for (const c of containers) {
+    const row = document.createElement("div");
+    row.className = "row";
+
+    const dot = document.createElement("span");
+    dot.className = `dot dot-${c.color}`;
+    row.appendChild(dot);
+
+    const nameWrap = document.createElement("div");
+    nameWrap.className = "name";
+    const name = document.createElement("div");
+    name.className = "name-primary";
+    name.textContent = c.name;
+    nameWrap.appendChild(name);
+    if (c.domain) {
+      const domain = document.createElement("div");
+      domain.className = "name-domain";
+      domain.textContent = c.domain;
+      nameWrap.appendChild(domain);
+    }
+    row.appendChild(nameWrap);
+
+    const toggle = document.createElement("input");
+    toggle.type = "checkbox";
+    toggle.className = "toggle";
+    toggle.checked = c.enabled;
+    toggle.addEventListener("change", async () => {
+      await browser.runtime.sendMessage({
+        type: "toggleContainer",
+        cookieStoreId: c.cookieStoreId,
+        enabled: toggle.checked
+      });
+    });
+    row.appendChild(toggle);
+
+    const regen = document.createElement("button");
+    regen.className = "regen";
+    regen.textContent = "New";
+    regen.title = "Generate new fingerprint";
+    regen.addEventListener("click", async () => {
+      regen.textContent = "...";
+      await browser.runtime.sendMessage({
+        type: "regenerateFingerprint",
+        cookieStoreId: c.cookieStoreId
+      });
+      regen.textContent = "OK";
+      setTimeout(() => { regen.textContent = "New"; }, 800);
+    });
+    row.appendChild(regen);
+
+    list.appendChild(row);
+  }
+}
+
+document.getElementById("regen-all").addEventListener("click", async (e) => {
+  e.target.textContent = "Regenerating...";
+  await browser.runtime.sendMessage({ type: "regenerateAll" });
+  e.target.textContent = "Done!";
+  setTimeout(() => { e.target.textContent = "Regenerate All"; }, 800);
+});
+
+document.getElementById("prune").addEventListener("click", async (e) => {
+  e.target.textContent = "Pruning...";
+  const result = await browser.runtime.sendMessage({ type: "pruneContainers" });
+  e.target.textContent = `Removed ${result.pruned}`;
+  setTimeout(() => {
+    e.target.textContent = "Prune Unused";
+    loadContainers();
+  }, 1200);
+});
+
+document.getElementById("reset").addEventListener("click", async (e) => {
+  if (!confirm("Remove all ContainSite containers and data? You will need to log in to all sites again.")) return;
+  e.target.textContent = "Resetting...";
+  await browser.runtime.sendMessage({ type: "resetAll" });
+  e.target.textContent = "Done!";
+  setTimeout(() => {
+    e.target.textContent = "Reset All";
+    loadContainers();
+  }, 1200);
+});
+
+loadContainers();