Prepare native Reader contract-scoped reads

apps/extension/offscreen.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>mdbase Reader</title>
+  </head>
+  <body>
+    <script type="module" src="/src/offscreen.ts"></script>
+  </body>
+</html>

apps/extension/package.json

@@ -12,7 +12,7 @@
     "typecheck": "tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@mdbase-dev/ui": "0.1.0-beta.125",
+    "@mdbase-dev/ui": "file:../../vendor/mdbase-dev-ui-dev-9553ad66.tgz",
     "@mdbase-reader/connect": "workspace:*",
     "@mdbase-reader/core": "workspace:*",
     "@mdbase-reader/platform": "workspace:*",

apps/extension/scripts/extension-manifest.d.mts

@@ -8,3 +8,4 @@ export function manifestVersion(version?: string): {
   version_name?: string;
 };
 export function extensionManifest(environment: ExtensionEnvironment): Record<string, unknown>;
+export const storeExtensionId: string;

apps/extension/scripts/extension-manifest.mjs

@@ -2,18 +2,42 @@ import { readFileSync } from "node:fs";
 
 import { readerDeploymentFor } from "../../reader/scripts/deployment-environment.mjs";
 
+/** The Chrome Web Store build's ID; its origin is what Connect registers for the extension. */
+export const storeExtensionId = "kimdfjefhbfgfecconmaiaaindjccidp";
+
+/**
+ * The SDK's log service for each environment, which the extension reaches from its pages.
+ * Production has no SDK release trust yet, so it has no log origin to declare.
+ */
+const sdkLogOrigins = Object.freeze({
+  lab: "https://mdbase-next-log-lab-20261005.callumalpass.workers.dev",
+});
+
+const chromeExtensionId = /^[a-p]{32}$/u;
+
 /**
  * The extension targets exactly one mdbase environment, chosen at build time with
- * `MDBASE_ENV` (lab by default), like Reader's own deployments.
+ * `MDBASE_ENV` (lab by default), like Reader's own deployments. A LAB build may also
+ * declare an unpacked build's ID (`MDBASE_EXTENSION_DEV_ID`, from chrome://extensions)
+ * so that build can register with LAB; other targets only declare the Web Store ID.
  */
 export function extensionEnvironment(environment = process.env) {
   const { target, deployment } = readerDeploymentFor(environment);
+  const devId = environment.MDBASE_EXTENSION_DEV_ID;
+  if (devId && (target !== "lab" || !chromeExtensionId.test(devId))) {
+    throw new Error("MDBASE_EXTENSION_DEV_ID must be a Chrome extension ID, for LAB builds only.");
+  }
   return {
     target,
     label: target === "production" ? "" : target.toUpperCase(),
     connectUrl: deployment.connectUrl,
+    logUrl: sdkLogOrigins[target] ?? null,
     loopbackUrl: deployment.loopbackUrl,
     readerOrigin: deployment.origin,
+    extensionOrigins: [
+      storeExtensionId,
+      ...(devId && devId !== storeExtensionId ? [devId] : []),
+    ].map((id) => `chrome-extension://${id}`),
   };
 }
 
@@ -39,7 +63,6 @@ const icons = Object.fromEntries(
 
 export function extensionManifest(environment) {
   const suffix = environment.label ? ` (${environment.label})` : "";
-  const loopback = new URL(environment.loopbackUrl);
   return {
     manifest_version: 3,
     name: `mdbase Reader${suffix}`,
@@ -48,18 +71,26 @@ export function extensionManifest(environment) {
     homepage_url: `${environment.readerOrigin}/`,
     icons,
     minimum_chrome_version: "123",
-    permissions: ["activeTab", "scripting", "storage", "contextMenus", "sidePanel"],
-    // The Connect API, and HTTPS pages: the side panel follows the active tab and saved
-    // pages are marked, which needs to read each page without a click on the toolbar.
-    host_permissions: [`${environment.connectUrl}/*`, "https://*/*"],
-    optional_host_permissions: [`${loopback.protocol}//${loopback.hostname}/*`],
+    permissions: ["activeTab", "scripting", "storage", "contextMenus", "sidePanel", "offscreen"],
+    // The mdbase control plane and log service the SDK talks to from the extension's
+    // pages, and HTTPS pages: the side panel follows the active tab and saved pages are
+    // marked, which needs to read each page without a click on the toolbar.
+    host_permissions: [
+      `${environment.connectUrl}/*`,
+      ...(environment.logUrl ? [`${environment.logUrl}/*`] : []),
+      "https://*/*",
+    ],
+    // The SDK's native runtime is WebAssembly.
+    content_security_policy: {
+      extension_pages: "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'",
+    },
     action: {
       default_title: `Save to mdbase Reader${suffix}`,
       default_icon: { 16: icons["16"], 32: icons["32"] },
     },
     // One panel per window; it follows the window's active tab.
     side_panel: { default_path: "capture.html" },
-    // Classic, not a module: it loads page-status.js with importScripts() on demand.
+    // Classic, with no SDK: the SDK runtime lives in the extension's pages.
     background: { service_worker: "background.js" },
     options_ui: { page: "options.html", open_in_tab: true },
     commands: {

apps/extension/scripts/write-mdbase-manifest.mjs

@@ -8,16 +8,18 @@ import { buildReaderManifest } from "../../reader/scripts/reader-manifest.mjs";
 
 const root = resolve(import.meta.dirname, "..");
 const reader = await buildReaderManifest();
-const shared = { ...reader };
-delete shared.homepage;
-delete shared.icon;
-delete shared.redirect_uris;
+const environment = extensionEnvironment();
+const sdkEnvironment = environment.target === "lab" ? "lab" : "production";
+// A web app manifest whose pages are the extension's: Connect registers the extension's
+// exact chrome-extension origins under installation_origins for this environment.
 const manifest = {
-  ...shared,
-  distribution: "portable",
+  ...reader,
   id: "dev.mdbase.reader.extension",
   name: "mdbase Reader browser extension",
-  project_url: `${extensionEnvironment().readerOrigin}/`,
+  homepage: `${environment.readerOrigin}/`,
+  icon: `${environment.readerOrigin}/favicon.svg`,
+  redirect_uris: [`${environment.readerOrigin}/`],
+  installation_origins: { [sdkEnvironment]: { "app-runtime": environment.extensionOrigins } },
 };
 const target = resolve(root, "src/generated/mdbase-app.json");
 await mkdir(resolve(target, ".."), { recursive: true });

apps/extension/src/CaptureApp.test.tsx

@@ -8,7 +8,7 @@ import type { PanelTab } from "./PanelTabs.js";
 
 function markup(changes: Partial<ExtensionCaptureController> = {}, tab?: PanelTab): string {
   const controller = {
-    snapshot: { status: "unselected", connections: [] },
+    snapshot: { status: "signed_out", collections: [] },
     capture: {
       kind: "html",
       pageTitle: "[test] Article",
@@ -52,8 +52,8 @@ it("asks a new user only to connect, with editable metadata and no status noise"
 it("picks among connected collections with Reader's select", () => {
   const html = markup({
     snapshot: {
-      status: "unselected",
-      connections: [{ collectionId: "c1", displayName: "[test] Papers" }],
+      status: "choosing",
+      collections: [{ collectionId: "c1", displayName: "[test] Papers" }],
     } as unknown as ExtensionCaptureController["snapshot"],
   });
   expect(html).toContain("Save to collection");
@@ -67,7 +67,7 @@ it("links the brand to the Reader library on the selected collection", () => {
     snapshot: {
       status: "ready",
       collectionId: "c1",
-      connections: [{ collectionId: "c1", displayName: "[test] Papers" }],
+      collections: [{ collectionId: "c1", displayName: "[test] Papers" }],
     } as unknown as ExtensionCaptureController["snapshot"],
   });
   expect(html).toMatch(
@@ -144,7 +144,7 @@ it("names the connected collection in the header, with its controls behind it",
     snapshot: {
       status: "ready",
       collectionId: "c1",
-      connections: [{ collectionId: "c1", displayName: "[test] Papers" }],
+      collections: [{ collectionId: "c1", displayName: "[test] Papers" }],
     } as unknown as ExtensionCaptureController["snapshot"],
   });
   expect(html).toMatch(
@@ -165,25 +165,26 @@ it("shows one status line at a time, with problems taking precedence", () => {
   expect(failing).toContain("offline");
   expect(failing).not.toContain("Highlight saved.");
 });
-it.each(["unavailable", "start_failed", "blocked"])(
-  "offers connection retry, not reapproval, for %s",
-  (status) => {
-    const html = markup({
-      snapshot: {
-        status,
-        collectionId: "c1",
-        connections: [{ collectionId: "c1", displayName: "Papers" }],
-        problem: { message: "Temporarily blocked" },
-      } as unknown as ExtensionCaptureController["snapshot"],
-      problem: "Request timed out",
-      problemKind: "save",
-      saveAttempted: true,
-    });
-    expect(html).toContain("Retry connection");
-    expect(html).not.toContain("approve access again");
-    expect(html).not.toContain("Review access");
-  },
-);
+it("offers the SDK's recovery, not reapproval, when the collection has a problem", () => {
+  const html = markup({
+    snapshot: {
+      status: "problem",
+      collectionId: "c1",
+      collections: [{ collectionId: "c1", displayName: "Papers" }],
+      problem: {
+        title: "Can't reach mdbase",
+        message: "Check your connection.",
+        action: "retry",
+        actionLabel: "Try again",
+      },
+    } as unknown as ExtensionCaptureController["snapshot"],
+    problem: "Request timed out",
+    problemKind: "save",
+    saveAttempted: true,
+  });
+  expect(html).toContain("Try again");
+  expect(html).not.toContain("Review access");
+});
 it("does not display stale write progress after a successful save", () => {
   const html = markup({
     status: "saved",
@@ -350,7 +351,7 @@ it("asks for a title from the save action when the draft has none", () => {
     snapshot: {
       status: "ready",
       collectionId: "c1",
-      connections: [{ collectionId: "c1", displayName: "[test] Papers" }],
+      collections: [{ collectionId: "c1", displayName: "[test] Papers" }],
     } as unknown as ExtensionCaptureController["snapshot"],
     draft: {
       title: " ",
@@ -459,14 +460,17 @@ it("titles the page as it will be saved, not as the tab names it", () => {
 });
 it("says why a selected passage cannot be saved yet", () => {
   const html = markup({
-    snapshot: { status: "unselected", connections: [] },
+    snapshot: {
+      status: "signed_out",
+      collections: [],
+    } as unknown as ExtensionCaptureController["snapshot"],
     capture: {
       kind: "html",
       pageTitle: "[test] Article",
       canonicalUrl: "https://example.com/",
       selection: { exact: "a passage" },
     } as ExtensionCaptureController["capture"],
   });
-  expect(html).toContain("Connect a collection before saving.");
+  expect(html).toContain("Sign in to mdbase before saving.");
   expect(html).toMatch(/class="swatch swatch-yellow[^"]*"[^>]*disabled=""/u);
 });

apps/extension/src/CaptureApp.tsx

@@ -42,7 +42,7 @@ export function CaptureApp({
     <main className="capture-shell">
       <ExtensionHeader
         collectionId={
-          "collectionId" in controller.snapshot ? controller.snapshot.collectionId : null
+          controller.snapshot.status === "ready" ? controller.snapshot.collectionId : null
         }
         collection={
           collection