@arraypress/extension-kit 1.10.0 → 1.11.1

package/src/styles/chrome-ui.css

@@ -307,7 +307,7 @@ button.link:hover { background: none; text-decoration: underline; }
 
 /* settings-subpage's header, at the top of its card: the back button, then the subpage's title.
    <div class="subpage-head"><button class="icon-button" aria-label="Back"><span class="icon icon-arrow-back"></span></button><h2>Cookies</h2></div> */
-.subpage-head { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 20px 0 8px; }
+.subpage-head { display: flex; align-items: center; gap: 8px; min-height: 56px; padding-inline: 8px 20px; }
 .subpage-head h2 { margin: 0; font-size: 15px; font-weight: 400; color: var(--text); overflow-wrap: anywhere; }
 .subpage-head .icon-button { color: var(--icon-muted); }
 
@@ -323,13 +323,17 @@ select {
     width: 200px;
     max-width: 100%;
     height: 36px;
-    padding: 0 20px 0 10px;
+    padding-block: 0;
+    padding-inline: 10px 20px;
     border: 1px solid var(--field-border);
     border-radius: var(--radius);
     background: var(--select-arrow) calc(100% - 10px) center / 7px no-repeat transparent;
     cursor: pointer;
 }
 
+/* Right to left: the arrow at the other end, as Chrome mirrors its own. */
+select:dir(rtl) { background-position: 10px center; }
+
 select:hover { background-color: var(--hover-subtle); }
 select:focus-visible { outline: 2px solid var(--primary); outline-offset: -1px; }
 select:disabled { opacity: 0.38; cursor: default; }
@@ -414,13 +418,13 @@ input.switch::after {
     content: "";
     position: absolute;
     top: 50%;
-    left: 7px;
+    inset-inline-start: 7px;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--switch-outline-off);
     transform: translate(-50%, -50%);
-    transition: left 80ms linear, width 80ms linear, height 80ms linear, background-color 80ms linear;
+    transition: inset-inline-start 80ms linear, width 80ms linear, height 80ms linear, background-color 80ms linear;
 }
 
 /* The 20px hover halo around the knob. */
@@ -428,7 +432,7 @@ input.switch:hover::before {
     content: "";
     position: absolute;
     top: 50%;
-    left: 7px;
+    inset-inline-start: 7px;
     width: 20px;
     height: 20px;
     border-radius: 50%;
@@ -438,8 +442,10 @@ input.switch:hover::before {
 
 input.switch:active::after { width: 10px; height: 10px; }
 input.switch:checked { background: var(--primary); border-color: var(--primary); }
-input.switch:checked::after { left: 17px; width: 12px; height: 12px; background: var(--on-primary); }
-input.switch:checked:hover::before { left: 17px; }
+input.switch:checked::after { inset-inline-start: 17px; width: 12px; height: 12px; background: var(--on-primary); }
+input.switch:checked:hover::before { inset-inline-start: 17px; }
+/* Right to left: the knob is measured from the right, so it's centred on its point the other way. */
+input.switch:dir(rtl)::after, input.switch:dir(rtl):hover::before { transform: translate(50%, -50%); }
 input.switch:checked:active::after { width: 14px; height: 14px; }
 input.switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
 input.switch:disabled { opacity: 0.38; cursor: default; }
@@ -458,10 +464,10 @@ input.switch:disabled::before { display: none; }
     grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--sidebar-width);
     align-items: center;
     height: var(--toolbar-height);
-    padding-right: 12px;
+    padding-inline-end: 12px;
 }
 
-.toolbar-start { display: flex; align-items: center; gap: 12px; padding-left: 20px; min-width: 0; }
+.toolbar-start { display: flex; align-items: center; gap: 12px; padding-inline-start: 20px; min-width: 0; }
 .toolbar-start h1, .toolbar > h1 {
     font-size: 22px;
     font-weight: 500;
@@ -481,7 +487,8 @@ input.switch:disabled::before { display: none; }
     width: 100%;
     max-width: 680px;
     height: 36px;
-    padding: 0 6px 0 10px;
+    padding-block: 0;
+    padding-inline: 10px 6px;
     border-radius: 100px;
     background: var(--search-bg);
     color: var(--icon);
@@ -496,7 +503,8 @@ input.switch:disabled::before { display: none; }
     min-width: 0;
     height: 100%;
     min-height: 0;
-    padding: 0 0 0 4px;
+    padding: 0;
+    padding-inline-start: 4px;
     border: 0;
     border-radius: 0;
     background: none;
@@ -621,11 +629,13 @@ label.row, .row[actionable] { cursor: pointer; }
     flex: none;
     width: 20px;
     height: 20px;
-    margin-right: -2px;
+    margin-inline-end: -2px;
     background: var(--icon-muted);
     mask: var(--icon-arrow-right) center / 20px no-repeat;
 }
 
+.link-row:dir(rtl)::after { transform: scaleX(-1); }
+
 .link-row.external::after { mask-image: var(--icon-open-in-new); }
 
 /* A list inside a card: each item is a row. */
@@ -653,9 +663,13 @@ label.row, .row[actionable] { cursor: pointer; }
     align-items: center;
     gap: 20px;
     min-height: 40px;
-    margin: 0 2px 0 1px;
-    padding: 10px 16px 10px 23px;
-    border-radius: 0 100px 100px 0;
+    margin-block: 0;
+    margin-inline: 1px 2px;
+    padding-block: 10px;
+    padding-inline: 23px 16px;
+    border-radius: 0;
+    border-start-end-radius: 100px;
+    border-end-end-radius: 100px;
     color: var(--text);
     font-size: 14px;
     font-weight: 500;
@@ -678,7 +692,7 @@ label.row, .row[actionable] { cursor: pointer; }
 .manager { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
 .layout { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
 .sidebar { overflow: auto; padding: 8px 0 24px; }
-.main { overflow: auto; padding: 24px 32px 96px 17px; min-width: 0; }
+.main { overflow: auto; padding-block: 24px 96px; padding-inline: 17px 32px; min-width: 0; }
 
 /* A folder in the sidebar (bookmarks-folder-node): the same pill as the settings menu. */
 .tree { list-style: none; margin: 0; padding: 0; }
@@ -689,9 +703,13 @@ label.row, .row[actionable] { cursor: pointer; }
     align-items: center;
     gap: 8px;
     min-height: 40px;
-    margin: 0 3px 0 1px;
-    padding: 0 4px 0 calc(8px + var(--depth) * 20px);
-    border-radius: 0 100px 100px 0;
+    margin-block: 0;
+    margin-inline: 1px 3px;
+    padding-block: 0;
+    padding-inline: calc(8px + var(--depth) * 20px) 4px;
+    border-radius: 0;
+    border-start-end-radius: 100px;
+    border-end-end-radius: 100px;
     color: var(--folder-text);
     font-size: 14px;
     font-weight: 500;
@@ -724,7 +742,8 @@ label.row, .row[actionable] { cursor: pointer; }
     align-items: center;
     gap: 20px;
     height: 40px;
-    padding: 0 8px 0 20px;
+    padding-block: 0;
+    padding-inline: 20px 8px;
     user-select: none;
 }
 
@@ -798,7 +817,8 @@ label.row, .row[actionable] { cursor: pointer; }
    `hidden`: the popover defaults undone either way. */
 .toast {
     position: fixed;
-    inset: auto auto 0 0;
+    inset-block: auto 0;
+    inset-inline: 0 auto;
     display: flex;
     align-items: center;
     gap: 32px;
@@ -822,7 +842,7 @@ label.row, .row[actionable] { cursor: pointer; }
 
 .toast button {
     height: auto;
-    margin-right: -8px;
+    margin-inline-end: -8px;
     padding: 8px;
     border: 0;
     background: none;
@@ -836,7 +856,8 @@ label.row, .row[actionable] { cursor: pointer; }
 
 .drawer {
     position: fixed;
-    inset: 0 auto 0 0;
+    inset-block: 0;
+    inset-inline: 0 auto;
     width: 256px;
     max-width: calc(100vw - 56px);
     height: 100%;
@@ -851,9 +872,11 @@ label.row, .row[actionable] { cursor: pointer; }
 
 .drawer[open] { animation: cr-drawer-in 200ms ease; }
 .drawer::backdrop { background: rgb(0 0 0 / 0.5); }
-.drawer-head { display: flex; align-items: center; gap: 12px; height: var(--toolbar-height); padding-left: 24px; font-size: 22px; font-weight: 500; letter-spacing: 0.25px; }
+.drawer-head { display: flex; align-items: center; gap: 12px; height: var(--toolbar-height); padding-inline-start: 24px; font-size: 22px; font-weight: 500; letter-spacing: 0.25px; }
 
 @keyframes cr-drawer-in { from { transform: translateX(-100%); } }
+@keyframes cr-drawer-in-rtl { from { transform: translateX(100%); } }
+.drawer[open]:dir(rtl) { animation-name: cr-drawer-in-rtl; }
 
 @media (prefers-reduced-motion: reduce) {
     .drawer[open] { animation: none; }
@@ -942,7 +965,8 @@ label.row, .row[actionable] { cursor: pointer; }
 
 /* .sp-card: rows on a 12px-rounded card, 8px from the panel's edge. */
 .sp-card {
-    margin: 0 0 0 8px;
+    margin: 0;
+    margin-inline-start: 8px;
     padding: 8px 0;
     border-radius: 12px;
     background: var(--sp-card);
@@ -1027,7 +1051,7 @@ label.row, .row[actionable] { cursor: pointer; }
     place-items: center;
     width: 40px;
     height: 40px;
-    margin-right: 16px;
+    margin-inline-end: 16px;
     border-radius: 8px;
     background: var(--sp-icon-bg);
     color: var(--text-secondary);
@@ -1057,10 +1081,14 @@ label.row, .row[actionable] { cursor: pointer; }
     display: none;
     align-items: center;
     gap: 4px;
-    margin: 0 -4px 0 8px;
+    margin-block: 0;
+    margin-inline: 8px -4px;
 }
 
+/* Shown too while one of its buttons has its menu open: the menu is modal and takes the focus and
+   the pointer, and the button it opened from (where the focus goes back) would vanish under it. */
 .sp-item:is(:hover, :focus-within) .sp-suffix,
+.sp-suffix:has([aria-expanded="true"]),
 .sp-suffix.always { display: flex; }
 
 /* .sp-notice (ui/notice.js): a card saying what a list leaves out or can't do; a warning's icon in
@@ -1096,7 +1124,8 @@ button.floating {
     align-items: center;
     gap: 8px;
     height: 40px;
-    padding: 8px 16px 8px 12px;
+    padding-block: 8px;
+    padding-inline: 12px 16px;
     border: 0;
     border-radius: 8px;
     background: var(--tonal-bg);
@@ -1118,6 +1147,6 @@ button.floating .icon { width: 20px; height: 20px; }
 /* ------------------------------------------------------------ Narrow */
 
 @media (max-width: 720px) {
-    .toolbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding-right: 8px; }
-    .toolbar-start { padding-left: 16px; }
+    .toolbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding-inline-end: 8px; }
+    .toolbar-start { padding-inline-start: 16px; }
 }

package/src/testing/e2e.d.ts

@@ -125,6 +125,33 @@ export declare function extensionProfile(chromium: BrowserType, dir: string, { p
  * await page.goto(url('options/options.html'));
  */
 export declare function launchExtension(chromium: BrowserType, dir: string, options?: LaunchOptions): Promise<LaunchedExtension>;
+/**
+ * Stop the extension's service worker, as Chrome does after 30 seconds idle: its globals,
+ * timers and anything else kept in memory are gone; storage, alarms and registered listeners
+ * stay. Chrome never does this by itself in an e2e run (Playwright's debugger keeps the worker
+ * alive), so a check that state survives a restart has to ask for it. Done through the
+ * DevTools protocol from a page of the extension (`ServiceWorker.stopWorker`), and, unless
+ * `start` is false, the worker is started again with no event (`ServiceWorker.startWorker`).
+ *
+ * `launched.worker` stays the handle to use: Playwright keeps it across the restart. Anything a
+ * test put in the old worker (`recordIconCalls`, a patched `chrome.*` function) is gone with it.
+ *
+ * @param {Pick<LaunchedExtension, 'context' | 'worker' | 'extensionId' | 'url'>} launched - From {@link launchExtension}.
+ * @param {{start?: boolean, page?: string}} [options] - `start: false` leaves the worker stopped, for
+ *   the next event (a message, an alarm, a tab) to start it as on a person's computer; `page`: a file
+ *   of the extension to open for the protocol session (default `manifest.json`).
+ * @returns {Promise<void>} Once the worker has stopped (and, with `start`, is running again).
+ * @throws {Error} When the worker isn't running, or doesn't stop or start in 10 s.
+ *
+ * @example
+ * await worker.evaluate(() => { globalThis.cache = { tab: 7 }; });
+ * await stopWorker(launched);
+ * await worker.evaluate(() => globalThis.cache); // undefined: what wasn't stored is gone
+ */
+export declare function stopWorker({ context, worker, extensionId, url }: Pick<LaunchedExtension, 'context' | 'worker' | 'extensionId' | 'url'>, { start, page: file }?: {
+    start?: boolean;
+    page?: string;
+}): Promise<void>;
 /**
  * Emulate colour schemes in the offscreen document: one CDP session attached
  * to it, reused for every change.
@@ -137,10 +164,12 @@ export declare function launchExtension(chromium: BrowserType, dir: string, opti
 export declare function offscreenEmulator(cdp: CDPSession, suffix?: string): Promise<(scheme: 'light' | 'dark') => Promise<unknown>>;
 /**
  * Wrap the worker's real `chrome.action.setIcon` so each call is recorded once
- * Chrome has taken it (a path Chrome can't load fails, and isn't recorded).
+ * Chrome has taken it (a path Chrome can't load fails, and isn't recorded):
+ * its `path`, or `'imageData'` for an icon given as pixels. The record lives
+ * in the worker: it's gone when the worker restarts ({@link stopWorker}).
  *
  * @param {Worker} worker - The extension's service worker.
- * @returns {Promise<() => Promise<unknown[]>>} Reads the recorded `path`s, oldest first.
+ * @returns {Promise<() => Promise<unknown[]>>} Reads the recorded icons, oldest first.
  */
 export declare function recordIconCalls(worker: Worker): Promise<() => Promise<unknown[]>>;
 /** How long one check may take before it's failed, in ms: long enough for a slow real-browser check, short of a hang. */
@@ -159,7 +188,8 @@ export type CheckRunner = {
      */
     fail: (name: string) => void;
     /**
-     * Print the tally, and exit with 1 if anything failed.
+     * Print the tally, and exit with 1 if anything failed or no check ran at all
+     * (a script that returned early, or whose filter matched nothing, hasn't passed).
      */
     finish: () => void;
 };
@@ -173,7 +203,8 @@ export type CheckRunner = {
  *   whether it passed.
  * @property {(name: string) => void} fail Count a failure found outside any check (a page's
  *   uncaught error, say): printed now, listed and counted at the end.
- * @property {() => void} finish Print the tally, and exit with 1 if anything failed.
+ * @property {() => void} finish Print the tally, and exit with 1 if anything failed or no check ran at all
+ *   (a script that returned early, or whose filter matched nothing, hasn't passed).
  */
 /**
  * Make a {@link CheckRunner}: "✓ name" for a pass, "✗ name" and the error's

package/src/testing/e2e.js

@@ -96,7 +96,11 @@ export async function extensionProfile(chromium, dir, { prefix = 'extension-', a
         ...options,
         args: [`--disable-extensions-except=${dir}`, `--load-extension=${dir}`, ...args],
       });
-      const worker = context.serviceWorkers()[0] ?? await context.waitForEvent('serviceworker');
+      const worker = context.serviceWorkers()[0] ?? await context.waitForEvent('serviceworker', { timeout: 15_000 }).catch(async () => {
+        // Chrome refused the extension (a manifest or `_locales` error) or it has no worker: nothing to wait for.
+        await context.close();
+        throw new Error(`The extension at ${dir} didn't start a service worker: Chrome may have refused to load it (check its manifest and _locales at chrome://extensions)`);
+      });
       const extensionId = new URL(worker.url()).host;
       return {
         context,
@@ -137,6 +141,56 @@ export async function launchExtension(chromium, dir, options = {}) {
   };
 }
 
+/**
+ * Stop the extension's service worker, as Chrome does after 30 seconds idle: its globals,
+ * timers and anything else kept in memory are gone; storage, alarms and registered listeners
+ * stay. Chrome never does this by itself in an e2e run (Playwright's debugger keeps the worker
+ * alive), so a check that state survives a restart has to ask for it. Done through the
+ * DevTools protocol from a page of the extension (`ServiceWorker.stopWorker`), and, unless
+ * `start` is false, the worker is started again with no event (`ServiceWorker.startWorker`).
+ *
+ * `launched.worker` stays the handle to use: Playwright keeps it across the restart. Anything a
+ * test put in the old worker (`recordIconCalls`, a patched `chrome.*` function) is gone with it.
+ *
+ * @param {Pick<LaunchedExtension, 'context' | 'worker' | 'extensionId' | 'url'>} launched - From {@link launchExtension}.
+ * @param {{start?: boolean, page?: string}} [options] - `start: false` leaves the worker stopped, for
+ *   the next event (a message, an alarm, a tab) to start it as on a person's computer; `page`: a file
+ *   of the extension to open for the protocol session (default `manifest.json`).
+ * @returns {Promise<void>} Once the worker has stopped (and, with `start`, is running again).
+ * @throws {Error} When the worker isn't running, or doesn't stop or start in 10 s.
+ *
+ * @example
+ * await worker.evaluate(() => { globalThis.cache = { tab: 7 }; });
+ * await stopWorker(launched);
+ * await worker.evaluate(() => globalThis.cache); // undefined: what wasn't stored is gone
+ */
+export async function stopWorker({ context, worker, extensionId, url }, { start = true, page: file = 'manifest.json' } = {}) {
+  const page = await context.newPage();
+  try {
+    await page.goto(url(file));
+    const cdp = await context.newCDPSession(page);
+    /** @type {Map<string, {versionId: string, scriptURL: string, runningStatus: string}>} */
+    const versions = new Map();
+    cdp.on('ServiceWorker.workerVersionUpdated', (event) => {
+      for (const version of event.versions) versions.set(version.versionId, version);
+    });
+    await cdp.send('ServiceWorker.enable');
+    const own = () => [...versions.values()].filter((version) => version.scriptURL === worker.url());
+    const running = await until(() => own().find((version) => version.runningStatus === 'running'), 'the service worker to be running', 10_000);
+    await cdp.send('ServiceWorker.stopWorker', { versionId: running.versionId });
+    await until(() => own().every((version) => version.runningStatus === 'stopped'), 'the service worker to stop', 10_000);
+    if (start) {
+      await cdp.send('ServiceWorker.startWorker', { scopeURL: `chrome-extension://${extensionId}/` });
+      await until(() => own().some((version) => version.runningStatus === 'running'), 'the service worker to start again', 10_000);
+      // Running, and answering: its script has run again.
+      await worker.evaluate(() => true);
+    }
+    await cdp.detach();
+  } finally {
+    await page.close();
+  }
+}
+
 /**
  * Emulate colour schemes in the offscreen document: one CDP session attached
  * to it, reused for every change.
@@ -164,10 +218,12 @@ export async function offscreenEmulator(cdp, suffix = '/offscreen/offscreen.html
 
 /**
  * Wrap the worker's real `chrome.action.setIcon` so each call is recorded once
- * Chrome has taken it (a path Chrome can't load fails, and isn't recorded).
+ * Chrome has taken it (a path Chrome can't load fails, and isn't recorded):
+ * its `path`, or `'imageData'` for an icon given as pixels. The record lives
+ * in the worker: it's gone when the worker restarts ({@link stopWorker}).
  *
  * @param {Worker} worker - The extension's service worker.
- * @returns {Promise<() => Promise<unknown[]>>} Reads the recorded `path`s, oldest first.
+ * @returns {Promise<() => Promise<unknown[]>>} Reads the recorded icons, oldest first.
  */
 export async function recordIconCalls(worker) {
   await worker.evaluate(() => {
@@ -176,7 +232,7 @@ export async function recordIconCalls(worker) {
     const real = chrome.action.setIcon.bind(chrome.action);
     chrome.action.setIcon = /** @type {typeof chrome.action.setIcon} */ (async (/** @type {chrome.action.TabIconDetails} */ details) => {
       await real(details);
-      calls.push(details.path);
+      calls.push(details.path ?? (details.imageData ? 'imageData' : undefined));
     });
   });
   return () => worker.evaluate(() => /** @type {{iconCalls: unknown[]}} */ (/** @type {unknown} */ (globalThis)).iconCalls);
@@ -195,7 +251,8 @@ export const CHECK_MS = 60_000;
  *   whether it passed.
  * @property {(name: string) => void} fail Count a failure found outside any check (a page's
  *   uncaught error, say): printed now, listed and counted at the end.
- * @property {() => void} finish Print the tally, and exit with 1 if anything failed.
+ * @property {() => void} finish Print the tally, and exit with 1 if anything failed or no check ran at all
+ *   (a script that returned early, or whose filter matched nothing, hasn't passed).
  */
 
 /**
@@ -238,6 +295,11 @@ export function checkRunner({ timeout: runnerTimeout = CHECK_MS } = {}) {
     },
     finish() {
       console.log(`\n${passed} passed, ${failures.length} failed`);
+      if (!passed && !failures.length) {
+        console.log('  No checks ran.');
+        process.exit(1);
+        return;
+      }
       if (!failures.length) return;
       for (const failure of failures) console.log(`  - ${failure}`);
       process.exit(1);

package/src/testing/fake-model.d.ts

@@ -4,7 +4,9 @@
  * worker's or page's `globalThis`: Playwright's Chromium has no model). It
  * acts out what a real Chrome does: a model still to download (with
  * progress), one this computer can't run, a slow first session (the cold
- * start), a slow answer, an answer cut short by its signal, and a failure.
+ * start), a slow answer, an answer cut short by its signal, a failure, a
+ * session that's been destroyed (it answers nothing more), and a download
+ * asked for without a click (Chrome refuses it).
  * Moved here from Better Downloads' tests, so every extension that uses the
  * model tests against the same one.
  *
@@ -38,6 +40,12 @@ export type FakeModelState = {
      * Whether a download fails part way.
      */
     failDownload: boolean;
+    /**
+     * Whether a click is behind a `create()` that has to download the
+     * model (Chrome refuses one without: `NotAllowedError`). `null`, the default, reads the page's own
+     * `navigator.userActivation` (and takes it as given where there's none: Node, a worker).
+     */
+    userActivation: boolean | null;
 };
 export type FakeModelLog = {
     /**

package/src/testing/fake-model.js

@@ -4,7 +4,9 @@
  * worker's or page's `globalThis`: Playwright's Chromium has no model). It
  * acts out what a real Chrome does: a model still to download (with
  * progress), one this computer can't run, a slow first session (the cold
- * start), a slow answer, an answer cut short by its signal, and a failure.
+ * start), a slow answer, an answer cut short by its signal, a failure, a
+ * session that's been destroyed (it answers nothing more), and a download
+ * asked for without a click (Chrome refuses it).
  * Moved here from Better Downloads' tests, so every extension that uses the
  * model tests against the same one.
  *
@@ -25,6 +27,9 @@
  * @property {(prompt: string, options: PromptOptions) => string} answer The answer to a prompt.
  * @property {boolean} failPrompt Whether answers fail (the model gave up).
  * @property {boolean} failDownload Whether a download fails part way.
+ * @property {boolean | null} userActivation Whether a click is behind a `create()` that has to download the
+ *   model (Chrome refuses one without: `NotAllowedError`). `null`, the default, reads the page's own
+ *   `navigator.userActivation` (and takes it as given where there's none: Node, a worker).
  */
 
 /**
@@ -77,7 +82,7 @@ function wait(ms, signal) {
 export function fakeLanguageModel(initial = {}) {
   /** @type {FakeModelState} */
   const state = {
-    availability: 'available', createMs: 0, answerMs: 0, answer: () => 'Fake answer', failPrompt: false, failDownload: false, ...initial,
+    availability: 'available', createMs: 0, answerMs: 0, answer: () => 'Fake answer', failPrompt: false, failDownload: false, userActivation: null, ...initial,
   };
   /** @type {FakeModelLog} */
   const log = { availability: [], created: [], prompts: [], promptOptions: [], cloned: 0, aborted: 0, destroyed: 0 };
@@ -87,27 +92,40 @@ export function fakeLanguageModel(initial = {}) {
    *
    * @returns {LanguageModelSession} It.
    */
-  const session = () => ({
-    async prompt(prompt, options = {}) {
-      log.prompts.push(prompt);
-      log.promptOptions.push(options);
-      try {
-        await wait(state.answerMs, options.signal);
-      } catch (error) {
-        log.aborted++;
-        throw error;
-      }
-      if (state.failPrompt) throw new DOMException('The model failed', 'UnknownError');
-      return state.answer(prompt, options);
-    },
-    async clone() {
-      log.cloned++;
-      return session();
-    },
-    destroy() {
-      log.destroyed++;
-    },
-  });
+  const session = () => {
+    let destroyed = false;
+    /** Chrome's refusal to use a session that's been destroyed. */
+    const refuseDestroyed = () => {
+      if (destroyed) throw new DOMException('The session has been destroyed.', 'InvalidStateError');
+    };
+    return /** @type {LanguageModelSession} */ ({
+      async prompt(prompt, options = {}) {
+        refuseDestroyed();
+        log.prompts.push(prompt);
+        log.promptOptions.push(options);
+        try {
+          await wait(state.answerMs, options.signal);
+        } catch (error) {
+          log.aborted++;
+          throw error;
+        }
+        // Destroyed while it was answering: Chrome stops the answer.
+        if (destroyed) throw new DOMException('The session has been destroyed.', 'AbortError');
+        if (state.failPrompt) throw new DOMException('The model failed', 'UnknownError');
+        return state.answer(prompt, options);
+      },
+      async clone() {
+        refuseDestroyed();
+        log.cloned++;
+        return session();
+      },
+      destroy() {
+        if (destroyed) return;
+        destroyed = true;
+        log.destroyed++;
+      },
+    });
+  };
 
   return {
     state,
@@ -121,6 +139,9 @@ export function fakeLanguageModel(initial = {}) {
       log.created.push(options);
       if (state.availability === 'unavailable') throw new DOMException('Not supported', 'NotSupportedError');
       if (state.availability !== 'available') {
+        // Chrome starts a download only from a click (transient user activation).
+        const active = state.userActivation ?? /** @type {{navigator?: {userActivation?: {isActive: boolean}}}} */ (globalThis).navigator?.userActivation?.isActive ?? true;
+        if (!active) throw new DOMException('Requires a user gesture when availability is "downloading" or "downloadable".', 'NotAllowedError');
         // A download, reported as Chrome reports it, then the model is here.
         const monitor = new EventTarget();
         options.monitor?.(monitor);

package/src/testing/fake-storage.d.ts

@@ -1,29 +1,60 @@
 /**
- * An in-memory `chrome.storage` for tests, behaving as Chrome does: values
- * are stored as JSON, `onChanged` fires only for values that changed, and
- * sync refuses an item over its 8,192-byte quota and more than 120 writes
- * (set or remove) a minute. Tests then check outcomes (what's stored), not
+ * An in-memory `chrome.storage` for tests, behaving as Chrome does (each point
+ * checked against Chromium): values are stored as Chrome converts them (what
+ * JSON can't hold is dropped, a `Date` is `{}`), `get` takes a key, keys, an
+ * object of defaults or nothing, `onChanged` fires only for values that
+ * changed (whatever order an object's keys come in), and every area has
+ * Chrome's quotas. Sync refuses an item over 8,192 bytes as Chrome counts them
+ * (`syncItemBytes`: UTF-8, `<` six bytes), more than 102,400 bytes or 512
+ * items in all, and more than 120 calls a minute or 1,800 an hour of `set`,
+ * `remove` or `clear` (each counted by itself, refused calls included); local
+ * and session hold 10 MB. Tests then check outcomes (what's stored), not
  * calls.
  *
  * @module testing/fake-storage
  */
 import type { StorageChange } from '../settings/storage.js';
 /** @import { StorageChange } from '../settings/storage.js' */
-/** Chrome Sync's write limit: `chrome.storage.sync.MAX_WRITE_OPERATIONS_PER_MINUTE`. */
+/** Chrome Sync's write limit a minute: `chrome.storage.sync.MAX_WRITE_OPERATIONS_PER_MINUTE`. */
 export declare const SYNC_WRITES_PER_MINUTE = 120;
+/** Chrome Sync's write limit an hour: `chrome.storage.sync.MAX_WRITE_OPERATIONS_PER_HOUR`. */
+export declare const SYNC_WRITES_PER_HOUR = 1800;
+/** All of sync's items together may take this many bytes (`chrome.storage.sync.QUOTA_BYTES`). */
+export declare const SYNC_QUOTA_BYTES = 102400;
+/** The most items sync holds (`chrome.storage.sync.MAX_ITEMS`). */
+export declare const SYNC_MAX_ITEMS = 512;
+/** What local and session each hold (`chrome.storage.local.QUOTA_BYTES`), without `unlimitedStorage`. */
+export declare const LOCAL_QUOTA_BYTES = 10485760;
 export type ChangeListener = (changes: Record<string, StorageChange>, area: string) => unknown;
+export type FakeEvent<L extends (...args: any[]) => unknown> = {
+    addListener: (listener: L) => void;
+    removeListener: (listener: L) => void;
+    hasListener: (listener: L) => boolean;
+};
 export type FakeArea = {
     /**
      * What it holds, to inspect (and seed) in tests.
      */
     data: Record<string, any>;
     /**
-     * How many writes it has taken.
+     * How many writes (`set`, `remove`, `clear`) it has taken.
      */
     writes: number;
-    get: (keys?: string | string[] | null) => Promise<Record<string, any>>;
+    /**
+     *   A key's or keys' items, an object's keys with its values for the missing ones, or everything.
+     */
+    get: (keys?: string | string[] | Record<string, unknown> | null) => Promise<Record<string, any>>;
     set: (items: Record<string, unknown>) => Promise<void>;
     remove: (keys: string | string[]) => Promise<void>;
+    clear: () => Promise<void>;
+    /**
+     * The bytes the keys' items (or all) take.
+     */
+    getBytesInUse: (keys?: string | string[] | null) => Promise<number>;
+    /**
+     * This area's changes.
+     */
+    onChanged: FakeEvent<(changes: Record<string, StorageChange>) => unknown>;
 };
 export type FakeChromeStorage = {
     /**
@@ -41,16 +72,12 @@ export type FakeChromeStorage = {
     /**
      * `chrome.storage.onChanged`.
      */
-    onChanged: {
-        addListener(listener: ChangeListener): void;
-    };
+    onChanged: FakeEvent<ChangeListener>;
     /**
      * Waits for every listener, including the changes those listeners make.
      */
     settled: () => Promise<void>;
 };
-/** All of sync's items together may take this many bytes (`chrome.storage.sync.QUOTA_BYTES`). */
-export declare const SYNC_QUOTA_BYTES = 102400;
 /**
  * Make a fake `chrome.storage`.
  *
@@ -58,8 +85,9 @@ export declare const SYNC_QUOTA_BYTES = 102400;
  * @param {Record<string, unknown>} [initial.local] - What local holds.
  * @param {Record<string, unknown>} [initial.sync] - What sync holds.
  * @param {Record<string, unknown>} [initial.session] - What session holds.
- * @param {() => number} [initial.now] - The clock sync's write limit reads. Default `Date.now`.
+ * @param {() => number} [initial.now] - The clock sync's write limits read. Default `Date.now`.
  * @returns {FakeChromeStorage} The fake.
+ *
  * @example
  * const storage = fakeChromeStorage({ sync: { days: 3 } });
  * await store.save(storage, { days: 5 });