@arraypress/extension-kit 1.1.0 → 1.2.0

package/README.md

@@ -10,6 +10,8 @@ The pieces ArrayPress's Chrome extensions share, so each is written once:
   service worker shows the matching icon.
 - **About links**: README, Issues and PRIVACY.md in the extension's GitHub repository, plus
   package-time warnings for placeholder links.
+- **Chrome's page components**: the ⋮ action menu and its row button, the one-field dialog
+  ("Rename folder"), and the toast with Undo, built on the stylesheet's classes.
 - **Build and test helpers** (Node): toolbar icon rendering, zipping for the Chrome Web Store, a
   fake `chrome.storage`, Playwright helpers, packaging checks, and a copied-code guard.
 
@@ -132,6 +134,68 @@ At the end of `npm run package`, `printReleaseChecks(ABOUT_LINKS, REPOSITORY)` w
 link is a placeholder (`isPlaceholder`: example.com/.org/.net) and reminds you the repository must
 be public before the store listing goes live.
 
+## Page components
+
+Chrome's own components, made in the page by script (no markup to copy), styled by `chrome-ui.css`.
+Each takes `doc` (default `document`); the wording defaults to Chrome's English and takes a
+translation.
+
+### ⋮ menu (cr-action-menu)
+
+```js
+import { createMenu, moreActionsButton } from '../vendor/extension-kit/index.js';
+
+const menu = createMenu(); // one <dialog class="menu" role="menu"> for the page
+row.append(moreActionsButton(workspace.name, {
+  onClick: (anchor) => menu.open([
+    { label: 'Rename', run: () => rename(workspace) },
+    'separator',
+    { label: 'Delete', run: () => remove(workspace), disabled: locked },
+  ], { anchor }),
+}));
+// A right-click: menu.open(items, { x: event.clientX, y: event.clientY, focusTo: row });
+```
+
+It opens modally over its button, as Chrome's does (its top at the button's top, its end at the
+button's end), moved to stay 8px inside the window. A click outside, Esc, Tab or the window losing
+focus closes it; ↑/↓ (wrapping, past disabled items), Home and End move; focus goes back to the
+button (or `focusTo`); an item runs once the menu has closed. `createMenu({id, placement: 'below'})`
+opens it below the button instead. `menuPosition` and `isInside` are the pure geometry.
+
+`moreActionsButton(name, options)` is the 32px ⋮ icon button, labelled "More actions for “name”"
+(`label` for a translation), with `aria-haspopup="menu"`; its icon is the stylesheet's
+`.icon-more-vert` (`--icon-more-vert`, cr:more-vert), so the page needs no sprite. `className`,
+`tooltip` (a `title`) and `focusable: false` (out of the tab order, for a row that takes the focus)
+cover the rest.
+
+### One-field dialog (cr-dialog)
+
+```js
+const name = await askText({ title: 'Rename workspace', label: 'Name', value: workspace.name, maxLength: 200 });
+const site = await askText({
+  title: 'Add site', label: 'Site', action: 'Add',
+  validate: (text) => (siteFromInput(text) ? null : 'Enter a site, like example.com'),
+});
+```
+
+Resolves to the text, trimmed, or `null` when cancelled. The action button (default "Save") stays
+disabled while the text is blank or `validate` gives a reason, which shows under the field
+(`checkText` is that rule, pure). Enter presses the action button; Esc and Cancel cancel; the
+focus goes back to what had it, or to `returnTo` (an element, or a function asked at the end).
+One `#text-dialog` per page, made on first use.
+
+### Toast with Undo (cr-toast)
+
+```js
+const toast = createToast(); // at load, so screen readers know the live region
+toast.show(`Deleted “${workspace.name}”`, () => restore(workspace));
+toast.show('Copied'); // no Undo
+```
+
+`#toast` (`role="status"`), bottom left. A new message replaces the last and restarts the wait:
+10 seconds, as chrome://bookmarks's (`TOAST_MS`), or `duration` / `undoDuration`. Undo hides it
+and runs once. `undoLabel` translates the button.
+
 ## Build helpers (`@arraypress/extension-kit/build`)
 
 | Export | What it does |
@@ -164,7 +228,10 @@ except those listed, each with a reason:
 | `until(fn, what, timeout?)` | Poll until truthy. |
 | `offscreenEmulator(cdp)` | Emulate light/dark inside the offscreen document. |
 | `recordIconCalls(worker)` | Record `chrome.action.setIcon` calls Chrome accepted. |
-| `filesUnder`, `zipEntries`, `missingReferences`, `manifestReferences` | For a packaging test: the zip is the folder, and every path the extension names resolves. |
+| `installWarnings(worker, manifest)` | Chrome's own install warnings for a manifest (`chrome.management.getPermissionWarningsByManifest`, no permission needed), from a loaded extension's worker. |
+| `warningsAddedBy(worker, manifest, names)` | `{warnings, without, added}`: the warnings with and without some permissions, and those only they bring (`withoutPermissions` is the pure part). |
+| `savedTabGroups(profile)` | Chrome's saved tab groups (`{title, pinned, urls}`) read from a closed profile's `Sync Data/LevelDB`: no extension API lists them. |
+| `filesUnder`, `zipEntries`, `missingReferences`, `manifestReferences` | For a packaging test: the zip is the folder, and every path the extension names resolves (a `#fragment` or `?query` ignored: `referencedPath`). |
 
 ## Stylesheet classes
 
@@ -189,9 +256,10 @@ except those listed, each with a reason:
 | Buttons (cr-button) | plain `<button>`; `.action` filled; `.link` as a link; `.icon-button` 32px round |
 | Settings menu | `.nav` > `ul.nav-list` > `a.nav-item[aria-current="page"]`, `.nav-separator` |
 | Manager layout | `.manager`/`.layout`, `.sidebar` with `.tree` > `.tree-item`, `.main` with `.list-card` |
-| Menu (cr-action-menu) | `<dialog class="menu">` of `button[role="menuitem"]`, `hr` |
-| Dialog (cr-dialog) | `<dialog class="dialog"><form method="dialog">` `.dialog-title`, `.dialog-body`, `.dialog-buttons` |
-| Toast (cr-toast) | `<div class="toast">text <button>Undo</button></div>` |
+| Menu (cr-action-menu) | `<dialog class="menu">` of `button[role="menuitem"]`, `hr` (or `createMenu`) |
+| ⋮ icon | `<span class="icon icon-more-vert" aria-hidden="true">` (or `moreActionsButton`) |
+| Dialog (cr-dialog) | `<dialog class="dialog"><form method="dialog">` `.dialog-title`, `.dialog-body`, `.dialog-buttons` (one field: `askText`) |
+| Toast (cr-toast) | `<div class="toast">text <button>Undo</button></div>` (or `createToast`) |
 | Drawer (cr-drawer) | `<dialog class="drawer">` with `.drawer-head` and a `.nav` |
 | Side panel page | `<body class="side-panel">`: the panel's colours, a column 100vh high |
 | Panel tabs (cr-tabs) | `<div class="tabs" role="tablist">` of `button.tab[role="tab"][aria-selected]` |
@@ -209,7 +277,8 @@ chrome://bookmarks in Chromium 156 / Chrome 157; the sources are listed at the t
 
 ## Development
 
-`npm test` runs ESLint, a strict TypeScript check of the JSDoc (`checkJs`), the tests, and the
+`npm test` runs ESLint, a strict TypeScript check of the JSDoc (`checkJs`), the tests (the menu,
+the dialog and the Chrome readers in Playwright's Chromium, the rest in Node and jsdom), and the
 copied-code guard. The `.d.ts` files are generated from the JSDoc: `npm run types` writes them, and
 the type check fails while one is stale (it regenerates them into `.types/` and compares).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arraypress/extension-kit",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Shared pieces for Chrome extensions: Chrome's own page styles, a Chrome Sync settings store, the light/dark toolbar glyph, About links, and build and test helpers.",
   "type": "module",
   "main": "src/index.js",

package/src/build/vendor.js

@@ -19,7 +19,7 @@ import path from 'node:path';
 const SOURCE = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
 
 /** What a vendored copy holds, relative to `src/`: everything an extension page or worker may load. */
-export const RUNTIME_ENTRIES = Object.freeze(['index.js', 'index.d.ts', 'about', 'commands', 'dom', 'settings', 'styles', 'toolbar']);
+export const RUNTIME_ENTRIES = Object.freeze(['index.js', 'index.d.ts', 'about', 'commands', 'dom', 'settings', 'styles', 'toolbar', 'ui']);
 
 /** The kit's stylesheet, an absolute path in the installed package. */
 export const STYLESHEET = path.join(SOURCE, 'styles', 'chrome-ui.css');

package/src/index.d.ts

@@ -1,7 +1,8 @@
 /**
  * The kit's browser half: what an extension's pages, offscreen document and
- * service worker load. Every function takes the `chrome` APIs it uses as
- * arguments, so tests run the real logic against fakes.
+ * service worker load, Chrome's page components (the ⋮ menu, the one-field
+ * dialog, the toast with Undo) included. Every function takes the `chrome`
+ * APIs it uses as arguments, so tests run the real logic against fakes.
  *
  * Build-time helpers are in `@arraypress/extension-kit/build`, test helpers
  * in `@arraypress/extension-kit/testing`, and the stylesheet is
@@ -19,3 +20,22 @@ export { createSettingsStore } from './settings/store.js';
 export { POLL_MS, watchSchemeOffscreen } from './toolbar/offscreen.js';
 export { DARK_QUERY, TOOLBAR_DARK_KEY, TOOLBAR_SCHEME, reportColorScheme, schemeSender, watchColorScheme } from './toolbar/scheme.js';
 export { OFFSCREEN_PATH, TOOLBAR_ICON_DIR, createToolbarTheme, startToolbarTheme, toolbarIcon, watchFromOffscreen, } from './toolbar/theme.js';
+export { MENU_EDGE, createMenu, isInside, menuPosition, moreActionsButton } from './ui/menu.js';
+export { askText, checkText } from './ui/text-dialog.js';
+export { TOAST_MS, createToast } from './ui/toast.js';
+export type ActionMenu = import('./ui/menu.js').ActionMenu;
+export type MenuEntry = import('./ui/menu.js').MenuEntry;
+export type MenuItem = import('./ui/menu.js').MenuItem;
+export type MenuPlace = import('./ui/menu.js').MenuPlace;
+export type TextRequest = import('./ui/text-dialog.js').TextRequest;
+export type Toast = import('./ui/toast.js').Toast;
+/**
+ * The page helpers' types, for a page's JSDoc.
+ *
+ * @typedef {import('./ui/menu.js').ActionMenu} ActionMenu
+ * @typedef {import('./ui/menu.js').MenuEntry} MenuEntry
+ * @typedef {import('./ui/menu.js').MenuItem} MenuItem
+ * @typedef {import('./ui/menu.js').MenuPlace} MenuPlace
+ * @typedef {import('./ui/text-dialog.js').TextRequest} TextRequest
+ * @typedef {import('./ui/toast.js').Toast} Toast
+ */

package/src/index.js

@@ -1,7 +1,8 @@
 /**
  * The kit's browser half: what an extension's pages, offscreen document and
- * service worker load. Every function takes the `chrome` APIs it uses as
- * arguments, so tests run the real logic against fakes.
+ * service worker load, Chrome's page components (the ⋮ menu, the one-field
+ * dialog, the toast with Undo) included. Every function takes the `chrome`
+ * APIs it uses as arguments, so tests run the real logic against fakes.
  *
  * Build-time helpers are in `@arraypress/extension-kit/build`, test helpers
  * in `@arraypress/extension-kit/testing`, and the stylesheet is
@@ -22,3 +23,17 @@ export { DARK_QUERY, TOOLBAR_DARK_KEY, TOOLBAR_SCHEME, reportColorScheme, scheme
 export {
   OFFSCREEN_PATH, TOOLBAR_ICON_DIR, createToolbarTheme, startToolbarTheme, toolbarIcon, watchFromOffscreen,
 } from './toolbar/theme.js';
+export { MENU_EDGE, createMenu, isInside, menuPosition, moreActionsButton } from './ui/menu.js';
+export { askText, checkText } from './ui/text-dialog.js';
+export { TOAST_MS, createToast } from './ui/toast.js';
+
+/**
+ * The page helpers' types, for a page's JSDoc.
+ *
+ * @typedef {import('./ui/menu.js').ActionMenu} ActionMenu
+ * @typedef {import('./ui/menu.js').MenuEntry} MenuEntry
+ * @typedef {import('./ui/menu.js').MenuItem} MenuItem
+ * @typedef {import('./ui/menu.js').MenuPlace} MenuPlace
+ * @typedef {import('./ui/text-dialog.js').TextRequest} TextRequest
+ * @typedef {import('./ui/toast.js').Toast} Toast
+ */

package/src/styles/chrome-ui.css

@@ -136,9 +136,10 @@
     --tonal-text: rgb(4 30 73);
     --elevation-3: 0 1px 3px 0 rgb(60 64 67 / 0.3), 0 4px 8px 3px rgb(60 64 67 / 0.15);
 
-    /* Icons for link rows (cr:open-in-new, cr:arrow-right / subpage arrow). */
+    /* Icons for link rows (cr:open-in-new, cr:arrow-right / subpage arrow) and ⋮ buttons (cr:more-vert). */
     --icon-open-in-new: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
     --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
+    --icon-more-vert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
 
     /* Sizes. */
     --radius: 8px;                         /* cards, fields, dialogs */
@@ -296,6 +297,9 @@ button.link:hover { background: none; text-decoration: underline; }
 
 .icon { width: 20px; height: 20px; fill: currentColor; flex: none; }
 
+/* The ⋮ icon without a sprite: <span class="icon icon-more-vert" aria-hidden="true">. */
+.icon-more-vert { display: inline-block; background: currentColor; mask: var(--icon-more-vert) center / contain no-repeat; }
+
 .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
 
 /* --------------------------------------------------------------- Fields */

package/src/testing/index.d.ts

@@ -1,18 +1,22 @@
 /**
  * The kit's test helpers: a fake `chrome.storage`, Playwright helpers for
- * end-to-end tests and a server for their pages, and checks for a packaging
- * test. Node only.
+ * end-to-end tests and a server for their pages, Chrome's install warnings
+ * and saved tab groups, and checks for a packaging test. Node only.
  *
  * @module testing
  */
 export { checkRunner, checkToolbarTheme, extensionProfile, launchExtension, offscreenEmulator, recordIconCalls, until } from './e2e.js';
 export { serve } from './server.js';
 export { SYNC_WRITES_PER_MINUTE, fakeChromeStorage } from './fake-storage.js';
-export { filesUnder, manifestReferences, missingReferences, zipEntries } from './package.js';
+export { filesUnder, manifestReferences, missingReferences, referencedPath, zipEntries } from './package.js';
+export { savedTabGroups } from './saved-groups.js';
+export { installWarnings, warningsAddedBy, withoutPermissions } from './warnings.js';
 export type CheckRunner = import('./e2e.js').CheckRunner;
 export type ExtensionProfile = import('./e2e.js').ExtensionProfile;
 export type LaunchedExtension = import('./e2e.js').LaunchedExtension;
 export type LaunchOptions = import('./e2e.js').LaunchOptions;
+export type SavedTabGroup = import('./saved-groups.js').SavedTabGroup;
+export type Manifest = import('./warnings.js').Manifest;
 export type Reply = import('./server.js').Reply;
 export type Routes = import('./server.js').Routes;
 export type TestServer = import('./server.js').TestServer;
@@ -23,6 +27,8 @@ export type TestServer = import('./server.js').TestServer;
  * @typedef {import('./e2e.js').ExtensionProfile} ExtensionProfile
  * @typedef {import('./e2e.js').LaunchedExtension} LaunchedExtension
  * @typedef {import('./e2e.js').LaunchOptions} LaunchOptions
+ * @typedef {import('./saved-groups.js').SavedTabGroup} SavedTabGroup
+ * @typedef {import('./warnings.js').Manifest} Manifest
  * @typedef {import('./server.js').Reply} Reply
  * @typedef {import('./server.js').Routes} Routes
  * @typedef {import('./server.js').TestServer} TestServer

package/src/testing/index.js

@@ -1,7 +1,7 @@
 /**
  * The kit's test helpers: a fake `chrome.storage`, Playwright helpers for
- * end-to-end tests and a server for their pages, and checks for a packaging
- * test. Node only.
+ * end-to-end tests and a server for their pages, Chrome's install warnings
+ * and saved tab groups, and checks for a packaging test. Node only.
  *
  * @module testing
  */
@@ -9,7 +9,9 @@
 export { checkRunner, checkToolbarTheme, extensionProfile, launchExtension, offscreenEmulator, recordIconCalls, until } from './e2e.js';
 export { serve } from './server.js';
 export { SYNC_WRITES_PER_MINUTE, fakeChromeStorage } from './fake-storage.js';
-export { filesUnder, manifestReferences, missingReferences, zipEntries } from './package.js';
+export { filesUnder, manifestReferences, missingReferences, referencedPath, zipEntries } from './package.js';
+export { savedTabGroups } from './saved-groups.js';
+export { installWarnings, warningsAddedBy, withoutPermissions } from './warnings.js';
 
 /**
  * The helpers' types, for a test's JSDoc.
@@ -18,6 +20,8 @@ export { filesUnder, manifestReferences, missingReferences, zipEntries } from '.
  * @typedef {import('./e2e.js').ExtensionProfile} ExtensionProfile
  * @typedef {import('./e2e.js').LaunchedExtension} LaunchedExtension
  * @typedef {import('./e2e.js').LaunchOptions} LaunchOptions
+ * @typedef {import('./saved-groups.js').SavedTabGroup} SavedTabGroup
+ * @typedef {import('./warnings.js').Manifest} Manifest
  * @typedef {import('./server.js').Reply} Reply
  * @typedef {import('./server.js').Routes} Routes
  * @typedef {import('./server.js').TestServer} TestServer

package/src/testing/package.d.ts

@@ -20,17 +20,75 @@ export declare function filesUnder(dir: string): Promise<string[]>;
  * @returns {Promise<string[]>} Entry names, sorted.
  */
 export declare function zipEntries(from: string, exclude?: readonly string[]): Promise<string[]>;
+export type ManifestFiles = {
+    /**
+     * The worker.
+     */
+    background?: {
+        service_worker?: string;
+    };
+    /**
+     * The options page.
+     */
+    options_ui?: {
+        page?: string;
+    };
+    /**
+     * The popup and toolbar icon.
+     */
+    action?: {
+        default_popup?: string;
+        default_icon?: string | Record<string, string>;
+    };
+    /**
+     * The side panel.
+     */
+    side_panel?: {
+        default_path?: string;
+    };
+    /**
+     * The extension's icons.
+     */
+    icons?: Record<string, string>;
+    /**
+     * Files pages may load.
+     */
+    web_accessible_resources?: {
+        resources: string[];
+    }[];
+};
+/**
+ * The parts of a manifest that name files.
+ *
+ * @typedef {object} ManifestFiles
+ * @property {{service_worker?: string}} [background] The worker.
+ * @property {{page?: string}} [options_ui] The options page.
+ * @property {{default_popup?: string, default_icon?: string | Record<string, string>}} [action] The popup and toolbar icon.
+ * @property {{default_path?: string}} [side_panel] The side panel.
+ * @property {Record<string, string>} [icons] The extension's icons.
+ * @property {{resources: string[]}[]} [web_accessible_resources] Files pages may load.
+ */
 /**
  * The paths a manifest names, from the extension's root.
  *
- * @param {Record<string, any>} manifest - The parsed `manifest.json`.
- * @returns {string[]} Worker, pages, icons, side panel and web-accessible resources.
+ * @param {ManifestFiles} manifest - The parsed `manifest.json`.
+ * @returns {string[]} Worker, pages, icons, side panel and web-accessible resources (less patterns with `*`).
+ */
+export declare function manifestReferences(manifest: ManifestFiles): string[];
+/**
+ * The file a reference names: the path without its `#fragment` or `?query`
+ * (`options.html#workspaces` is `options.html`). Pure.
+ *
+ * @param {string} reference - A path as the extension writes it.
+ * @returns {string} The path alone; '' for a reference to the page itself (`#top`).
  */
-export declare function manifestReferences(manifest: Record<string, any>): string[];
+export declare function referencedPath(reference: string): string;
 /**
  * Every path the extension names that isn't a file inside it: relative
  * imports in its scripts, `chrome.runtime.getURL('…')` paths, `src`/`href`
- * in its pages, the manifest's entries, and any `extra` paths.
+ * in its pages, the manifest's entries, and any `extra` paths. A `#fragment`
+ * or `?query` is ignored: `getURL('options.html#workspaces')` names
+ * `options.html`.
  *
  * @param {string} dir - The extension folder.
  * @param {readonly string[]} [extra] - More paths from the root (say, a script injected by name).

package/src/testing/package.js

@@ -43,28 +43,57 @@ export async function zipEntries(from, exclude) {
   }
 }
 
+/**
+ * The parts of a manifest that name files.
+ *
+ * @typedef {object} ManifestFiles
+ * @property {{service_worker?: string}} [background] The worker.
+ * @property {{page?: string}} [options_ui] The options page.
+ * @property {{default_popup?: string, default_icon?: string | Record<string, string>}} [action] The popup and toolbar icon.
+ * @property {{default_path?: string}} [side_panel] The side panel.
+ * @property {Record<string, string>} [icons] The extension's icons.
+ * @property {{resources: string[]}[]} [web_accessible_resources] Files pages may load.
+ */
+
 /**
  * The paths a manifest names, from the extension's root.
  *
- * @param {Record<string, any>} manifest - The parsed `manifest.json`.
- * @returns {string[]} Worker, pages, icons, side panel and web-accessible resources.
+ * @param {ManifestFiles} manifest - The parsed `manifest.json`.
+ * @returns {string[]} Worker, pages, icons, side panel and web-accessible resources (less patterns with `*`).
  */
 export function manifestReferences(manifest) {
+  const icon = manifest.action?.default_icon;
   return [
     manifest.background?.service_worker,
     manifest.options_ui?.page,
     manifest.action?.default_popup,
     manifest.side_panel?.default_path,
     ...Object.values(manifest.icons ?? {}),
-    ...Object.values(manifest.action?.default_icon ?? {}),
-    ...(manifest.web_accessible_resources ?? []).flatMap((/** @type {{resources: string[]}} */ entry) => entry.resources),
-  ].filter((ref) => typeof ref === 'string' && !ref.includes('*'));
+    ...(typeof icon === 'string' ? [icon] : Object.values(icon ?? {})),
+    ...(manifest.web_accessible_resources ?? []).flatMap((entry) => entry.resources),
+  ].filter((ref) => typeof ref === 'string').filter((ref) => !ref.includes('*'));
+}
+
+/**
+ * The file a reference names: the path without its `#fragment` or `?query`
+ * (`options.html#workspaces` is `options.html`). Pure.
+ *
+ * @param {string} reference - A path as the extension writes it.
+ * @returns {string} The path alone; '' for a reference to the page itself (`#top`).
+ */
+export function referencedPath(reference) {
+  return reference.replace(/[?#].*$/s, '');
 }
 
+/** A reference with a scheme (`https:`, `data:`, `mailto:`) or protocol-relative: not a file of the extension. */
+const ELSEWHERE = /^(?:[a-z][a-z\d+.-]*:|\/\/)/i;
+
 /**
  * Every path the extension names that isn't a file inside it: relative
  * imports in its scripts, `chrome.runtime.getURL('…')` paths, `src`/`href`
- * in its pages, the manifest's entries, and any `extra` paths.
+ * in its pages, the manifest's entries, and any `extra` paths. A `#fragment`
+ * or `?query` is ignored: `getURL('options.html#workspaces')` names
+ * `options.html`.
  *
  * @param {string} dir - The extension folder.
  * @param {readonly string[]} [extra] - More paths from the root (say, a script injected by name).
@@ -76,7 +105,9 @@ export async function missingReferences(dir, extra = []) {
   const missing = [];
   /** @param {string} from @param {string} target */
   const check = (from, target) => {
-    const file = path.resolve(root, from, target);
+    const name = referencedPath(target);
+    if (!name || ELSEWHERE.test(target)) return;
+    const file = path.resolve(root, from, name);
     if (!file.startsWith(root) || !existsSync(file)) missing.push(`${from || 'root'} → ${target}`);
   };
   for (const file of await filesUnder(root)) {
@@ -87,7 +118,7 @@ export async function missingReferences(dir, extra = []) {
       for (const [, ref] of source.matchAll(/getURL\('([^']+)'\)/g)) check('', ref);
     } else if (file.endsWith('.html')) {
       const source = await readFile(path.join(root, file), 'utf8');
-      for (const [, ref] of source.matchAll(/(?:src|href)="([^"#:]+)"/g)) check(from, ref);
+      for (const [, ref] of source.matchAll(/(?:src|href)="([^"]+)"/g)) check(from, ref);
     }
   }
   const manifest = JSON.parse(await readFile(path.join(root, 'manifest.json'), 'utf8'));

package/src/testing/saved-groups.d.ts

@@ -0,0 +1,33 @@
+export type SavedTabGroup = {
+    /**
+     * Its title.
+     */
+    title: string;
+    /**
+     * Whether it's pinned to the saved groups bar.
+     */
+    pinned: boolean;
+    /**
+     * Its tabs' addresses, in order.
+     */
+    urls: string[];
+};
+export type ProtoField = {
+    field: number;
+    value: number | Buffer;
+};
+/**
+ * Chrome's saved tab groups in a closed profile.
+ *
+ * @param {string} profile - The profile folder (as `extensionProfile` gives it).
+ * @returns {Promise<SavedTabGroup[]>} The saved groups, in no particular order; none when the
+ *   profile has no store yet.
+ * @throws {Error} When the store has compacted tables this doesn't read.
+ * @example
+ * const profile = await extensionProfile(chromium, 'extension');
+ * const { worker, close } = await profile.launch();
+ * await worker.evaluate(async () => chrome.tabGroups.update(await chrome.tabs.group({tabIds: [tabId]}), {title: 'Research'}));
+ * await close();
+ * const groups = await savedTabGroups(profile.dir); // → [{title: 'Research', pinned: true, urls: [...]}]
+ */
+export declare function savedTabGroups(profile: string): Promise<SavedTabGroup[]>;