test: containerized Chrome end-to-end harness that drives the real popup (closes #181 )

`make check` was green while the AddToken screen crashed on every open. `script/lint` is only `prettier --check`, so a used-but-not-imported identifier is invisible until a browser evaluates it. This adds a suite that runs the real popup in a real Chrome and treats any uncaught page error or console.error as a failure. - `script/test-e2e` (with `make test-e2e` as a thin shim) builds `dist/chrome/` and runs `tests/e2e/run.js` inside the Playwright image, pinned by digest. `playwright-core` is pinned to the matching 1.56.0 through `yarn.lock`; the two must be bumped together because the browsers ship inside the image. - Deliberately outside `script/test` and `script/check`: REPO_POLICIES caps `make test` at 20 seconds. Nothing under `tests/e2e/` is named `*.test.js`, so jest cannot pick it up either. - Launches with `channel: "chromium"`; the default headless shell silently refuses to load extensions with no error at all. The extension id is read from the service worker URL, never hardcoded. - All http(s) traffic is intercepted at the browser level and served from fixtures, so the run is deterministic and offline. Unrecognised outbound requests are reported as failures rather than allowed. - A missing build or an unavailable container fails loudly; a skip that looks like a pass is the failure mode this is meant to prevent. - One allowlisted page error, for the libsodium WASM CSP fallback tracked as #182, which is otherwise untouched here. The suite was demonstrated failing against the unfixed tree with `pageerror: showView is not defined` and `pageerror: addressDotHtml is not defined`, so it carries the two one-line import fixes it caught: closes #150 — `showView` restored to the destructure in `src/popup/views/addToken.js`, dropped by a22f33d, which made the AddToken screen unreachable and corrupted the navigation stack. closes #151 — `addressDotHtml` restored in `src/popup/views/transactionDetail.js`, dropped by df031fd, which threw before `showView("transaction")` for every ERC-20 transfer. The shared `renderAddressHtml` helper is not used here on purpose: it hardcodes the `/address/` explorer URL, and this row needs the token-specific `/token/` link.
feat: add About well to settings with build info and debug easter egg (#145 )
2026-08-09 14:24:36 +00:00 · 2026-07-26 18:39:09 +02:00
24 changed files with 1007 additions and 2350 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,4 +1,3 @@
-.git
 node_modules
 .DS_Store
 dist
--- a/6
+++ b/6
@@ -1,4 +1,4 @@
-.PHONY: bootstrap setup install test lint fmt fmt-check check docker hooks build clean dev
+.PHONY: bootstrap setup install test test-e2e lint fmt fmt-check check docker hooks build clean dev

 # Standard targets are thin shims; the implementations live in script/
 # per the scripts-to-rule-them-all pattern (see the Entrypoints section
@@ -16,6 +16,10 @@ install:
 test:
 	@script/test

+# Browser end-to-end suite. Requires docker; not part of check.
+test-e2e:
+	@script/test-e2e
+
 lint:
 	@script/lint

--- a/README.md
+++ b/README.md
@@ -56,6 +56,8 @@ provide:
  git pre-commit hook
 - `script/projectname` — print the project name (used for the Docker image tag)
 - `script/test` — run the test suite (jest)
+- `script/test-e2e` — run the browser end-to-end suite (docker required; see
+  [End-to-End Tests](#end-to-end-tests))
 - `script/lint` — run the linter
 - `script/fmt` — format all files (writes)
 - `script/fmt-check` — check formatting (read-only)
@@ -65,6 +67,35 @@ provide:
 - `script/precommit` — run by the git pre-commit hook; runs `script/check`
 - `script/install-precommit` — install the git pre-commit hook

+## End-to-End Tests
+
+`make test-e2e` builds `dist/chrome/` and drives the **real popup in a real
+Chrome**, loaded as an unpacked MV3 extension inside a pinned
+`mcr.microsoft.com/playwright` container (pinned by digest in `script/test-e2e`;
+docker is required and the suite fails loudly rather than skipping if it is
+unavailable). The suite lives in `tests/e2e/` and is driven by
+`playwright-core`, whose version must stay matched to the container's Playwright
+version — the browsers ship inside the image.
+
+It covers popup load, wallet creation through the UI, the Add Token screen and
+the transaction detail screen for an ERC-20 transfer. All outbound network is
+intercepted at the browser level and served from fixtures in
+`tests/e2e/network.js`, so the run is deterministic and fully offline;
+unrecognised outbound requests are reported as failures rather than silently
+allowed.
+
+**Any uncaught page error or `console.error` fails the run.** That is the point:
+a `ReferenceError` from a used-but-not-imported identifier is invisible to
+`make check` (`script/lint` is only `prettier --check`) but fatal in a browser,
+and this suite exists because exactly that class of bug shipped twice.
+
+`make test-e2e` is deliberately **not** part of `make check` or `make test`.
+`REPO_POLICIES.md` caps `make test` at 20 seconds and a browser suite does not
+fit; nothing in `tests/e2e/` is named `*.test.js`, so jest cannot pick it up
+either. It is also not wired into the Gitea workflow yet — docker-in-docker in
+CI is a separate question. Run it locally before changing anything under
+`src/popup/views/`.
+
 ## Rationale

 Common popular EVM wallets have become bloated with swap UIs, portfolio
--- a/TODO.md
+++ b/TODO.md
@@ -10,21 +10,27 @@

 # Status

-pre-1.0. Tagged v0.1.0 on 2026-02-27. Active development on branch
-feat/issue-144-settings-about (another agent working as of 2026-07-06). Full
-policy file set present; make check on main not verified.
+pre-1.0. Tagged v0.1.0 on 2026-02-27. Working toward the 1.0.0 milestone. Full
+policy file set present. `make check` is green on this branch; a real browser
+end-to-end suite (`make test-e2e`) now exists alongside it, because `make check`
+cannot see a runtime `ReferenceError` in a popup view.

 # Next Step

-Land feat/issue-144-settings-about: finish the settings About well (build info,
-app name and repo link, release date, version click easter egg, git info derived
-inside Docker), resolve the untracked scripts/ directory (commit or gitignore),
-get review, merge to main.
+Verify `main` passes `make check` after this branch merges and fix anything red;
+`main` must always be green.

 # Completed Steps

+- 2026-08-09 Containerized Chrome end-to-end harness (`make test-e2e` /
+  `script/test-e2e`) driving the real popup with all network intercepted, plus
+  the two used-but-not-imported crashes it caught: AddToken unreachable (#150)
+  and TransactionDetail broken for every ERC-20 transfer (#151). Harness
+  demonstrated failing before the fixes and passing after (#181).
 - 2026-07-07 Adopted scripts-to-rule-them-all: `script/` entrypoints, Makefile
  shims, README Entrypoints section
+- 2026-08-09 Landed the settings About well (build info, app name and repo link,
+  release date, version click easter egg) as `23aeae4` (#145).
 - 2026-03-01: About well in settings with build info and easter egg (in flight
  on feature branch); USD display suppressed on testnets (#142); estimated USD
  for ETH in approve-tx view (#141).
@@ -45,9 +51,12 @@ get review, merge to main.

 # Future Steps

- Verify main passes make check after the feature branch merges (not verified
-  2026-07-06 because an agent was active in the tree); fix anything red. main
-  must always be green.
+- Decide the libsodium backend that actually ships (#182) and delete the single
+  allowlist entry it owns in `tests/e2e/harness.js`.
+- Extend the end-to-end suite to the dApp approval signing path (EIP-1193
+  through the real content script, background worker and approval popup), and
+  decide separately whether docker-in-docker makes `make test-e2e` runnable in
+  the Gitea workflow.
 - Prune stale branches: dozens of merged local and remote feature branches
  remain (fix/_, feature/_, tx-\*); delete merged ones locally and on origin.
 - Continue the issue backlog toward a feature-complete wallet, then cut further
--- a/build.js
+++ b/build.js
@@ -11,9 +11,51 @@ function ensureDir(dir) {
    fs.mkdirSync(dir, { recursive: true });
 }

+function getBuildInfo() {
+    const pkg = JSON.parse(
+        fs.readFileSync(path.join(__dirname, "package.json"), "utf8"),
+    );
+    let commitHash = "unknown";
+    try {
+        commitHash = execSync("git rev-parse --short HEAD", {
+            encoding: "utf8",
+        }).trim();
+    } catch (_) {
+        // not a git repo or git not available
+    }
+    let commitHashFull = "unknown";
+    try {
+        commitHashFull = execSync("git rev-parse HEAD", {
+            encoding: "utf8",
+        }).trim();
+    } catch (_) {
+        // not a git repo or git not available
+    }
+    return {
+        version: pkg.version,
+        license: pkg.license,
+        author: pkg.author,
+        commitHash,
+        commitHashFull,
+        buildDate: new Date().toISOString().slice(0, 10),
+    };
+}
+
 async function build() {
    console.log("Building AutistMask extension...");

+    const buildInfo = getBuildInfo();
+    console.log("Build info:", buildInfo);
+
+    const define = {
+        __BUILD_VERSION__: JSON.stringify(buildInfo.version),
+        __BUILD_LICENSE__: JSON.stringify(buildInfo.license),
+        __BUILD_AUTHOR__: JSON.stringify(buildInfo.author),
+        __BUILD_COMMIT__: JSON.stringify(buildInfo.commitHash),
+        __BUILD_COMMIT_FULL__: JSON.stringify(buildInfo.commitHashFull),
+        __BUILD_DATE__: JSON.stringify(buildInfo.buildDate),
+    };
+
    // compile tailwind CSS
    console.log("Compiling Tailwind CSS...");
    const tailwindInput = path.join(SRC, "popup", "styles", "main.css");
@@ -38,6 +80,7 @@ async function build() {
            platform: "browser",
            target: ["chrome110", "firefox110"],
            minify: true,
+            define,
        });

        // bundle background script
@@ -49,6 +92,7 @@ async function build() {
            platform: "browser",
            target: ["chrome110", "firefox110"],
            minify: true,
+            define,
        });

        // bundle content script
@@ -60,6 +104,7 @@ async function build() {
            platform: "browser",
            target: ["chrome110", "firefox110"],
            minify: true,
+            define,
        });

        // bundle inpage script (injected into page context, separate file)
@@ -71,6 +116,7 @@ async function build() {
            platform: "browser",
            target: ["chrome110", "firefox110"],
            minify: true,
+            define,
        });

        // copy popup HTML
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
        "@tailwindcss/cli": "^4.2.1",
        "esbuild": "^0.27.3",
        "jest": "^30.2.0",
+        "playwright-core": "1.56.0",
        "prettier": "^3.8.1",
        "tailwindcss": "^4.2.1"
    },
--- a/script/test-e2e
+++ b/script/test-e2e
@@ -0,0 +1,48 @@
+#!/bin/sh
+# script/test-e2e: build the extension and drive the real popup in a real
+# Chromium inside a pinned container. Our own extension to
+# scripts-to-rule-them-all.
+#
+# Deliberately NOT called by script/check or script/test: REPO_POLICIES.md
+# caps make test at 20 seconds and a browser suite does not fit. Run it
+# yourself before touching popup views; it is the only check that can see
+# a used-but-not-imported identifier blow up at runtime.
+set -eu
+
+ROOT="$(cd "$(dirname "$0")/.." && pwd -P)"
+
+# mcr.microsoft.com/playwright:v1.56.0-noble, 2026-08-09
+#
+# The playwright-core devDependency is pinned to the matching Playwright
+# version (1.56.0) and the two must be bumped together: the browsers ship
+# inside this image, and playwright-core looks for the exact browser
+# revision its own version expects. A mismatch fails at launch.
+IMAGE="mcr.microsoft.com/playwright@sha256:35246d87a7c88ea9b771c65d33171b2611b02a8253b4b12ce6f94376c55f99f2"
+
+main() {
+    cd "$ROOT"
+
+    if ! command -v docker >/dev/null 2>&1; then
+        echo "test-e2e: docker is required to run the e2e suite" >&2
+        exit 1
+    fi
+
+    echo "Building extension for e2e..."
+    yarn run build 2>&1
+
+    echo "Running e2e suite in the pinned Playwright container..."
+    # --ipc=host: Chromium's shared-memory needs more than the default
+    #   64MB /dev/shm or renderers crash.
+    # --user: keep files the suite touches owned by the caller, not root.
+    # HOME=/tmp: the mapped uid has no home directory in the image.
+    docker run --rm \
+        --ipc=host \
+        --user "$(id -u):$(id -g)" \
+        -e HOME=/tmp \
+        -v "$ROOT:/work" \
+        -w /work \
+        "$IMAGE" \
+        node tests/e2e/run.js
+}
+
+main "$@"
--- a/scripts/apply-enrichment.mjs
+++ b/scripts/apply-enrichment.mjs
@@ -1,161 +0,0 @@
-#!/usr/bin/env node
-// Apply enrichment data to tokenList.js: add name + url fields to each token.
-
-import { readFileSync, writeFileSync } from "fs";
-
-const enrichment = JSON.parse(
-    readFileSync("scripts/token-enrichment.json", "utf8"),
-);
-
-// Well-known URLs for major tokens not in ethereum-lists.
-// These are official project websites verified from public sources.
-const EXTRA_URLS = {
-    "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2": "https://weth.io",
-    "0xdAC17F958D2ee523a2206206994597C13D831ec7": "https://tether.to",
-    "0xB8c77482e45F1F44dE1745F52C74426C631bDD52": "https://www.bnbchain.org",
-    "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48": "https://www.circle.com/usdc",
-    "0xdC035D45d973E3EC169d2276DDab16f1e407384F": "https://sky.money",
-    "0x2AF5D2aD76741191D15Dfe7bF6aC92d4Bd912Ca3": "https://www.bitfinex.com",
-    "0x514910771AF9Ca656af840dff83E8264EcF986CA": "https://chain.link",
-    "0x4c9EDD5852cd905f086C759E8383e09bff1E68B3": "https://ethena.fi",
-    "0x8d0D000Ee44948FC98c9B98A4FA4921476f08B0d":
-        "https://www.worldlibertyfinancial.com",
-    "0x6B175474E89094C44Da98b954EedeAC495271d0F": "https://makerdao.com",
-    "0x6c3ea9036406852006290770BEdFcAbA0e23A0e8":
-        "https://www.paypal.com/us/digital-wallet/manage-money/crypto/pyusd",
-    "0x95aD61b0a150d79219dCF64E1E6Cc01f0B64C4cE": "https://shibatoken.com",
-    "0xdA5e1988097297dCdc1f90D4dFE7909e847CBeF6":
-        "https://www.worldlibertyfinancial.com",
-    "0xA0b73E1Ff0B80914AB6fe0444E65848C4C34450b": "https://crypto.com",
-    "0x582d872A1B094FC48F5DE31D3B73F2D9bE47def1": "https://ton.org",
-    "0x68749665FF8D2d112Fa859AA293F07A622782F38": "https://gold.tether.to",
-    "0x196C20DA81Fbc324EcdF55501e95Ce9f0bD84d14": "https://polkadot.network",
-    "0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984": "https://uniswap.org",
-    "0x45804880De22913dAFE09f4980848ECE6EcbAf78":
-        "https://www.paxos.com/paxgold",
-    "0x3c3a81e81dc49A522A592e7622A7E711c06bf354": "https://www.mantle.xyz",
-    "0x7Fc66500c84A76Ad7e9c93437bFc5Ac33E2DDaE9": "https://aave.com",
-    "0x75231F58b43240C9718Dd58B4967c5114342a86c": "https://www.okx.com",
-    "0x6982508145454Ce325dDbE47a25d4ec3d2311933": "https://www.pepe.vip",
-    "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599": "https://wbtc.network",
-    "0xae7ab96520DE3A18E5e111B5EaAb095312D7fE84": "https://lido.fi",
-    "0x5A98FcBEA516Cf06857215779Fd812CA3beF1B32": "https://lido.fi",
-    "0xC18360217D8F7Ab5e7c516566761Ea12Ce7F9D72": "https://ens.domains",
-    "0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0": "https://polygon.technology",
-    "0x9f8F72aA9304c8B593d555F12eF6589cC3A579A2": "https://makerdao.com",
-    "0xD533a949740bb3306d119CC777fa900bA034cd52": "https://curve.fi",
-    "0x111111111117dC0aa78b770fA6A738034120C302": "https://1inch.io",
-    "0x163f8C2467924be0ae7B5347228CABF260318753": "https://worldcoin.org",
-    "0xba100000625a3754423978a60c9317c58a424e3D": "https://balancer.fi",
-    "0xC011a73ee8576Fb46F5E1c5751cA3B9Fe0af2a6F": "https://synthetix.io",
-    "0x1a7e4e63778B4f12a199C062f3eFdD288afCBce8": "https://www.euler.finance",
-    "0xBBbbCA6A901c926F240b89EacB641d8Aec7AEafD": "https://loopring.org",
-    "0xC669928185DbCE49d2230CC9B0979BE6DC797957": "https://bitstable.finance",
-    "0x7f39C581F595B53c5cb19bD0b3f8dA6c935E2Ca0": "https://lido.fi",
-    "0xBe9895146f7AF43049ca1c1AE358B0541Ea49704":
-        "https://www.coinbase.com/cbeth",
-    "0xfAbA6f8e4a5E8Ab82F62fe7C39859FA577269BE3": "https://ondo.finance",
-    "0x0C10bF8FcB7Bf5412187A595ab97a3609160b5c6": "https://decentraland.org",
-    "0x6De037ef9aD2725EB40118Bb1702EBb27e4Aeb24": "https://www.render.com",
-    "0x4a220E6096B25EADb88358cb44068A3248254675": "https://www.quant.network",
-    "0xba5BDe662c17e2aDFF1075610382B9B691296350": "https://superrare.com",
-    "0x15D4c048F83bd7e37d49eA4C83a07267Ec4203dA": "https://galxe.com",
-    "0xc00e94Cb662C3520282E6f5717214004A7f26888": "https://compound.finance",
-    "0xE41d2489571d322189246DaFA5ebDe1F4699F498": "https://0x.org",
-    "0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e": "https://yearn.fi",
-    "0x6fB3e0A217407EFFf7Ca062D46c26E5d60a14d69": "https://iotex.io",
-    "0xD31a59c85aE9D8edEFec411D448f90841571b89c": "https://solana.com",
-    "0xa1faa113cbE53436Df28FF0aEe54275c13B40975": "https://alphafinance.io",
-    "0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF": "https://immutable.com",
-    "0x0f5D2fB29fb7d3CFeE444a200298f468908cC942": "https://decentraland.org",
-    "0x3845badAde8e6dFF049820680d1F14bD3903a5d0": "https://www.sandbox.game",
-    "0x4d224452801ACEd8B2F0aebE155379bb5D594381": "https://apecoin.com",
-    "0x6810e776880C02933D47DB1b9fc05908e5386b96": "https://gnosis.io",
-    "0x5f98805A4E8be255a32880FDeC7F6728C6568bA0": "https://www.liquity.org",
-    "0xd26114cd6EE289AccF82350c8d8487fedB8A0C07": "https://omg.network",
-    "0x0D8775F648430679A709E98d2b0Cb6250d2887EF":
-        "https://basicattentiontoken.org",
-    "0xc944E90C64B2c07662A292be6244BDf05Cda44a7": "https://thegraph.com",
-    "0x1985365e9f78359a9B6AD760e32412f4a445E862": "https://augur.net",
-    "0x4E15361FD6b4BB609Fa63C81A2be19d873717870": "https://fantom.foundation",
-    "0x853d955aCEf822Db058eb8505911ED77F175b99e": "https://frax.finance",
-    "0x0000000000085d4780B73119b644AE5ecd22b376": "https://www.trueusd.com",
-    "0x0cEC1A9154Ff802e7934Fc916Ed7Ca50bDE6844e": "https://polymesh.network",
-    "0x956F47F50A910163D8BF957Cf5846D573E7f87CA": "https://fei.money",
-    "0x3432B6A60D23Ca0dFCa7761B7ab56459D9C964D0": "https://frax.finance",
-    "0xf939E0A03FB07F59A73314E73794Be0E57ac1b4E": "https://curve.fi",
-    "0x0100546F2cD4C9D97f798fFC9755E47865FF7Ee6": "https://alchemix.fi",
-    "0x808507121B80c02388fAd14726482e061B8da827": "https://pendle.finance",
-    "0xCa14007Eff0dB1f8135f4C25B34De49AB0d42766": "https://starknet.io",
-    "0x8457CA5040ad67fdebbCC8EdCE889A335Bc0fbFB": "https://alt.layer",
-    "0x4C19596f5aAfF459fA38B0f7eD92F11AE6543784": "https://www.truflation.com",
-    "0xB50721BCf8d664c30412Cfbc6cf7a15145234ad1": "https://arbitrum.io",
-    "0x912CE59144191C1204E64559FE8253a0e49E6548": "https://arbitrum.io",
-    "0x6985884C4392D348587B19cb9eAAf157F13271cd": "https://layerzero.network",
-    "0xFe0c30065B384F05761f15d0CC899D4F9F9Cc0eB": "https://ethfi.org",
-    "0x18084fbA666a33d37592fA2633fD49a74DD93a88": "https://tbtc.network",
-    "0x9D39A5DE30e57443BfF2A8307A4256c8797A3497": "https://suilend.fi",
-    "0x5283D291DBCF85356A21bA090E6db59121208b44": "https://blur.io",
-    "0x43Dfc4159D86F3A37A5A4B3D4580b888ad7d4DDd": "https://dydx.exchange",
-    "0xCf0C122c6b73ff809C693DB761e7BaeBe62b6a2E": "https://floki.com",
-    "0xe53EC727dbDEB9E2d5456c3be40cFF031AB40A55": "https://superfarm.com",
-    "0x32353A6C91143bfd6C7d363B546e62a9A2489A20": "https://www.agora.finance",
-    "0x1aBaEA1f7C830bD89Acc67eC4af516284b1bC33c": "https://www.euro-coin.com",
-    "0x1a03eF3d1a80b5f214e468ACD97F55714E049393": "https://gemspad.io",
-    "0x7122985656e38BDC0302Db86685bb972b145bD3C": "https://stone.fi",
-    "0xa35923162C49cF95e6BF26623385eb431ad920D3": "https://www.turbo-eth.com",
-    "0xdBdb4d16EdA451D0503b854CF79D55697F90c8DF": "https://alchemix.fi",
-    "0x08c32b0726C5684024ea6e141C50aDe9690bBdcc": "https://stratis.io",
-    "0x65Ef703f5594D2573eb71Aaf55BC0CB548492df4": "https://multichain.org",
-    "0x1151CB3d861920e07a38e03eEAd12C32178567F6": "https://bonk.com",
-    "0x090185f2135308BaD17527004364eBcC2D37e5F6": "https://spell.club",
-    "0xAf5191B0De278C7286d6C7CC6ab6BB8A73bA2Cd6": "https://stargate.finance",
-};
-
-// Apply extra URLs where enrichment has none
-for (const [addr, url] of Object.entries(EXTRA_URLS)) {
-    const e = enrichment[addr];
-    if (e && !e.url) {
-        e.url = url;
-    }
-}
-
-// Read original tokenList.js
-const original = readFileSync("src/shared/tokenList.js", "utf8");
-
-// Replace each token block: add name and url after decimals
-let result = original;
-let replacements = 0;
-
-for (const [addr, data] of Object.entries(enrichment)) {
-    // Escape special regex characters in the address
-    const escaped = addr.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-
-    // Match the token block: { address: "...", symbol: "...", decimals: N, }
-    // The closing }, may have trailing whitespace
-    const blockRe = new RegExp(
-        `(\\{\\s*address:\\s*"${escaped}",\\s*symbol:\\s*"[^"]+",\\s*decimals:\\s*\\d+),?(\\s*\\})`,
-    );
-
-    const match = result.match(blockRe);
-    if (!match) {
-        console.error(`WARNING: Could not find block for ${addr}`);
-        continue;
-    }
-
-    // Build replacement: original fields + name + url
-    const nameEscaped = data.name.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
-    const urlEscaped = data.url.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
-    const replacement =
-        match[1] +
-        `,\n        name: "${nameEscaped}",` +
-        `\n        url: "${urlEscaped}",` +
-        match[2];
-
-    result = result.replace(blockRe, replacement);
-    replacements++;
-}
-
-console.error(`Applied ${replacements} enrichments to tokenList.js`);
-writeFileSync("src/shared/tokenList.js", result);
-console.error("Done!");
--- a/scripts/enrich-tokens.mjs
+++ b/scripts/enrich-tokens.mjs
@@ -1,87 +0,0 @@
-#!/usr/bin/env node
-// Temporary script: fetch name + homepage URL for every token in tokenList.js
-// Phase 1: CoinGecko /coins/list (1 bulk call) for names — gets 100%
-// Phase 2: ethereum-lists GitHub repo for project URLs — gets ~15%
-
-import { readFileSync, writeFileSync } from "fs";
-
-const src = readFileSync("src/shared/tokenList.js", "utf8");
-
-const tokens = [];
-const re =
-    /\{\s*address:\s*"(0x[a-fA-F0-9]{40})",\s*symbol:\s*"([^"]+)",\s*decimals:\s*(\d+)/g;
-let m;
-while ((m = re.exec(src)) !== null) {
-    tokens.push({ address: m[1], symbol: m[2], decimals: parseInt(m[3]) });
-}
-console.error(`Parsed ${tokens.length} tokens`);
-
-const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-
-// --- Phase 1: bulk names from CoinGecko ---
-console.error("Fetching CoinGecko coins list...");
-const listResp = await fetch(
-    "https://api.coingecko.com/api/v3/coins/list?include_platform=true",
-);
-if (!listResp.ok) throw new Error(`CoinGecko list HTTP ${listResp.status}`);
-const coins = await listResp.json();
-
-const addrMap = new Map();
-for (const coin of coins) {
-    const eth = (coin.platforms?.ethereum || "").toLowerCase().trim();
-    if (eth && eth.startsWith("0x")) {
-        addrMap.set(eth, { name: coin.name, id: coin.id });
-    }
-}
-console.error(`CoinGecko map: ${addrMap.size} Ethereum tokens`);
-
-const enriched = new Map();
-for (const t of tokens) {
-    const info = addrMap.get(t.address.toLowerCase());
-    enriched.set(t.address, { name: info?.name || t.symbol, url: "" });
-}
-console.error(
-    `Matched ${[...enriched.values()].filter((e) => e.name).length}/${tokens.length} names`,
-);
-
-// --- Phase 2: ethereum-lists GitHub for URLs ---
-console.error("Fetching URLs from ethereum-lists GitHub...");
-const CONCURRENT = 10;
-let urlsFound = 0;
-
-for (let i = 0; i < tokens.length; i += CONCURRENT) {
-    const batch = tokens.slice(i, i + CONCURRENT);
-    await Promise.allSettled(
-        batch.map(async (t) => {
-            try {
-                const r = await fetch(
-                    `https://raw.githubusercontent.com/ethereum-lists/tokens/master/tokens/eth/${t.address}.json`,
-                );
-                if (!r.ok) return;
-                const data = await r.json();
-                const website = (data.website || "").trim();
-                if (website && website !== "https://") {
-                    enriched.get(t.address).url = website;
-                    urlsFound++;
-                }
-            } catch {
-                // ignore
-            }
-        }),
-    );
-    if (i % 100 === 0) {
-        console.error(
-            `  GitHub: ${Math.min(i + CONCURRENT, tokens.length)}/${tokens.length}, ${urlsFound} URLs`,
-        );
-    }
-    await sleep(200);
-}
-console.error(`Phase 2 done: ${urlsFound} URLs from ethereum-lists`);
-
-// --- Output ---
-const output = {};
-for (const [addr, e] of enriched) {
-    output[addr] = { name: e.name, url: e.url };
-}
-writeFileSync("scripts/token-enrichment.json", JSON.stringify(output, null, 2));
-console.error(`Done! ${tokens.length} names, ${urlsFound} URLs.`);
--- a/scripts/token-enrichment.json
+++ b/scripts/token-enrichment.json
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -1002,6 +1002,64 @@
                    </p>
                    <div id="settings-denied-sites"></div>
                </div>
+
+                <div class="bg-well p-3 mx-1 mb-3">
+                    <h3 class="font-bold mb-1">About</h3>
+                    <p class="text-xs mb-2">
+                        <a
+                            href="https://git.eeqj.de/sneak/AutistMask"
+                            class="underline decoration-dashed"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            >AutistMask</a
+                        >
+                        — Minimal Ethereum wallet browser extension.
+                    </p>
+                    <div class="text-xs">
+                        <div class="mb-1">
+                            <span class="text-muted">License:</span>
+                            <span id="about-license"></span>
+                        </div>
+                        <div class="mb-1">
+                            <span class="text-muted">Author:</span>
+                            <span id="about-author"></span>
+                        </div>
+                        <div class="mb-1">
+                            <span class="text-muted">Version:</span>
+                            <span
+                                id="about-version"
+                                class="cursor-pointer select-none"
+                            ></span>
+                        </div>
+                        <div class="mb-1">
+                            <span class="text-muted">Release date:</span>
+                            <span id="about-release-date"></span>
+                        </div>
+                        <div>
+                            <span class="text-muted">Commit:</span>
+                            <a
+                                id="about-commit-link"
+                                class="underline decoration-dashed"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            ></a>
+                        </div>
+                    </div>
+                </div>
+
+                <div
+                    id="settings-debug-well"
+                    class="bg-well p-3 mx-1 mb-3"
+                    style="display: none"
+                >
+                    <h3 class="font-bold mb-1">Debug</h3>
+                    <label
+                        class="text-xs flex items-center gap-1 cursor-pointer"
+                    >
+                        <input type="checkbox" id="settings-debug-mode" />
+                        Enable debug mode
+                    </label>
+                </div>
            </div>

            <!-- ============ DELETE WALLET CONFIRM ============ -->
--- a/src/popup/index.js
+++ b/src/popup/index.js
@@ -1,18 +1,14 @@
 // AutistMask popup entry point.
 // Loads state, initializes views, triggers first render.

-const { DEBUG } = require("../shared/constants");
-const {
-    state,
-    saveState,
-    loadState,
-    currentNetwork,
-} = require("../shared/state");
+const { state, saveState, loadState } = require("../shared/state");
+const { setRuntimeDebug } = require("../shared/log");
 const { refreshPrices } = require("../shared/prices");
 const { refreshBalances } = require("../shared/balances");
 const {
    $,
    showView,
+    updateDebugBanner,
    setRenderMain,
    pushCurrentView,
    goBack,
@@ -209,21 +205,11 @@ async function init() {
    await loadState();
    applyTheme(state.theme);

-    const net = currentNetwork();
-    if (DEBUG || net.isTestnet) {
-        const banner = document.createElement("div");
-        banner.id = "debug-banner";
-        if (DEBUG && net.isTestnet) {
-            banner.textContent = "DEBUG / INSECURE [TESTNET]";
-        } else if (net.isTestnet) {
-            banner.textContent = "[TESTNET]";
-        } else {
-            banner.textContent = "DEBUG / INSECURE";
-        }
-        banner.style.cssText =
-            "background:#c00;color:#fff;text-align:center;font-size:10px;padding:1px 0;font-family:monospace;position:sticky;top:0;z-index:9999;";
-        document.body.prepend(banner);
-    }
+    // Sync runtime debug flag from persisted state before first render
+    setRuntimeDebug(state.debugMode);
+
+    // Create the debug/testnet banner if needed (uses runtime debug state)
+    updateDebugBanner();

    // Auto-default active address
    if (
--- a/src/popup/styles/main.css
+++ b/src/popup/styles/main.css
@@ -10,7 +10,7 @@
    --color-border: #000000;
    --color-border-light: #cccccc;
    --color-hover: #eeeeee;
-    --color-well: #f5f5f5;
+    --color-well: #e8e8e8;
    --color-danger-well: #fef2f2;
    --color-section: #dddddd;
 }
--- a/src/popup/views/addToken.js
+++ b/src/popup/views/addToken.js
@@ -1,4 +1,4 @@
-const { $, showFlash, goBack } = require("./helpers");
+const { $, showView, showFlash, goBack } = require("./helpers");
 const { getTopTokens } = require("../../shared/tokenList");
 const { state, saveState } = require("../../shared/state");
 const { lookupTokenInfo } = require("../../shared/balances");
--- a/src/popup/views/helpers.js
+++ b/src/popup/views/helpers.js
@@ -1,6 +1,6 @@
 // Shared DOM helpers used by all views.

-const { DEBUG } = require("../../shared/constants");
+const { isDebug } = require("../../shared/log");
 const {
    formatUsd,
    getPrice,
@@ -59,19 +59,37 @@ function showView(name) {
    clearFlash();
    state.currentView = name;
    saveState();
+    updateDebugBanner(name);
+}
+
+// Create or update the debug/insecure warning banner.
+// Called on every view switch and after the settings debug toggle changes.
+// The banner is shown when the compile-time DEBUG constant is true OR when
+// the user has enabled runtime debug mode via the settings easter egg, OR
+// when the active network is a testnet.
+function updateDebugBanner(viewName) {
+    const debug = isDebug();
    const net = currentNetwork();
-    if (DEBUG || net.isTestnet) {
-        const banner = document.getElementById("debug-banner");
-        if (banner) {
-            if (DEBUG && net.isTestnet) {
-                banner.textContent =
-                    "DEBUG / INSECURE [TESTNET] (" + name + ")";
+    const show = debug || net.isTestnet;
+    let banner = document.getElementById("debug-banner");
+    if (show) {
+        if (!banner) {
+            banner = document.createElement("div");
+            banner.id = "debug-banner";
+            banner.style.cssText =
+                "background:#c00;color:#fff;text-align:center;font-size:10px;padding:1px 0;font-family:monospace;position:sticky;top:0;z-index:9999;";
+            document.body.prepend(banner);
+        }
+        const suffix = viewName ? " (" + viewName + ")" : "";
+        if (debug && net.isTestnet) {
+            banner.textContent = "DEBUG / INSECURE [TESTNET]" + suffix;
        } else if (net.isTestnet) {
-                banner.textContent = "[TESTNET]";
+            banner.textContent = "[TESTNET]" + suffix;
        } else {
-                banner.textContent = "DEBUG / INSECURE (" + name + ")";
-            }
+            banner.textContent = "DEBUG / INSECURE" + suffix;
        }
+    } else if (banner) {
+        banner.remove();
    }
 }

@@ -417,6 +435,7 @@ module.exports = {
    showError,
    hideError,
    showView,
+    updateDebugBanner,
    setRenderMain,
    pushCurrentView,
    goBack,
--- a/src/popup/views/settings.js
+++ b/src/popup/views/settings.js
@@ -1,8 +1,10 @@
 const {
    $,
    showView,
+    updateDebugBanner,
    showFlash,
    escapeHtml,
+    flashCopyFeedback,
    goBack,
    pushCurrentView,
 } = require("./helpers");
@@ -10,12 +12,23 @@ const { applyTheme } = require("../theme");
 const { state, saveState, currentNetwork } = require("../../shared/state");
 const { NETWORKS, SUPPORTED_CHAIN_IDS } = require("../../shared/networks");
 const { onChainSwitch } = require("../../shared/chainSwitch");
-const { log, debugFetch } = require("../../shared/log");
+const { log, debugFetch, setRuntimeDebug } = require("../../shared/log");
 const deleteWallet = require("./deleteWallet");
+const {
+    BUILD_VERSION,
+    BUILD_LICENSE,
+    BUILD_AUTHOR,
+    BUILD_COMMIT,
+    BUILD_DATE,
+    GITEA_COMMIT_URL,
+} = require("../../shared/buildInfo");

 const runtime =
    typeof browser !== "undefined" ? browser.runtime : chrome.runtime;

+let versionClickCount = 0;
+let versionClickTimer = null;
+
 function renderSiteList(containerId, siteMap, stateKey) {
    const container = $(containerId);
    const hostnames = [...new Set(Object.values(siteMap).flat())];
@@ -142,6 +155,28 @@ function show() {
    renderSiteLists();
    renderWalletListSettings();

+    // Populate About well
+    $("about-license").textContent = BUILD_LICENSE;
+    // Show only the name part of the author field (strip email)
+    const authorName = BUILD_AUTHOR.replace(/\s*<[^>]+>/, "");
+    $("about-author").textContent = authorName;
+    $("about-version").textContent = BUILD_VERSION;
+    $("about-release-date").textContent = BUILD_DATE;
+    $("about-commit-link").textContent = BUILD_COMMIT;
+    $("about-commit-link").href = GITEA_COMMIT_URL;
+
+    // Reset version click counter each time settings opens
+    versionClickCount = 0;
+
+    // Show debug well if debug mode is already enabled
+    const debugWell = $("settings-debug-well");
+    if (state.debugMode) {
+        debugWell.style.display = "";
+    } else {
+        debugWell.style.display = "none";
+    }
+    $("settings-debug-mode").checked = state.debugMode;
+
    showView("settings");
 }

@@ -289,6 +324,66 @@ function init(ctx) {
        ctx.showSettingsAddTokenView,
    );

+    // Bright saturated colors for easter egg flashes (clicks 6–10)
+    const easterEggColors = [
+        "#ff0055", // hot pink
+        "#00cc44", // vivid green
+        "#3366ff", // electric blue
+        "#ff9900", // bright orange
+        "#aa00ff", // vivid purple
+    ];
+
+    // Easter egg: click version 10 times to reveal the debug well.
+    // Each click does a copy-flash animation. After 5 clicks, each
+    // additional click flashes a different bright saturated color.
+    $("about-version").addEventListener("click", () => {
+        versionClickCount++;
+        clearTimeout(versionClickTimer);
+        // Reset counter if user stops clicking for 3 seconds
+        versionClickTimer = setTimeout(() => {
+            versionClickCount = 0;
+        }, 3000);
+
+        const el = $("about-version");
+
+        if (versionClickCount > 5) {
+            // Colored flash for clicks 6–10
+            const colorIdx = versionClickCount - 6;
+            const color = easterEggColors[colorIdx % easterEggColors.length];
+            el.classList.remove("copy-flash-fade");
+            el.style.backgroundColor = color;
+            el.style.color = "#ffffff";
+            setTimeout(() => {
+                el.style.backgroundColor = "";
+                el.style.color = "";
+                el.classList.add("copy-flash-fade");
+                setTimeout(() => {
+                    el.classList.remove("copy-flash-fade");
+                }, 275);
+            }, 75);
+        } else {
+            // Standard copy-flash for clicks 1–5
+            flashCopyFeedback(el);
+        }
+
+        if (versionClickCount >= 10) {
+            versionClickCount = 0;
+            clearTimeout(versionClickTimer);
+            $("settings-debug-well").style.display = "";
+        }
+    });
+
+    // Debug mode toggle — update runtime flag, persist, and re-render banner
+    $("settings-debug-mode").addEventListener("change", async () => {
+        state.debugMode = $("settings-debug-mode").checked;
+        setRuntimeDebug(state.debugMode);
+        await saveState();
+        updateDebugBanner(state.currentView);
+    });
+
+    // Sync runtime debug flag on init
+    setRuntimeDebug(state.debugMode);
+
    $("btn-settings-back").addEventListener("click", () => {
        goBack();
    });
--- a/src/popup/views/transactionDetail.js
+++ b/src/popup/views/transactionDetail.js
@@ -7,6 +7,7 @@ const {
    showFlash,
    flashCopyFeedback,
    addressTitle,
+    addressDotHtml,
    escapeHtml,
    isoDate,
    timeAgo,
--- a/src/shared/buildInfo.js
+++ b/src/shared/buildInfo.js
@@ -0,0 +1,35 @@
+// Build-time constants injected by esbuild define in build.js.
+// These globals are replaced at bundle time with string literals.
+
+/* global __BUILD_VERSION__, __BUILD_LICENSE__, __BUILD_AUTHOR__,
+          __BUILD_COMMIT__, __BUILD_COMMIT_FULL__, __BUILD_DATE__ */
+
+const BUILD_VERSION =
+    typeof __BUILD_VERSION__ !== "undefined" ? __BUILD_VERSION__ : "dev";
+const BUILD_LICENSE =
+    typeof __BUILD_LICENSE__ !== "undefined" ? __BUILD_LICENSE__ : "GPL-3.0";
+const BUILD_AUTHOR =
+    typeof __BUILD_AUTHOR__ !== "undefined"
+        ? __BUILD_AUTHOR__
+        : "sneak <sneak@sneak.berlin>";
+const BUILD_COMMIT =
+    typeof __BUILD_COMMIT__ !== "undefined" ? __BUILD_COMMIT__ : "unknown";
+const BUILD_COMMIT_FULL =
+    typeof __BUILD_COMMIT_FULL__ !== "undefined"
+        ? __BUILD_COMMIT_FULL__
+        : "unknown";
+const BUILD_DATE =
+    typeof __BUILD_DATE__ !== "undefined" ? __BUILD_DATE__ : "unknown";
+
+const GITEA_COMMIT_URL =
+    "https://git.eeqj.de/sneak/AutistMask/commit/" + BUILD_COMMIT_FULL;
+
+module.exports = {
+    BUILD_VERSION,
+    BUILD_LICENSE,
+    BUILD_AUTHOR,
+    BUILD_COMMIT,
+    BUILD_COMMIT_FULL,
+    BUILD_DATE,
+    GITEA_COMMIT_URL,
+};
--- a/src/shared/log.js
+++ b/src/shared/log.js
@@ -1,12 +1,27 @@
 // Leveled logger. Outputs to console with [AutistMask] prefix.
-// Level is DEBUG when the DEBUG constant is true, INFO otherwise.
+// Level is DEBUG when the compile-time DEBUG constant is true or the runtime
+// debugMode state flag is enabled.  The runtime flag is checked lazily so it
+// responds immediately when toggled in settings.

 const { DEBUG } = require("./constants");

 const LEVELS = { debug: 0, info: 1, warn: 2, error: 3 };
-const threshold = DEBUG ? LEVELS.debug : LEVELS.info;
+
+// Runtime debug mode flag — set by settings.js when the user toggles debug
+// mode via the easter egg.  Kept here as a simple mutable reference so it can
+// be updated without circular dependency issues with state.js.
+let _runtimeDebug = false;
+
+function setRuntimeDebug(enabled) {
+    _runtimeDebug = enabled;
+}
+
+function isDebug() {
+    return DEBUG || _runtimeDebug;
+}

 function emit(level, method, args) {
+    const threshold = isDebug() ? LEVELS.debug : LEVELS.info;
    if (LEVELS[level] >= threshold) {
        console[method]("[AutistMask]", ...args);
    }
@@ -37,4 +52,4 @@ async function debugFetch(url, opts) {
    return resp;
 }

-module.exports = { log, debugFetch };
+module.exports = { log, debugFetch, setRuntimeDebug, isDebug };
--- a/src/shared/state.js
+++ b/src/shared/state.js
@@ -29,6 +29,7 @@ const DEFAULT_STATE = {
    fraudContracts: [],
    tokenHolderCache: {},
    theme: "system",
+    debugMode: false,
 };

 const state = {
@@ -68,6 +69,7 @@ async function saveState() {
        fraudContracts: state.fraudContracts,
        tokenHolderCache: state.tokenHolderCache,
        theme: state.theme,
+        debugMode: state.debugMode,
        currentView: state.currentView,
        selectedWallet: state.selectedWallet,
        selectedAddress: state.selectedAddress,
@@ -128,6 +130,8 @@ async function loadState() {
        state.fraudContracts = saved.fraudContracts || [];
        state.tokenHolderCache = saved.tokenHolderCache || {};
        state.theme = saved.theme || "system";
+        state.debugMode =
+            saved.debugMode !== undefined ? saved.debugMode : false;
        state.currentView = saved.currentView || null;
        state.selectedWallet =
            saved.selectedWallet !== undefined ? saved.selectedWallet : null;
--- a/tests/e2e/harness.js
+++ b/tests/e2e/harness.js
@@ -0,0 +1,188 @@
+// End-to-end harness: launches a real Chromium with the unpacked MV3
+// build loaded, collects every uncaught page error and console.error, and
+// exposes the popup flows the tests drive.
+//
+// This runs inside the pinned Playwright container; see script/test-e2e.
+// It is deliberately NOT part of make check — REPO_POLICIES.md caps
+// make test at 20 seconds and a browser suite does not fit.
+
+"use strict";
+
+const fs = require("fs");
+const os = require("os");
+const path = require("path");
+
+const { chromium } = require("playwright-core");
+const { installNetworkStubs } = require("./network");
+
+const REPO_ROOT = path.resolve(__dirname, "..", "..");
+const EXT_PATH = path.join(REPO_ROOT, "dist", "chrome");
+
+// Page errors that are known, tracked, and deliberately tolerated. Every
+// entry must name the issue that will remove it. This list is the one
+// concession in an otherwise zero-tolerance policy: an uncaught error is
+// how this harness caught issue #150 in the first place.
+const ALLOWED_ERRORS = [
+    {
+        // libsodium ships a WASM build and an asm.js fallback. The
+        // extension CSP (script-src 'self', with no wasm-unsafe-eval)
+        // refuses the WASM module on every popup load; libsodium catches
+        // it and falls back to asm.js, so the wallet works. Deciding
+        // which backend actually ships is issue #182, and this entry gets
+        // deleted when that lands.
+        issue: "#182",
+        pattern: /Refused to compile or instantiate WebAssembly module/,
+    },
+];
+
+function isAllowed(text) {
+    return ALLOWED_ERRORS.some((a) => a.pattern.test(text));
+}
+
+class ErrorCollector {
+    constructor() {
+        this.entries = [];
+    }
+
+    record(kind, text) {
+        const line = kind + ": " + String(text).split("\n")[0];
+        if (isAllowed(line)) return;
+        this.entries.push(line);
+    }
+
+    mark() {
+        return this.entries.length;
+    }
+
+    since(mark) {
+        return this.entries.slice(mark);
+    }
+}
+
+function attachErrorListeners(ctx, errors) {
+    const attachPage = (page) => {
+        page.on("pageerror", (err) => {
+            errors.record("pageerror", err.message || String(err));
+        });
+        page.on("console", (msg) => {
+            if (msg.type() === "error") {
+                errors.record("console.error", msg.text());
+            }
+        });
+    };
+    ctx.pages().forEach(attachPage);
+    ctx.on("page", attachPage);
+    // Per-page listeners only: the context-level "weberror" event covers
+    // the same page exceptions and would double-report them. Playwright
+    // exposes no error event for service workers, so an uncaught error in
+    // the background worker is not visible here — everything this suite
+    // drives lives in the popup page.
+}
+
+// The extension id is derived from the unpacked path, so it changes and
+// must never be hardcoded. It is the host part of the service worker URL.
+async function extensionId(ctx) {
+    let [sw] = ctx.serviceWorkers();
+    if (!sw) {
+        sw = await ctx.waitForEvent("serviceworker", { timeout: 30000 });
+    }
+    return new URL(sw.url()).host;
+}
+
+async function launch(routeOpts) {
+    if (!fs.existsSync(path.join(EXT_PATH, "manifest.json"))) {
+        throw new Error(
+            "no unpacked build at " +
+                EXT_PATH +
+                " — run make build before the e2e suite",
+        );
+    }
+
+    const userDir = fs.mkdtempSync(path.join(os.tmpdir(), "autistmask-e2e-"));
+    const ctx = await chromium.launchPersistentContext(userDir, {
+        // channel: "chromium" is load-bearing. The default headless mode
+        // uses the headless shell, which silently refuses to load
+        // extensions: there is no error at all, the service worker simply
+        // never appears. This cost real debugging time once already.
+        channel: "chromium",
+        headless: true,
+        args: [
+            "--disable-extensions-except=" + EXT_PATH,
+            "--load-extension=" + EXT_PATH,
+            // The container runs unprivileged; Chrome's sandbox needs
+            // capabilities the harness deliberately does not grant it.
+            "--no-sandbox",
+        ],
+    });
+
+    const errors = new ErrorCollector();
+    attachErrorListeners(ctx, errors);
+    routeOpts.report = (text) => errors.record("network", text);
+    await installNetworkStubs(ctx, routeOpts);
+
+    const id = await extensionId(ctx);
+    const popupUrl = "chrome-extension://" + id + "/src/popup/index.html";
+
+    return {
+        ctx,
+        errors,
+        extensionId: id,
+        popupUrl,
+        async close() {
+            await ctx.close();
+            fs.rmSync(userDir, { recursive: true, force: true });
+        },
+    };
+}
+
+// ---------------------------------------------------------------- flows
+
+const PASSWORD = "e2e-harness-password";
+
+async function visible(page, selector, timeout = 15000) {
+    await page.waitForSelector(selector, { state: "visible", timeout });
+}
+
+async function openPopup(ctx, popupUrl) {
+    const page = await ctx.newPage();
+    await page.goto(popupUrl);
+    return page;
+}
+
+// Full wallet creation through the real UI: BIP-39 generation, libsodium
+// vault encryption and extension storage persistence, for real.
+async function createWallet(page) {
+    await page.click("#btn-welcome-add");
+    await visible(page, "#view-add-wallet");
+    await page.click("#btn-generate-phrase");
+    await page.waitForFunction(() => {
+        const el = document.getElementById("wallet-mnemonic");
+        return el && el.value.trim().split(/\s+/).length >= 12;
+    });
+    await page.fill("#add-wallet-password", PASSWORD);
+    await page.fill("#add-wallet-password-confirm", PASSWORD);
+    await page.click("#btn-add-wallet-confirm");
+    await visible(page, "#view-main", 60000);
+}
+
+// Reach the address detail screen from wherever the popup restored to.
+// Clicking .address-row does not open it; the [info] button does.
+async function openAddressDetail(page) {
+    const onAddress = await page.isVisible("#view-address");
+    if (!onAddress) {
+        await visible(page, "#view-main");
+        await page.click("#wallet-list .btn-addr-info");
+    }
+    await visible(page, "#view-address");
+}
+
+module.exports = {
+    ALLOWED_ERRORS,
+    EXT_PATH,
+    REPO_ROOT,
+    createWallet,
+    launch,
+    openAddressDetail,
+    openPopup,
+    visible,
+};
--- a/tests/e2e/network.js
+++ b/tests/e2e/network.js
@@ -0,0 +1,223 @@
+// Browser-level network interception for the end-to-end suite.
+//
+// Every http(s) request the extension makes is fulfilled from these
+// fixtures, so the suite is deterministic and runs entirely offline. The
+// probe that motivated this harness (see issue #181) observed live calls
+// to Blockscout returning 401 inside the container, which would make any
+// assertion about rendered transaction data worthless.
+//
+// Anything not explicitly stubbed here is aborted AND reported to the
+// error collector, so a newly added outbound call shows up as a test
+// failure rather than as intermittent flakiness.
+
+"use strict";
+
+// Fictional ERC-20 used to seed the transaction-detail test. The symbol
+// must not collide with any entry in src/shared/tokenList.js, or
+// isSpoofedSymbol() in src/shared/transactions.js drops the transfer as a
+// symbol-spoofing attempt; holders_count must be >= 1000 or the default
+// hideLowHolderTokens filter drops it. Either would make the test pass
+// vacuously by never rendering a row at all.
+const STUB_TOKEN = {
+    address: "0xe2e0000000000000000000000000000000000e2e",
+    symbol: "E2E",
+    name: "End To End Test Token",
+    decimals: "6",
+    holders: "12345",
+};
+
+const STUB_COUNTERPARTY = "0xc0ffee0000000000000000000000000000c0ffee";
+
+const STUB_TX_HASH =
+    "0xe2e0000000000000000000000000000000000000000000000000000000000e2e";
+
+const STUB_BLOCK_NUMBER = 21000000;
+
+// Fixed instant so timeAgo() output is stable across runs.
+const STUB_TX_TIMESTAMP = "2026-01-02T03:04:05.000000Z";
+
+// A 32-byte zero word. Returned for every eth_call, which is what makes
+// ethers' ENS reverse lookup resolve to "no resolver set" and return null
+// instead of throwing. A throw would be logged by src/shared/ens.js via
+// log.errorf(), i.e. console.error, which fails the run on its own.
+const ZERO_WORD = "0x" + "0".repeat(64);
+
+const RPC_RESULTS = {
+    eth_chainId: "0x1",
+    net_version: "1",
+    eth_blockNumber: "0x1406f40",
+    eth_getBalance: "0x0",
+    eth_call: ZERO_WORD,
+    eth_gasPrice: "0x3b9aca00",
+    eth_estimateGas: "0x5208",
+    eth_getTransactionCount: "0x0",
+    eth_maxPriorityFeePerGas: "0x3b9aca00",
+};
+
+function tokenObject() {
+    return {
+        address_hash: STUB_TOKEN.address,
+        address: STUB_TOKEN.address,
+        symbol: STUB_TOKEN.symbol,
+        name: STUB_TOKEN.name,
+        decimals: STUB_TOKEN.decimals,
+        holders_count: STUB_TOKEN.holders,
+        type: "ERC-20",
+    };
+}
+
+// One received ERC-20 transfer of 1.5 E2E to the address under test.
+function tokenTransferItems(address) {
+    return [
+        {
+            transaction_hash: STUB_TX_HASH,
+            block_number: STUB_BLOCK_NUMBER,
+            timestamp: STUB_TX_TIMESTAMP,
+            from: { hash: STUB_COUNTERPARTY },
+            to: { hash: address },
+            total: { decimals: STUB_TOKEN.decimals, value: "1500000" },
+            token: tokenObject(),
+        },
+    ];
+}
+
+// Full details for STUB_TX_HASH. raw_input is "0x" so the calldata
+// decoder short-circuits; the on-chain detail fields still populate.
+function transactionDetails() {
+    return {
+        hash: STUB_TX_HASH,
+        block_number: STUB_BLOCK_NUMBER,
+        nonce: 7,
+        gas_used: "51000",
+        gas_price: "1000000000",
+        fee: { value: "51000000000000" },
+        raw_input: "0x",
+        status: "ok",
+    };
+}
+
+function jsonResponse(route, body) {
+    return route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify(body),
+    });
+}
+
+// Extract the address from a Blockscout /addresses/<addr>/... path.
+function blockscoutAddress(pathname) {
+    const m = pathname.match(/\/addresses\/(0x[0-9a-fA-F]{40})\//);
+    return m ? m[1] : null;
+}
+
+function handleRpc(route, postData, report) {
+    let payload;
+    try {
+        payload = JSON.parse(postData || "null");
+    } catch {
+        report("unstubbed RPC: unparseable body " + String(postData));
+        return route.abort();
+    }
+    // ethers batches by default, so the body may be an array.
+    const batch = Array.isArray(payload) ? payload : [payload];
+    const replies = batch.map((req) => {
+        const result = RPC_RESULTS[req.method];
+        if (result === undefined) {
+            report("unstubbed RPC method: " + req.method);
+            return {
+                jsonrpc: "2.0",
+                id: req.id,
+                error: { code: -32601, message: "unstubbed in e2e harness" },
+            };
+        }
+        return { jsonrpc: "2.0", id: req.id, result };
+    });
+    return jsonResponse(route, Array.isArray(payload) ? replies : replies[0]);
+}
+
+/**
+ * Route every http(s) request through local fixtures.
+ *
+ * @param {import("playwright-core").BrowserContext} ctx
+ * @param {object} opts
+ * @param {(text: string) => void} opts.report  called for unstubbed traffic
+ * @param {boolean} [opts.seedTokenTransfer]  serve the stubbed ERC-20
+ *   transfer. Read at request time, so a test can flip it on the same
+ *   options object without re-registering the route.
+ */
+async function installNetworkStubs(ctx, opts) {
+    const report = opts.report;
+
+    // Regex rather than a glob so chrome-extension:// resource loads are
+    // never touched — routing those would break the popup itself.
+    await ctx.route(/^https?:\/\//, async (route) => {
+        const req = route.request();
+        const url = new URL(req.url());
+        const p = url.pathname;
+
+        // JSON-RPC endpoint (any host): a POST with a JSON-RPC body.
+        if (req.method() === "POST") {
+            return handleRpc(route, req.postData(), report);
+        }
+
+        // Blockscout v2
+        if (p.includes("/api/v2/")) {
+            if (/\/addresses\/0x[0-9a-fA-F]{40}\/transactions$/.test(p)) {
+                return jsonResponse(route, { items: [] });
+            }
+            if (/\/addresses\/0x[0-9a-fA-F]{40}\/token-transfers$/.test(p)) {
+                const addr = blockscoutAddress(p);
+                return jsonResponse(route, {
+                    items:
+                        opts.seedTokenTransfer && addr
+                            ? tokenTransferItems(addr)
+                            : [],
+                });
+            }
+            if (/\/addresses\/0x[0-9a-fA-F]{40}\/token-balances$/.test(p)) {
+                return jsonResponse(route, []);
+            }
+            if (p.endsWith("/transactions/" + STUB_TX_HASH)) {
+                return jsonResponse(route, transactionDetails());
+            }
+        }
+
+        // CoinDesk price tick
+        if (url.hostname.endsWith("coindesk.com")) {
+            return jsonResponse(route, { Data: {} });
+        }
+
+        // MetaMask phishing blocklist
+        if (
+            url.hostname === "raw.githubusercontent.com" ||
+            p.endsWith("/eth-phishing-detect/main/src/config.json")
+        ) {
+            return jsonResponse(route, {
+                version: 2,
+                tolerance: 2,
+                fuzzylist: [],
+                whitelist: [],
+                blacklist: [],
+            });
+        }
+
+        // Best-effort Etherscan address labels: served as an empty page.
+        if (url.hostname.endsWith("etherscan.io")) {
+            return route.fulfill({
+                status: 200,
+                contentType: "text/html",
+                body: "<html><body></body></html>",
+            });
+        }
+
+        report("unstubbed request: " + req.method() + " " + req.url());
+        return route.abort();
+    });
+}
+
+module.exports = {
+    installNetworkStubs,
+    STUB_TOKEN,
+    STUB_COUNTERPARTY,
+    STUB_TX_HASH,
+};
--- a/tests/e2e/run.js
+++ b/tests/e2e/run.js
@@ -0,0 +1,188 @@
+// End-to-end suite entrypoint. Run via script/test-e2e (which builds
+// dist/chrome/ and starts the pinned container); running it directly
+// requires a Chromium that playwright-core can find.
+//
+// A plain runner rather than jest on purpose: jest's default testMatch
+// would pull these files into script/test, and browser tests do not fit
+// inside the 20-second cap REPO_POLICIES.md puts on make test. Nothing
+// here is named *.test.js for the same reason.
+
+"use strict";
+
+const {
+    createWallet,
+    launch,
+    openAddressDetail,
+    openPopup,
+    visible,
+} = require("./harness");
+const { STUB_TOKEN, STUB_TX_HASH } = require("./network");
+
+const TEST_TIMEOUT_MS = 120000;
+
+const tests = [];
+
+function test(name, fn) {
+    tests.push({ name, fn });
+}
+
+function assert(cond, message) {
+    if (!cond) throw new Error(message);
+}
+
+function withTimeout(promise, name) {
+    let timer;
+    const timeout = new Promise((_, reject) => {
+        timer = setTimeout(
+            () =>
+                reject(new Error("timed out after " + TEST_TIMEOUT_MS + "ms")),
+            TEST_TIMEOUT_MS,
+        );
+    });
+    return Promise.race([promise, timeout]).finally(() => clearTimeout(timer));
+}
+
+// ----------------------------------------------------------------- tests
+
+test("popup loads and reaches the welcome view", async (env) => {
+    env.page = await openPopup(env.ctx, env.popupUrl);
+    await visible(env.page, "#view-welcome");
+    const title = await env.page.title();
+    assert(title === "AutistMask", "unexpected popup title: " + title);
+});
+
+test("wallet creation through the UI reaches the main view", async (env) => {
+    await createWallet(env.page);
+    const addrCount = await env.page
+        .locator("#wallet-list .btn-addr-info")
+        .count();
+    assert(addrCount > 0, "no addresses rendered in the wallet list");
+});
+
+test("add token screen opens from address detail (#150)", async (env) => {
+    await openAddressDetail(env.page);
+    await env.page.click("#btn-add-token");
+    await visible(env.page, "#view-add-token");
+    const quickPicks = await env.page
+        .locator("#common-token-list .common-token")
+        .count();
+    assert(quickPicks > 0, "no common-token quick-pick buttons rendered");
+});
+
+test("transaction detail renders an ERC-20 transfer (#151)", async (env) => {
+    // Serve the stubbed token transfer from here on, then reload so the
+    // address detail screen refetches its transaction list.
+    env.routeOpts.seedTokenTransfer = true;
+    await env.page.reload();
+    await openAddressDetail(env.page);
+
+    await visible(env.page, "#tx-list .tx-row");
+    const rowText = await env.page
+        .locator("#tx-list .tx-row")
+        .first()
+        .innerText();
+    assert(
+        rowText.includes(STUB_TOKEN.symbol),
+        "token transfer row missing symbol " +
+            STUB_TOKEN.symbol +
+            ", got: " +
+            JSON.stringify(rowText),
+    );
+
+    await env.page.locator("#tx-list .tx-row").first().click();
+    await visible(env.page, "#view-transaction");
+
+    const hash = await env.page.locator("#tx-detail-hash").innerText();
+    assert(
+        hash.includes(STUB_TX_HASH),
+        "transaction detail shows the wrong hash: " + hash,
+    );
+
+    // The token contract row is the field that crashes when
+    // addressDotHtml is not imported: it renders only for transfers with
+    // a contractAddress, which is every ERC-20 transfer.
+    await visible(env.page, "#tx-detail-token-contract-section");
+    const contract = env.page.locator("#tx-detail-token-contract");
+    const contractText = await contract.innerText();
+    assert(
+        contractText.toLowerCase().includes(STUB_TOKEN.address),
+        "token contract row missing the contract address, got: " +
+            JSON.stringify(contractText),
+    );
+    const dots = await contract.locator('span[style*="border-radius"]').count();
+    assert(dots > 0, "token contract row rendered without its colour dot");
+});
+
+// ---------------------------------------------------------------- runner
+
+async function main() {
+    const routeOpts = { seedTokenTransfer: false };
+
+    let session;
+    try {
+        session = await launch(routeOpts);
+    } catch (e) {
+        // Never skip and report success: a browser we cannot start is a
+        // failure of the suite, not an absent one.
+        console.error("e2e: could not start the browser: " + e.message);
+        process.exitCode = 1;
+        return;
+    }
+
+    console.log("# extension id: " + session.extensionId);
+    console.log("1.." + tests.length);
+
+    const env = {
+        ctx: session.ctx,
+        popupUrl: session.popupUrl,
+        routeOpts,
+        page: null,
+    };
+
+    let failed = 0;
+    let n = 0;
+    for (const t of tests) {
+        n += 1;
+        const mark = session.errors.mark();
+        let failure = null;
+        try {
+            await withTimeout(t.fn(env), t.name);
+        } catch (e) {
+            failure = e.message;
+        }
+
+        // Any uncaught page error or console.error fails the test that
+        // provoked it, whether or not its assertions passed. This is the
+        // mechanism that caught #150.
+        const newErrors = session.errors.since(mark);
+        if (!failure && newErrors.length > 0) {
+            failure = "uncaught browser errors during this test";
+        }
+
+        if (failure) {
+            failed += 1;
+            console.log("not ok " + n + " - " + t.name);
+            console.log("  " + failure);
+            for (const line of newErrors) {
+                console.log("  " + line);
+            }
+        } else {
+            console.log("ok " + n + " - " + t.name);
+        }
+    }
+
+    await session.close();
+
+    console.log(
+        "# " + (tests.length - failed) + "/" + tests.length + " passed",
+    );
+    if (failed > 0) {
+        console.log("# FAILED");
+        process.exitCode = 1;
+    }
+}
+
+main().catch((e) => {
+    console.error("e2e: " + (e && e.stack ? e.stack : e));
+    process.exitCode = 1;
+});
--- a/yarn.lock
+++ b/yarn.lock
@@ -2547,6 +2547,11 @@ pkg-dir@^4.2.0:
  dependencies:
    find-up "^4.0.0"

+playwright-core@1.56.0:
+  version "1.56.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.56.0.tgz#14b40ea436551b0bcefe19c5bfb8d1804c83739c"
+  integrity sha512-1SXl7pMfemAMSDn5rkPeZljxOCYAmQnYLBTExuh6E8USHXGSX3dx6lYZN/xPpTz1vimXmPA9CDnILvmJaB8aSQ==
+
 pngjs@^5.0.0:
  version "5.0.0"
  resolved "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz"