@extension.dev/mcp 10.10.1 → 10.10.2

package/dist/module.js

@@ -11,7 +11,7 @@ import { PROD_ORIGINS, resolveOrigins } from "@extension.dev/urls/origins";
 import node_crypto, { createHash } from "node:crypto";
 import { consoleProjectPath, wwwNewPath } from "@extension.dev/urls/paths";
 import { UserlandProjectPage, userlandUrl } from "@extension.dev/urls/userland";
-import { CLOSE_BAD_HELLO, CLOSE_BAD_INSTANCE, CLOSE_CONTROL_UNAVAILABLE, CLOSE_SLOW_CONSUMER, CONTROL_ENVELOPE_VERSION, CONTROL_WS_PATH, buildSummaryPath, logsPath, matchesLogQuery, readLogEvents, readReadyContract, readyContractPath as bridge_readyContractPath, sessionArtifactsRootDir } from "extension-develop/bridge";
+import { CLOSE_BAD_HELLO, CLOSE_BAD_INSTANCE, CLOSE_CONTROL_UNAVAILABLE, CLOSE_SLOW_CONSUMER, CONTROL_ENVELOPE_VERSION, CONTROL_WS_PATH, actionsPath, browserArtifactsDir, buildSummaryPath, eventsPath, logsPath, matchesLogQuery, readLogEvents, readReadyContract, readyContractPath as bridge_readyContractPath, sessionArtifactsRootDir, sessionStateDir as bridge_sessionStateDir } from "extension-develop/bridge";
 import { fileURLToPath } from "node:url";
 import { execFile, execFileSync } from "node:child_process";
 import ws_0 from "ws";
@@ -93,7 +93,9 @@ __webpack_require__.r(eval_namespaceObject);
 __webpack_require__.d(eval_namespaceObject, {
     EXTENSION_PAGE_CONTEXTS: ()=>EXTENSION_PAGE_CONTEXTS,
     chromiumManifestVersion: ()=>chromiumManifestVersion,
+    geckoManifestVersion: ()=>geckoManifestVersion,
     handler: ()=>eval_handler,
+    isBrowserErrorPage: ()=>isBrowserErrorPage,
     resolveDefaultEvalContext: ()=>resolveDefaultEvalContext,
     schema: ()=>eval_schema,
     wantsExtensionPageOverCdp: ()=>wantsExtensionPageOverCdp
@@ -228,7 +230,13 @@ __webpack_require__.d(wait_namespaceObject, {
     handler: ()=>wait_handler,
     schema: ()=>wait_schema
 });
-var package_namespaceObject = JSON.parse('{"rE":"10.10.1","El":{"OP":"4.1.30"}}');
+var workspace_create_namespaceObject = {};
+__webpack_require__.r(workspace_create_namespaceObject);
+__webpack_require__.d(workspace_create_namespaceObject, {
+    handler: ()=>workspace_create_handler,
+    schema: ()=>workspace_create_schema
+});
+var package_namespaceObject = JSON.parse('{"rE":"10.10.2","El":{"OP":"4.1.31-canary.1791055414.4bbb683a"}}');
 const ENVELOPE_SCHEMA = 1;
 const collectWarnings = (warnings)=>{
     if (!warnings) return [];
@@ -274,6 +282,10 @@ function pinnedCliVersion() {
 function exactVersion(spec) {
     return spec.trim().replace(/^[\^~]/, "").replace(/^v/, "");
 }
+function describeExtensionInvocation(projectDir) {
+    const { command, prefixArgs } = resolveExtensionInvocation(projectDir);
+    return prefixArgs.length ? `${command} ${prefixArgs.join(" ")} (this server's pinned engine; the project has no node_modules/.bin/extension)` : `${command} (the project's own Extension.js)`;
+}
 function resolveExtensionInvocation(projectDir) {
     if (projectDir) {
         const bin = node_path.join(projectDir, "node_modules", ".bin", "win32" === process.platform ? "extension.cmd" : "extension");
@@ -379,7 +391,7 @@ function spawnExtensionCli(args, options) {
         ...prefixArgs,
         ...args
     ], {
-        cwd: options?.cwd,
+        cwd: options?.cwd ?? options?.projectDir,
         detached: true,
         stdio: [
             "ignore",
@@ -439,31 +451,85 @@ function credentialsPath() {
     const base = xdg || node_path.join(node_os.homedir(), ".config");
     return node_path.join(base, "extension-dev", "auth.json");
 }
-function readCredentials() {
+function credentialKey(workspaceSlug, projectSlug) {
+    return `${workspaceSlug}/${projectSlug}`.toLowerCase();
+}
+function readEntry(data) {
+    if (!data || "object" != typeof data) return null;
+    const entry = data;
+    if (1 !== entry.version) return null;
+    const token = String(entry.token || "").trim();
+    if (!token) return null;
+    const provider = "extensiondev" === entry.provider ? entry.provider : void 0;
+    return {
+        version: 1,
+        token,
+        workspaceSlug: String(entry.workspaceSlug || ""),
+        projectSlug: String(entry.projectSlug || ""),
+        expiresAt: Number(entry.expiresAt || 0),
+        api: String(entry.api || ""),
+        ...provider ? {
+            provider
+        } : {}
+    };
+}
+function readCredentialStore() {
+    let data;
     try {
-        const raw = node_fs.readFileSync(credentialsPath(), "utf8");
-        const data = JSON.parse(raw);
-        if (!data || "object" != typeof data) return null;
-        if (1 !== data.version) return null;
-        const token = String(data.token || "").trim();
-        if (!token) return null;
-        const provider = "extensiondev" === data.provider ? data.provider : void 0;
-        return {
-            version: 1,
-            token,
-            workspaceSlug: String(data.workspaceSlug || ""),
-            projectSlug: String(data.projectSlug || ""),
-            expiresAt: Number(data.expiresAt || 0),
-            api: String(data.api || ""),
-            ...provider ? {
-                provider
-            } : {}
-        };
+        data = JSON.parse(node_fs.readFileSync(credentialsPath(), "utf8"));
     } catch  {
         return null;
     }
+    if (!data || "object" != typeof data) return null;
+    const record = data;
+    if (1 === record.version) {
+        const only = readEntry(record);
+        if (!only) return null;
+        const key = credentialKey(only.workspaceSlug, only.projectSlug);
+        return {
+            version: 2,
+            active: key,
+            entries: {
+                [key]: only
+            }
+        };
+    }
+    if (2 !== record.version || !record.entries || "object" != typeof record.entries) return null;
+    const entries = {};
+    for (const [key, value] of Object.entries(record.entries)){
+        const entry = readEntry(value);
+        if (entry) entries[key.toLowerCase()] = entry;
+    }
+    const keys = Object.keys(entries);
+    if (0 === keys.length) return null;
+    const active = "string" == typeof record.active && entries[record.active.toLowerCase()] ? record.active.toLowerCase() : keys[0] ?? null;
+    return {
+        version: 2,
+        active,
+        entries
+    };
 }
-function writeCredentials(creds) {
+function selectEntry(store, selector) {
+    const wanted = String(selector?.project ?? "").trim().toLowerCase();
+    if (!wanted) return store.active && store.entries[store.active] || Object.values(store.entries)[0] || null;
+    if (wanted.includes("/")) return store.entries[wanted] ?? null;
+    const bySlug = Object.values(store.entries).filter((entry)=>entry.projectSlug.toLowerCase() === wanted);
+    return 1 === bySlug.length ? bySlug[0] ?? null : null;
+}
+function readCredentials(selector) {
+    const store = readCredentialStore();
+    return store ? selectEntry(store, selector) : null;
+}
+function listCredentials() {
+    const store = readCredentialStore();
+    if (!store) return [];
+    return Object.entries(store.entries).map(([key, entry])=>({
+            ...entry,
+            key,
+            active: key === store.active
+        }));
+}
+function writeStore(store) {
     const file = credentialsPath();
     const dir = node_path.dirname(file);
     node_fs.mkdirSync(dir, {
@@ -473,7 +539,7 @@ function writeCredentials(creds) {
     try {
         node_fs.chmodSync(dir, 448);
     } catch  {}
-    node_fs.writeFileSync(file, JSON.stringify(creds, null, 2) + "\n", {
+    node_fs.writeFileSync(file, JSON.stringify(store, null, 2) + "\n", {
         mode: 384
     });
     try {
@@ -481,27 +547,100 @@ function writeCredentials(creds) {
     } catch  {}
     return file;
 }
-function clearCredentials() {
+function writeCredentials(creds) {
+    const key = credentialKey(creds.workspaceSlug, creds.projectSlug);
+    const existing = readCredentialStore();
+    const entries = {
+        ...existing?.entries ?? {},
+        [key]: creds
+    };
+    return writeStore({
+        version: 2,
+        active: key,
+        entries
+    });
+}
+function clearCredentials(selector) {
     const file = credentialsPath();
-    try {
+    const store = readCredentialStore();
+    const wanted = String(selector?.project ?? "").trim();
+    if (!wanted) try {
         node_fs.unlinkSync(file);
         return {
             cleared: true,
-            path: file
+            path: file,
+            removed: store ? Object.keys(store.entries) : [],
+            remaining: []
         };
     } catch  {
         return {
             cleared: false,
-            path: file
+            path: file,
+            removed: [],
+            remaining: []
+        };
+    }
+    if (!store) return {
+        cleared: false,
+        path: file,
+        removed: [],
+        remaining: []
+    };
+    const entry = selectEntry(store, {
+        project: wanted
+    });
+    if (!entry) return {
+        cleared: false,
+        path: file,
+        removed: [],
+        remaining: Object.keys(store.entries)
+    };
+    const key = credentialKey(entry.workspaceSlug, entry.projectSlug);
+    const entries = {
+        ...store.entries
+    };
+    delete entries[key];
+    const remaining = Object.keys(entries);
+    if (0 === remaining.length) {
+        try {
+            node_fs.unlinkSync(file);
+        } catch  {}
+        return {
+            cleared: true,
+            path: file,
+            removed: [
+                key
+            ],
+            remaining: []
         };
     }
+    writeStore({
+        version: 2,
+        active: store.active === key ? remaining[0] ?? null : store.active,
+        entries
+    });
+    return {
+        cleared: true,
+        path: file,
+        removed: [
+            key
+        ],
+        remaining
+    };
 }
-function readValidCredentials(nowSeconds = Math.floor(Date.now() / 1000)) {
-    const creds = readCredentials();
+function readValidCredentials(nowSeconds = Math.floor(Date.now() / 1000), selector) {
+    const creds = readCredentials(selector);
     if (!creds) return null;
     if (creds.expiresAt && creds.expiresAt <= nowSeconds) return null;
     return creds;
 }
+const PROJECT_TOKEN_INPUT = {
+    type: "string",
+    description: "Which stored login to use, as '<workspace>/<project>' (or a project slug that matches one login), when extension_auth has signed in to more than one project on this machine. Omitted, the most recent login is used, after EXTENSION_DEV_TOKEN when that is set. Named, it outranks EXTENSION_DEV_TOKEN. extension_auth (action: status) lists the stored logins."
+};
+function noStoredLoginHint(project) {
+    return `No stored login for ${project}. extension_auth (action: status) lists the logins on this machine; extension_auth (action: login, project: "${project}") adds one. Logging in to another project no longer replaces this one.`;
+}
 const DEFAULT_API = PROD_ORIGINS.www;
 function tokenTtlNote(workspaceSlug, projectSlug) {
     const tokensUrl = workspaceSlug && projectSlug ? consoleProjectUrl({
@@ -1060,6 +1199,10 @@ function parseChannels(json) {
     }
     return out;
 }
+function isSuccessfulBuild(item) {
+    const status = String(item?.status ?? "").trim().toLowerCase();
+    return "success" === status || "ready" === status;
+}
 function parseBuildIndex(json) {
     const items = json?.items;
     if (!Array.isArray(items)) return [];
@@ -1526,6 +1669,8 @@ const LAUNCHABLE_BROWSERS = [
     "firefox",
     "waterfox",
     "librewolf",
+    "zen",
+    "floorp",
     "safari",
     "chromium-based",
     "gecko-based",
@@ -1543,6 +1688,8 @@ const REAL_BROWSERS = [
     "firefox",
     "waterfox",
     "librewolf",
+    "zen",
+    "floorp",
     "safari"
 ];
 const MANAGED_BROWSERS = [
@@ -1585,7 +1732,12 @@ async function requestDeviceCode(args) {
             accept: "application/json"
         },
         body: JSON.stringify({
-            project: args.project,
+            ...args.project ? {
+                project: args.project
+            } : {},
+            ...args.workspace ? {
+                workspace: args.workspace
+            } : {},
             clientName: args.clientName ?? "extension-mcp",
             ...args.intent ? {
                 intent: args.intent
@@ -1631,7 +1783,12 @@ async function pollDeviceGrant(args) {
             },
             body: JSON.stringify({
                 device_code: args.deviceCode,
-                project: args.project
+                ...args.project ? {
+                    project: args.project
+                } : {},
+                ...args.workspace ? {
+                    workspace: args.workspace
+                } : {}
             })
         });
         const text = await res.text();
@@ -1773,7 +1930,26 @@ const project_create_schema = {
             outputDirectory: {
                 type: "string",
                 default: "dist/chrome",
-                description: "Directory the build writes the loadable extension into."
+                description: "Directory the build writes the loadable extension into. With more than one browser, `<browser>` in the path becomes each browser's name (Extension.js writes `dist/<browser>`), and when it is left out every browser defaults to `dist/<browser>`."
+            },
+            browsers: {
+                type: "array",
+                items: {
+                    type: "string",
+                    enum: [
+                        "chrome",
+                        "edge",
+                        "firefox"
+                    ]
+                },
+                default: [
+                    "chrome"
+                ],
+                description: "Browsers the platform builds, each enabled with the same install and build command and its own output directory. Pass every browser the extension targets, for example [\"chrome\", \"edge\", \"firefox\"], so the project needs no console visit to go cross-browser."
+            },
+            outputDirectories: {
+                type: "object",
+                description: "Per-browser output directory overrides, for example {\"edge\": \"build/manifestv3\"}. A browser named here wins over `outputDirectory`."
             },
             deviceCode: {
                 type: "string",
@@ -1787,7 +1963,7 @@ const project_create_schema = {
         ]
     }
 };
-function fail(name, message, status, code) {
+function fail(name, message, status, code, hint) {
     return envelope_envelope({
         ok: false,
         command: project_create_COMMAND,
@@ -1796,9 +1972,15 @@ function fail(name, message, status, code) {
             code,
             name,
             message
-        }
+        },
+        ...hint ? {
+            hint
+        } : {}
     });
 }
+function laneClosedHint() {
+    return `Create the project in the console at ${consoleBase()} (workspace page, New project), then run extension_auth (action: login) against it. While the public hold is on, headless creation is open only to workspaces on the platform's allowlist (WWW_MCP_ACTION_ALLOWED_WORKSPACES), the same list that already lets publish, submit and promote run headlessly; this workspace is not on it, so the console is the route.`;
+}
 function pendingEnvelope(start) {
     const complete = String(start.verificationUriComplete || "").trim();
     const hasCompleteLink = complete.length > 0 && complete !== start.verificationUri;
@@ -1825,12 +2007,23 @@ function pendingEnvelope(start) {
 function buildCreateBody(args) {
     const installCommand = String(args.installCommand || "npm install").trim();
     const buildCommand = String(args.buildCommand || "npm run build").trim();
-    const outputDirectory = String(args.outputDirectory || "dist/chrome").trim();
-    const browser = (enabled)=>({
-            enabled,
+    const wanted = new Set((Array.isArray(args.browsers) && args.browsers.length ? args.browsers : [
+        "chrome"
+    ]).map((name)=>String(name).trim().toLowerCase()));
+    const several = wanted.size > 1;
+    const outputFor = (name)=>{
+        const override = args.outputDirectories?.[name];
+        if ("string" == typeof override && override.trim()) return override.trim();
+        const pattern = String(args.outputDirectory || "").trim();
+        if (pattern.includes("<browser>")) return pattern.replaceAll("<browser>", name);
+        if (pattern && !several) return pattern;
+        return `dist/${name}`;
+    };
+    const browser = (name)=>({
+            enabled: wanted.has(name),
             installCommand,
             buildCommand,
-            outputDirectory
+            outputDirectory: outputFor(name)
         });
     return {
         info: {
@@ -1840,9 +2033,9 @@ function buildCreateBody(args) {
             description: String(args.description || `Browser extension project for ${args.owner}/${args.repoName}.`).trim()
         },
         build: {
-            chrome: browser(true),
-            edge: browser(false),
-            firefox: browser(false)
+            chrome: browser("chrome"),
+            edge: browser("edge"),
+            firefox: browser("firefox")
         },
         deployment: {
             branch: "",
@@ -1897,7 +2090,7 @@ async function project_create_handler(args) {
             const message = err?.message || "Could not start the device flow.";
             const laneClosed = /CLI_PROJECT_CREATE_DISABLED|403/.test(String(message));
             const serverMessage = "string" == typeof err?.serverMessage ? err.serverMessage.trim() : "";
-            return fail("CreateStartError", laneClosed ? serverMessage || `Headless project creation is not open on this host yet. Create the project in the console instead, then run extension_auth (action: login) against it. (${message})` : String(message), laneClosed ? "lane-closed" : "create-failed", "E_PLATFORM");
+            return fail("CreateStartError", laneClosed ? serverMessage || `Headless project creation is not open on this host yet. Create the project in the console instead, then run extension_auth (action: login) against it. (${message})` : String(message), laneClosed ? "lane-closed" : "create-failed", "E_PLATFORM", laneClosed ? laneClosedHint() : void 0);
         }
         deviceCode = start.deviceCode;
         interval = start.interval;
@@ -1981,7 +2174,9 @@ async function finishFromPoll(poll, ctx) {
         description: ctx.args.description,
         installCommand: ctx.args.installCommand,
         buildCommand: ctx.args.buildCommand,
-        outputDirectory: ctx.args.outputDirectory
+        outputDirectory: ctx.args.outputDirectory,
+        browsers: ctx.args.browsers,
+        outputDirectories: ctx.args.outputDirectories
     });
     const url = `${ctx.apiBase}/api/cli/projects/create`;
     let res;
@@ -2018,7 +2213,7 @@ async function finishFromPoll(poll, ctx) {
                 project: wantProject
             }
         });
-        if ("CLI_PROJECT_CREATE_DISABLED" === code) return fail("CreateClosed", String(data.message || "Headless project creation is not open yet."), "lane-closed", "E_PLATFORM");
+        if ("CLI_PROJECT_CREATE_DISABLED" === code) return fail("CreateClosed", String(data.message || "Headless project creation is not open yet."), "lane-closed", "E_PLATFORM", laneClosedHint());
         const connectUrl = String(data.connectUrl || "").trim();
         if ("INSTALLATION_ABSENT" === code || "INSTALLATION_ORG_UNSUPPORTED" === code || "INSTALLATION_AMBIGUOUS" === code) return envelope_envelope({
             ok: false,
@@ -2077,83 +2272,330 @@ async function finishFromPoll(poll, ctx) {
         hint: `Project ${finalWorkspace}/${finalProject} exists and its first build was dispatched. The provisioning grant is now spent and nothing was stored on this machine. Next: extension_auth (action: login, project: '${finalWorkspace}/${finalProject}') to mint the project token, then extension_publish to share it.`
     });
 }
-var templates_meta_snapshot_namespaceObject = JSON.parse('{"version":"2","sourceRepo":"extension-js/examples","generatorVersion":"2","commit":"8a565020924a0f8be3ae9fa1c807999ba1b938e4","generatedAt":"2026-08-05T08:25:06.981Z","templates":[{"slug":"action","name":"action","title":"Action (Popup)","version":"1.0.0","manifest_version":3,"description":"Adds a toolbar popup to the browser with a simple page.","uiContext":["action","background"],"surfaces":["action","background"],"entrypoints":["./action/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["action","popup","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click the toolbar icon to open the action popup","Edit src/action/index.html and watch HMR update the popup"],"useCases":["Toolbar popup as the primary UI surface","Quick actions that don\'t need a full sidebar or page","Starting point for popup-based browser extensions"],"docsUrl":"https://extension.js.org/docs/implementation-guide/manifest-json","files":["extension.config.js","src/action/index.html","src/action/scripts.js","src/action/styles.css","src/background.js","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/action/screenshot.png","icon":"examples/action/src/images/icon.png"},{"slug":"action-locales","name":"action-locales","title":"Action Locales","version":"1.0.0","manifest_version":3,"description":"Adds a toolbar popup whose text follows your browser\'s language.","uiContext":["action","background"],"surfaces":["action","background"],"entrypoints":["./action/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/implementation-guide/locales","files":["_locales/en/messages.json","_locales/pt_BR/messages.json","extension.config.js","src/action/index.html","src/action/scripts.js","src/action/styles.css","src/background.js","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/action-locales/screenshot.png","icon":"examples/action-locales/src/images/icon.png"},{"slug":"ai-chatgpt","name":"ai-chatgpt","title":"ChatGPT AI Sidebar","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel where you can chat with ChatGPT about the page you are viewing.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.ts"],"uiFramework":"react","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel","storage","activeTab","scripting","tabs"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"tags":["ai","chatgpt","openai","gpt","chat","sidebar","content-scripts","react","shadcn"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open any web page and click the extension icon to open the sidebar","Enter your ChatGPT API key (from platform.openai.com)","Ask ChatGPT about the active tab, and the content script feeds the page text into the conversation"],"useCases":["Chat with the active tab\'s content using ChatGPT","Summarize or question articles, docs, and dashboards in place","Starting point for page-aware ChatGPT extensions"],"docsUrl":"https://platform.openai.com/docs/api-reference/chat","files":["extension.config.js","src/background.ts","src/components/ApiKeyForm.tsx","src/components/ChatInput.tsx","src/components/ChatMessage.tsx","src/components/ui/button.tsx","src/components/ui/card.tsx","src/components/ui/scroll-area.tsx","src/content/ContentApp.ts","src/content/scripts.ts","src/content/styles.css","src/images/icon.png","src/lib/client.ts","src/lib/page-context.ts","src/lib/utils.ts","src/manifest.json","src/sidebar/SidebarApp.tsx","src/sidebar/index.html","src/sidebar/scripts.tsx","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/ai-chatgpt/screenshot.png","icon":"examples/ai-chatgpt/src/images/icon.png"},{"slug":"ai-claude","name":"ai-claude","title":"Claude AI Sidebar","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel where you can chat with Claude about the page you are viewing.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.ts"],"uiFramework":"react","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel","storage","activeTab","scripting","tabs"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"tags":["ai","claude","anthropic","chat","sidebar","content-scripts","react","shadcn"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open any web page and click the extension icon to open the sidebar","Enter your Claude API key (from console.anthropic.com)","Ask Claude about the active tab, and the content script feeds the page text into the conversation"],"useCases":["Chat with the active tab\'s content using Claude","Summarize or question articles, docs, and dashboards in place","Starting point for page-aware Claude extensions"],"docsUrl":"https://docs.anthropic.com/en/api/getting-started","files":["extension.config.js","src/background.ts","src/components/ApiKeyForm.tsx","src/components/ChatInput.tsx","src/components/ChatMessage.tsx","src/components/ui/button.tsx","src/components/ui/card.tsx","src/components/ui/scroll-area.tsx","src/content/ContentApp.ts","src/content/scripts.ts","src/content/styles.css","src/images/icon.png","src/lib/client.ts","src/lib/page-context.ts","src/lib/utils.ts","src/manifest.json","src/sidebar/SidebarApp.tsx","src/sidebar/index.html","src/sidebar/scripts.tsx","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/ai-claude/screenshot.png","icon":"examples/ai-claude/src/images/icon.png"},{"slug":"ai-gemini","name":"ai-gemini","title":"Gemini AI Sidebar","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel where you can chat with Gemini about the page you are viewing.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.ts"],"uiFramework":"react","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel","storage","activeTab","scripting","tabs"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"tags":["ai","gemini","google","chat","sidebar","content-scripts","react","shadcn"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open any web page and click the extension icon to open the sidebar","Enter your Gemini API key (from aistudio.google.com)","Ask Gemini about the active tab, and the content script feeds the page text into the conversation"],"useCases":["Chat with the active tab\'s content using Gemini","Summarize or question articles, docs, and dashboards in place","Starting point for page-aware Gemini extensions"],"docsUrl":"https://ai.google.dev/gemini-api/docs","files":["extension.config.js","src/background.ts","src/components/ApiKeyForm.tsx","src/components/ChatInput.tsx","src/components/ChatMessage.tsx","src/components/ui/button.tsx","src/components/ui/card.tsx","src/components/ui/scroll-area.tsx","src/content/ContentApp.ts","src/content/scripts.ts","src/content/styles.css","src/images/icon.png","src/lib/client.ts","src/lib/page-context.ts","src/lib/utils.ts","src/manifest.json","src/sidebar/SidebarApp.tsx","src/sidebar/index.html","src/sidebar/scripts.tsx","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/ai-gemini/screenshot.png","icon":"examples/ai-gemini/src/images/icon.png"},{"slug":"ai-perplexity","name":"ai-perplexity","title":"Perplexity AI Sidebar","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel where you can chat with Perplexity about the page you are viewing.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.ts"],"uiFramework":"react","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel","storage","activeTab","scripting","tabs"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"tags":["ai","perplexity","search","chat","sidebar","content-scripts","react","shadcn"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open any web page and click the extension icon to open the sidebar","Enter your Perplexity API key (from perplexity.ai/settings/api)","Ask Perplexity about the active tab, and the content script feeds the page text into the conversation"],"useCases":["Chat with the active tab\'s content using Perplexity","Summarize or question articles, docs, and dashboards in place","Starting point for page-aware Perplexity extensions"],"docsUrl":"https://docs.perplexity.ai/","files":["extension.config.js","src/background.ts","src/components/ApiKeyForm.tsx","src/components/ChatInput.tsx","src/components/ChatMessage.tsx","src/components/ui/button.tsx","src/components/ui/card.tsx","src/components/ui/scroll-area.tsx","src/content/ContentApp.ts","src/content/scripts.ts","src/content/styles.css","src/images/icon.png","src/lib/client.ts","src/lib/page-context.ts","src/lib/utils.ts","src/manifest.json","src/sidebar/SidebarApp.tsx","src/sidebar/index.html","src/sidebar/scripts.tsx","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/ai-perplexity/screenshot.png","icon":"examples/ai-perplexity/src/images/icon.png"},{"slug":"content","name":"@extension-js/content","title":"Content scripts","version":"1.0.0","manifest_version":3,"description":"Injects a small badge into every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["activeTab","scripting"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/implementation-guide/content-scripts","files":["extension.config.js","src/background.js","src/content/scripts.js","src/content/styles.css","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content/screenshot.png","icon":"examples/content/src/images/icon.png"},{"slug":"content-css-modules","name":"@extension-js/content-css-modules","title":"Content CSS Modules","version":"1.0.0","manifest_version":3,"description":"Injects a small styled badge into every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["activeTab","scripting"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/css-modules","files":["extension.config.js","src/background.js","src/content/scripts.js","src/content/styles.module.css","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-css-modules/screenshot.png","icon":"examples/content-css-modules/src/images/icon.png"},{"slug":"content-custom-font","name":"content-custom-font","title":"Content Custom Font","version":"1.0.0","manifest_version":3,"description":"Injects a badge rendered in a custom font into every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["postcss.config.js","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["activeTab","scripting"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/implementation-guide/css","files":["extension.config.js","src/background.js","src/content/scripts.js","src/content/styles.css","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-custom-font/screenshot.png","icon":"examples/content-custom-font/src/images/icon.png"},{"slug":"content-env","name":"content-env","title":"Content Env","version":"1.0.0","manifest_version":3,"description":"Injects a small panel showing the extension\'s environment values into every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.ts","content/scripts.ts"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["activeTab","scripting"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/features/environment-variables","files":["extension.config.js","src/background.ts","src/content/scripts.ts","src/content/styles.css","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-env/screenshot.png","icon":"examples/content-env/src/images/icon.png"},{"slug":"content-less","name":"@extension-js/content-less","title":"Content Less","version":"1.0.0","manifest_version":3,"description":"Injects a small styled badge into every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.js","content/scripts.js"],"uiFramework":"","css":"less","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["activeTab","scripting"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/less","files":["extension.config.js","src/background.js","src/content/scripts.js","src/content/styles.less","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-less/screenshot.png","icon":"examples/content-less/src/images/icon.png"},{"slug":"content-less-modules","name":"@extension-js/content-less-modules","title":"Content Less Modules","version":"1.0.0","manifest_version":3,"description":"Injects a small styled badge into every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.js","content/scripts.js"],"uiFramework":"","css":"less","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["activeTab","scripting"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/less","files":["extension.config.js","src/background.js","src/content/scripts.js","src/content/styles.module.less","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-less-modules/screenshot.png","icon":"examples/content-less-modules/src/images/icon.png"},{"slug":"content-main-world","name":"content-main-world","title":"Main-world Content Script","version":"1.0.0","manifest_version":3,"description":"Injects a small UI into every web page from both the extension and the page\'s own JavaScript world.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.js","content/isolated-one.js","content/isolated-two.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["activeTab","scripting"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"tags":["content-scripts","main-world","isolated-world","javascript"],"difficulty":"intermediate","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open any page and watch the main-world script run alongside isolated entries","Inspect window.postMessage bridges between isolated and main worlds"],"useCases":["Hook into page-level globals that isolated content scripts cannot reach","Bridge isolated and main-world execution contexts cleanly","Reference for multi-group content_scripts in MV3"],"docsUrl":"https://extension.js.org/docs/implementation-guide/content-scripts","files":["extension.config.js","src/background.js","src/content/isolated-one.js","src/content/isolated-two.js","src/content/scripts.js","src/content/styles.css","src/content/utils/constants.js","src/content/utils/create-badge.js","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-main-world/screenshot.png","icon":"examples/content-main-world/src/images/icon.png"},{"slug":"content-multi-one-entry","name":"content-multi-one-entry","title":"Content Multi One Entry","version":"1.0.0","manifest_version":3,"description":"Injects four small elements into every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.js","content/script-top-left.js","content/script-top-right.js","content/script-bottom-left.js","content/script-bottom-right.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["activeTab","scripting"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/implementation-guide/content-scripts","files":["extension.config.js","src/background.js","src/content/script-bottom-left.js","src/content/script-bottom-right.js","src/content/script-top-left.js","src/content/script-top-right.js","src/content/styles.css","src/content/utils/constants.js","src/content/utils/create-badge.js","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-multi-one-entry/screenshot.png","icon":"examples/content-multi-one-entry/src/images/icon.png"},{"slug":"content-multi-three-entries","name":"content-multi-three-entries","title":"Multi-entry Content Scripts","version":"1.0.0","manifest_version":3,"description":"Injects four small elements into every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.js","content/script-top-left.js","content/script-top-right.js","content/script-bottom-left.js","content/script-bottom-right.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["activeTab","scripting"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"tags":["content-scripts","multi-entry","javascript"],"difficulty":"intermediate","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open any page and three separate content scripts inject small elements","Edit any of the entries in src/content/ to see HMR update independently"],"useCases":["Split content-script logic across multiple entries with different match rules","Target different page contexts with focused, independent bundles","Reference for the multi-entry content_scripts pattern in MV3"],"docsUrl":"https://extension.js.org/docs/implementation-guide/content-scripts","files":["extension.config.js","src/background.js","src/content/script-bottom-left.js","src/content/script-bottom-right.js","src/content/script-top-left.js","src/content/script-top-right.js","src/content/styles.css","src/content/utils/constants.js","src/content/utils/create-badge.js","src/images/icon.png","src/manifest.json","src/screenshot.png"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-multi-three-entries/screenshot.png","icon":"examples/content-multi-three-entries/src/images/icon.png"},{"slug":"content-preact","name":"content-preact","title":"Content Preact","version":"1.0.0","manifest_version":3,"description":"Shows a small overlay UI on every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.ts","./content/scripts.tsx"],"uiFramework":"preact","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/preact","files":["extension.config.js","src/background.ts","src/content/ContentApp.tsx","src/content/scripts.tsx","src/content/styles.css","src/images/chromeWindow.png","src/images/icon.png","src/images/preact.png","src/images/tailwind.png","src/images/tailwind_bg.png","src/images/typescript.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-preact/screenshot.png","icon":"examples/content-preact/src/images/icon.png"},{"slug":"content-react","name":"content-react","title":"Content React","version":"1.0.0","manifest_version":3,"description":"Shows a small overlay UI on every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.ts","./content/scripts.tsx"],"uiFramework":"react","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/react","files":["extension.config.js","src/background.ts","src/content/ContentApp.tsx","src/content/scripts.tsx","src/content/styles.css","src/images/chromeWindow.png","src/images/icon.png","src/images/react.png","src/images/tailwind.png","src/images/tailwind_bg.png","src/images/typescript.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-react/screenshot.png","icon":"examples/content-react/src/images/icon.png"},{"slug":"content-sass","name":"@extension-js/content-sass","title":"Content Sass","version":"1.0.0","manifest_version":3,"description":"Injects a small styled badge into every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.js","content/scripts.js"],"uiFramework":"","css":"sass","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["activeTab","scripting"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"docsUrl":"https://extension.js.org/docs/implementation-guide/css","files":["extension.config.js","src/background.js","src/content/scripts.js","src/content/styles.scss","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-sass/screenshot.png","icon":"examples/content-sass/src/images/icon.png"},{"slug":"content-sass-modules","name":"@extension-js/content-sass-modules","title":"Content Sass Modules","version":"1.0.0","manifest_version":3,"description":"Injects a small styled badge into every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.js","content/scripts.js"],"uiFramework":"","css":"sass","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{"build":"extension build"},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["activeTab","scripting"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/sass","files":["extension.config.js","src/background.js","src/content/scripts.js","src/content/styles.module.scss","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-sass-modules/screenshot.png","icon":"examples/content-sass-modules/src/images/icon.png"},{"slug":"content-svelte","name":"content-svelte","title":"Content Svelte","version":"1.0.0","manifest_version":3,"description":"Shows a small overlay UI on every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.ts","./content/scripts.ts"],"uiFramework":"svelte","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/svelte","files":["extension.config.js","src/background.ts","src/content/ContentApp.svelte","src/content/scripts.ts","src/content/styles.css","src/content/svelte.d.ts","src/images/chromeWindow.png","src/images/icon.png","src/images/svelte.png","src/images/tailwind.png","src/images/tailwind_bg.png","src/images/typescript.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-svelte/screenshot.png","icon":"examples/content-svelte/src/images/icon.png"},{"slug":"content-typescript","name":"content-typescript","title":"Content TypeScript","version":"1.0.0","manifest_version":3,"description":"Shows a small overlay UI on every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.ts","content/scripts.ts"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["activeTab","scripting"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/typescript","files":["extension.config.js","src/background.ts","src/content/scripts.ts","src/content/styles.css","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-typescript/screenshot.png","icon":"examples/content-typescript/src/images/icon.png"},{"slug":"content-vue","name":"content-vue","title":"Content Vue","version":"1.0.0","manifest_version":3,"description":"Shows a small overlay UI on every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.ts","./content/scripts.ts"],"uiFramework":"vue","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/vue","files":["extension.config.js","src/background.ts","src/content/ContentApp.vue","src/content/scripts.ts","src/content/shims-vue.d.ts","src/content/styles.css","src/images/chromeWindow.png","src/images/icon.png","src/images/logo.svg","src/images/tailwind.png","src/images/tailwind_bg.png","src/images/typescript.png","src/images/vue.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-vue/screenshot.png","icon":"examples/content-vue/src/images/logo.svg"},{"slug":"init","name":"init","title":"Initial","version":"1.0.0","manifest_version":3,"description":"A minimal extension that loads in your browser, ready to build on.","uiContext":[],"surfaces":[],"entrypoints":[],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":false,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/getting-started/immediately","files":["extension.config.js","src/images/icon.png","src/images/javascript.png","src/index.js","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/init/screenshot.png","icon":"examples/init/src/images/icon.png"},{"slug":"javascript","name":"javascript","title":"JavaScript","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser with a simple page.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/getting-started/templates/javascript","files":["extension.config.js","src/background.js","src/content/ContentApp.js","src/content/scripts.js","src/content/styles.css","src/images/icon.png","src/manifest.json","src/sidebar/SidebarApp.js","src/sidebar/index.html","src/sidebar/scripts.js","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/javascript/screenshot.png","icon":"examples/javascript/src/images/icon.png"},{"slug":"new","name":"new","title":"New Tab","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple page you can customize.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/implementation-guide/html","files":["extension.config.js","src/background.js","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.js","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/new/screenshot.png","icon":"examples/new/src/images/icon.png"},{"slug":"new-browser-flags","name":"new-browser-flags","title":"Newtab Browser Flags","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a launcher that opens the extension\'s sidebar panel.","uiContext":["content","newtab","sidebar","background"],"surfaces":["content","newtab","sidebar","background"],"entrypoints":["newtab/index.html","sidebar/index.html","background.js","content/content.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{"build":"extension build"},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["activeTab","scripting","notifications"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/browsers/browser-flags","files":["extension.config.js","src/background.js","src/content/content.js","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/newtab.css","src/newtab/newtab.js","src/sidebar/index.html","src/sidebar/sidebar.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/new-browser-flags/screenshot.png","icon":"examples/new-browser-flags/src/images/icon.png"},{"slug":"new-config-eslint","name":"new-config-eslint","title":"Newtab Config ESLint","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js","eslint.config.mjs"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/integrations/eslint","files":["extension.config.js","src/background.js","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.ts","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/new-config-eslint/screenshot.png","icon":"examples/new-config-eslint/src/images/icon.png"},{"slug":"new-config-prettier","name":"new-config-prettier","title":"Newtab Config Prettier","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js",".prettierrc"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/integrations/prettier","files":["extension.config.js","src/background.js","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.ts","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/new-config-prettier/screenshot.png","icon":"examples/new-config-prettier/src/images/icon.png"},{"slug":"new-config-stylelint","name":"new-config-stylelint","title":"Newtab Config Stylelint","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"sass","configFiles":[".stylelintrc.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/integrations/stylelint","files":["extension.config.js","src/background.js","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.js","src/newtab/styles.scss"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/new-config-stylelint/screenshot.png","icon":"examples/new-config-stylelint/src/images/icon.png"},{"slug":"new-crypto","name":"new-crypto","title":"Newtab Crypto","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a page that hashes any text you type using SHA-256.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/node","files":["extension.config.js","src/background.js","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.ts","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/new-crypto/screenshot.png","icon":"examples/new-crypto/src/images/icon.png"},{"slug":"new-env","name":"new-env","title":"Environment Variables","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a page showing the extension\'s environment values.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["env","configuration","new-tab","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Copy .env.example to .env and edit the values","Run npm run dev to launch the extension","Open a new tab and the page reads injected EXTENSION_PUBLIC_* values"],"useCases":["Inject build-time configuration without leaking secrets","Switch behavior per browser, mode, or deployment target","Reference for safe env-var usage across JS, JSON, and HTML"],"docsUrl":"https://extension.js.org/docs/features/environment-variables","files":["extension.config.js","src/background.js","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.ts","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/new-env/screenshot.png","icon":"examples/new-env/src/images/icon.png"},{"slug":"new-less","name":"new-less","title":"Newtab Less","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple styled page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"less","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/less","files":["extension.config.js","src/background.js","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.js","src/newtab/styles.less"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/new-less/screenshot.png","icon":"examples/new-less/src/images/icon.png"},{"slug":"new-preact","name":"new-preact","title":"Newtab Preact","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple Preact page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"preact","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/preact","files":["extension.config.js","src/background.js","src/images/icon.png","src/manifest.json","src/newtab/NewTabApp.tsx","src/newtab/index.html","src/newtab/scripts.tsx","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/new-preact/screenshot.png","icon":"examples/new-preact/src/images/icon.png"},{"slug":"new-react","name":"new-react","title":"Newtab React","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple React page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"react","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/react","files":["extension.config.js","src/background.js","src/images/icon.png","src/manifest.json","src/newtab/NewTabApp.tsx","src/newtab/index.html","src/newtab/scripts.tsx","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/new-react/screenshot.png","icon":"examples/new-react/src/images/icon.png"},{"slug":"new-react-router","name":"new-react-router","title":"Newtab React Router","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a small React app you can navigate across routes.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"react","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/react","files":["extension.config.js","src/background.js","src/images/icon.png","src/manifest.json","src/newtab/NewTabApp.tsx","src/newtab/index.html","src/newtab/scripts.tsx","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/new-react-router/screenshot.png","icon":"examples/new-react-router/src/images/icon.png"},{"slug":"new-sass","name":"new-sass","title":"Newtab Sass","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple styled page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"sass","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/sass","files":["extension.config.js","src/background.js","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.js","src/newtab/styles.scss"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/new-sass/screenshot.png","icon":"examples/new-sass/src/images/icon.png"},{"slug":"new-svelte","name":"new-svelte","title":"Newtab Svelte","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple Svelte page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"svelte","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/svelte","files":["extension.config.js","src/background.js","src/images/icon.png","src/manifest.json","src/newtab/NewTabApp.svelte","src/newtab/index.html","src/newtab/scripts.ts","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/new-svelte/screenshot.png","icon":"examples/new-svelte/src/images/icon.png"},{"slug":"new-typescript","name":"new-typescript","title":"Newtab TypeScript","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/typescript","files":["extension.config.js","src/background.js","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.ts","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/new-typescript/screenshot.png","icon":"examples/new-typescript/src/images/icon.png"},{"slug":"new-vue","name":"new-vue","title":"Newtab Vue","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple Vue page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"vue","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/vue","files":["extension.config.js","src/background.js","src/images/icon.png","src/manifest.json","src/newtab/NewTabApp.vue","src/newtab/index.html","src/newtab/scripts.ts","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/new-vue/screenshot.png","icon":"examples/new-vue/src/images/icon.png"},{"slug":"playwright","name":"playwright","title":"Playwright E2E Sidebar","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser, covered end to end by Playwright tests.","uiContext":["sidebar","action","background"],"surfaces":["action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{"test":"playwright test"},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["testing","playwright","e2e","sidebar","typescript"],"difficulty":"intermediate","timeToFirstSuccessMinutes":4,"firstSteps":["Run npm install to set up Playwright deps","Run npm run dev to launch the extension","Run npm test to execute the Playwright spec against the loaded extension"],"useCases":["End-to-end testing for browser-extension surfaces (popup, sidebar, content)","CI-ready Playwright setup wired to Extension.js builds","Reference for automating extension flows in headed and headless modes"],"docsUrl":"https://extension.js.org/docs/workflows/playwright-e2e","files":["extension.config.js","src/background.ts","src/images/icon.png","src/manifest.json","src/sidebar/SidebarApp.ts","src/sidebar/index.html","src/sidebar/scripts.ts","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/playwright/screenshot.png","icon":"examples/playwright/src/images/icon.png"},{"slug":"preact","name":"preact","title":"Preact","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser with a simple Preact page.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.tsx"],"uiFramework":"preact","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"docsUrl":"https://extension.js.org/docs/getting-started/templates/preact","files":["extension.config.js","src/background.ts","src/content/ContentApp.tsx","src/content/scripts.tsx","src/content/styles.css","src/images/icon.png","src/manifest.json","src/public/extension.svg","src/public/logo.svg","src/sidebar/SidebarApp.tsx","src/sidebar/index.html","src/sidebar/scripts.tsx","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/preact/screenshot.png","icon":"examples/preact/src/images/icon.png"},{"slug":"react","name":"react","title":"React","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser with a simple React page.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.tsx"],"uiFramework":"react","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"docsUrl":"https://extension.js.org/docs/getting-started/templates/react","files":["extension.config.js","src/background.ts","src/content/ContentApp.tsx","src/content/scripts.tsx","src/content/styles.css","src/images/icon.png","src/manifest.json","src/sidebar/SidebarApp.tsx","src/sidebar/index.html","src/sidebar/scripts.tsx","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/react/screenshot.png","icon":"examples/react/src/images/icon.png"},{"slug":"sidebar","name":"sidebar","title":"Sidebar page","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser with a simple page.","uiContext":["sidebar","action","background"],"surfaces":["action","sidebar","background"],"entrypoints":["sidebar/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"docsUrl":"https://extension.js.org/docs/implementation-guide/html","files":["extension.config.js","src/background.js","src/images/icon.png","src/manifest.json","src/sidebar/index.html","src/sidebar/scripts.js","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/sidebar/screenshot.png","icon":"examples/sidebar/src/images/icon.png"},{"slug":"sidebar-antd","name":"sidebar-antd","title":"Sidebar Ant Design","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser showing Ant Design components.","uiContext":["sidebar","action","background"],"surfaces":["action","sidebar","background"],"entrypoints":["sidebar/index.html","background.js"],"uiFramework":"react","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":false,"docsUrl":"https://ant.design/docs/react/introduce","files":["extension.config.js","src/background.js","src/images/icon.png","src/manifest.json","src/sidebar/SidebarApp.jsx","src/sidebar/index.html","src/sidebar/scripts.jsx","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/sidebar-antd/screenshot.png","icon":"examples/sidebar-antd/src/images/icon.png"},{"slug":"sidebar-monorepo-turborepo","name":"sidebar-monorepo-turborepo","title":"Sidebar Turborepo","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel and shows a small overlay UI on every web page you visit.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{"dev":"extension dev packages/extension","build":"extension build packages/extension"},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"docsUrl":"https://turborepo.dev/docs","files":["extension.config.js","packages/analytics/src/index.js","packages/extension/src/background.js","packages/extension/src/content/scripts.js","packages/extension/src/content/styles.css","packages/extension/src/images/icon.png","packages/extension/src/manifest.json","packages/extension/src/sidebar/SidebarApp.js","packages/extension/src/sidebar/index.html","packages/extension/src/sidebar/scripts.js","packages/extension/src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/sidebar-monorepo-turborepo/screenshot.png","icon":null},{"slug":"sidebar-shadcn","name":"sidebar-shadcn","title":"Sidebar shadcn","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser built with shadcn/ui components.","uiContext":["sidebar","action","background"],"surfaces":["action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts"],"uiFramework":"react","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"docsUrl":"https://extension.js.org/docs/integrations/shadcnui","files":["extension.config.js","src/background.ts","src/components/ui/button.tsx","src/components/ui/card.tsx","src/components/ui/label.tsx","src/components/ui/switch.tsx","src/images/icon.png","src/lib/utils.ts","src/manifest.json","src/sidebar/SidebarApp.tsx","src/sidebar/index.html","src/sidebar/scripts.tsx","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/sidebar-shadcn/screenshot.png","icon":"examples/sidebar-shadcn/src/images/icon.png"},{"slug":"special-folders-pages","name":"special-folders-pages","title":"Special Folders: pages/","version":"1.0.0","manifest_version":3,"description":"Opens a welcome page in a new tab when the extension loads.","uiContext":["background"],"surfaces":["background"],"entrypoints":["background.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["special-folders","pages","welcome-page","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","A welcome page from src/pages/ opens automatically on install","Add another HTML file under src/pages/ and it ships as a separate page"],"useCases":["Onboarding, help, and welcome pages that ship with the extension","Standalone HTML routes without manifest plumbing","Reference for Extension.js\'s pages/ special folder convention"],"docsUrl":"https://extension.js.org/docs/features/special-folders","files":["extension.config.js","pages/custom.html","pages/main.html","pages/main.js","pages/welcome.html","public/css/file.css","public/html/file.html","public/js/file.js","src/background.js","src/images/icon.png","src/images/javascript.png","src/manifest.json","src/sandbox/index.html","src/sandbox/scripts.js","src/sandbox/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/special-folders-pages/screenshot.png","icon":"examples/special-folders-pages/src/images/icon.png"},{"slug":"special-folders-scripts","name":"special-folders-scripts","title":"Special Folders Scripts","version":"1.0.0","manifest_version":3,"description":"Shows a small overlay on web pages and a toolbar popup that runs the extension\'s bundled scripts.","uiContext":["content","action","background"],"surfaces":["content","action","background"],"entrypoints":["background.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["activeTab","scripting"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"docsUrl":"https://extension.js.org/docs/features/special-folders","files":["extension.config.js","scripts/script-one.js","scripts/script-three.js","scripts/script-two.js","src/background.js","src/content/scripts.js","src/content/styles.css","src/images/icon.png","src/images/javascript.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/special-folders-scripts/screenshot.png","icon":"examples/special-folders-scripts/src/images/icon.png"},{"slug":"svelte","name":"svelte","title":"Svelte","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser with a simple Svelte page.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.ts"],"uiFramework":"svelte","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"docsUrl":"https://extension.js.org/docs/getting-started/templates/svelte","files":["extension.config.js","src/background.ts","src/content/ContentApp.svelte","src/content/scripts.ts","src/content/styles.css","src/images/icon.png","src/manifest.json","src/public/extension.svg","src/sidebar/SidebarApp.svelte","src/sidebar/index.html","src/sidebar/scripts.ts","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/svelte/screenshot.png","icon":"examples/svelte/src/images/icon.png"},{"slug":"transformers-js","name":"transformers-js","title":"Transformers.js","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel that classifies the active page or your selected text with on-device AI models.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel","storage","unlimitedStorage","activeTab","scripting","tabs","contextMenus"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/webassembly","files":["extension.config.js","src/background.js","src/constants.js","src/content/scripts.js","src/images/icon.png","src/manifest.json","src/sidebar/SidebarApp.js","src/sidebar/index.html","src/sidebar/sakura.css","src/sidebar/scripts.js","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/transformers-js/screenshot.png","icon":"examples/transformers-js/src/images/icon.png"},{"slug":"typescript","name":"typescript","title":"TypeScript","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser with a simple page.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.ts"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"docsUrl":"https://extension.js.org/docs/getting-started/templates/typescript","files":["extension.config.js","src/background.ts","src/content/ContentApp.ts","src/content/scripts.ts","src/content/styles.css","src/content/types.d.ts","src/images/icon.png","src/manifest.json","src/sidebar/SidebarApp.ts","src/sidebar/index.html","src/sidebar/scripts.ts","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/typescript/screenshot.png","icon":"examples/typescript/src/images/icon.png"},{"slug":"vue","name":"vue","title":"Vue","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser with a simple Vue page.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.ts"],"uiFramework":"vue","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"docsUrl":"https://extension.js.org/docs/getting-started/templates/vue","files":["extension.config.js","src/background.ts","src/content/ContentApp.vue","src/content/scripts.ts","src/content/styles.css","src/content/types.d.ts","src/images/icon.png","src/manifest.json","src/sidebar/SidebarApp.vue","src/sidebar/index.html","src/sidebar/scripts.ts","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/vue/screenshot.png","icon":"examples/vue/src/images/icon.png"}]}');
-const CACHE_DIR = node_path.join(node_os.homedir(), ".cache", "extension-js");
-const CACHE_FILE = node_path.join(CACHE_DIR, "templates-meta.json");
-const CACHE_TTL_MS = 3600000;
-function isUsableMeta(data) {
-    return "object" == typeof data && null !== data && Array.isArray(data.templates) && data.templates.length > 0;
-}
-function isCacheValid() {
-    try {
-        const stat = node_fs.statSync(CACHE_FILE);
-        return Date.now() - stat.mtimeMs < CACHE_TTL_MS;
-    } catch  {
-        return false;
+const workspace_create_COMMAND = "extension_workspace_create";
+const workspace_create_FIRST_CALL_BUDGET_MS = 8000;
+const workspace_create_RESUME_BUDGET_MS = 22000;
+const SLUG_PATTERN = /^[a-z0-9](?:[a-z0-9-]{0,62}[a-z0-9])?$/i;
+const workspace_create_schema = {
+    name: workspace_create_COMMAND,
+    description: "Create an extension.dev workspace that does not exist yet, without opening the console. Use it before extension_project_create when the project's workspace is not there: project creation can only target an existing workspace, and this tool is what brings one into existence. Two-phase, like login: the first call returns a code and a URL where a signed-in GitHub user approves creating exactly this workspace and becomes its owner; call again with the returned deviceCode to finish. Check `ownerGithubLogin` in the answer: whoever approved the code owns the workspace. The approval mints a grant that lives minutes, can only create the one named workspace, names no project, and is never stored on this machine. Then run extension_project_create against '<workspace>/<project>'.",
+    inputSchema: {
+        type: "object",
+        properties: {
+            workspace: {
+                type: "string",
+                description: "Slug of the new workspace, lowercase letters, digits and hyphens, no slash. It must not exist yet; a personal workspace (the GitHub login) already exists for every signed-in user, so this is for a shared or organization-style workspace."
+            },
+            displayName: {
+                type: "string",
+                description: "Human name for the workspace. Defaults to the slug."
+            },
+            description: {
+                type: "string",
+                description: "Short workspace description. Optional."
+            },
+            developerUrl: {
+                type: "string",
+                description: "Public URL for the workspace. Optional."
+            },
+            deviceCode: {
+                type: "string",
+                description: "Resume token from the prior call's `deviceCode`; omit on the first call."
+            },
+            api: API_BASE
+        },
+        required: [
+            "workspace"
+        ]
     }
+};
+function workspace_create_fail(name, message, status, code, hint) {
+    return envelope_envelope({
+        ok: false,
+        command: workspace_create_COMMAND,
+        status,
+        error: {
+            code,
+            name,
+            message
+        },
+        ...hint ? {
+            hint
+        } : {}
+    });
 }
-function readCachedMeta() {
-    try {
-        const cached = JSON.parse(node_fs.readFileSync(CACHE_FILE, "utf8"));
-        return isUsableMeta(cached) ? cached : null;
-    } catch  {
-        return null;
-    }
+function workspace_create_laneClosedHint() {
+    return `Create the workspace in the console at ${consoleBase()} (workspace switcher, New workspace), then run extension_project_create against it. Headless workspace creation opens with the platform; during the public hold only an allowlisted workspace slug can be created this way.`;
 }
-async function fetchTemplatesMeta() {
-    if (isCacheValid()) {
-        const cached = readCachedMeta();
-        if (cached) return cached;
+function workspace_create_pendingEnvelope(start) {
+    const complete = String(start.verificationUriComplete || "").trim();
+    const hasCompleteLink = complete.length > 0 && complete !== start.verificationUri;
+    const message = hasCompleteLink ? `Open ${complete} and approve creating the workspace (code ${start.userCode} is pre-filled), then call ${workspace_create_COMMAND} again with this deviceCode and the same arguments. If the page asks for a code, enter ${start.userCode} at ${start.verificationUri}. The GitHub account that approves becomes the workspace owner.` : `Open ${start.verificationUri}, enter code ${start.userCode}, approve creating the workspace, then call ${workspace_create_COMMAND} again with this deviceCode and the same arguments. The GitHub account that approves becomes the workspace owner.`;
+    return envelope_envelope({
+        ok: false,
+        command: workspace_create_COMMAND,
+        status: "authorization-pending",
+        error: {
+            code: "E_AUTH_PENDING",
+            message
+        },
+        value: {
+            userCode: start.userCode,
+            verificationUri: start.verificationUri,
+            ...hasCompleteLink ? {
+                verificationUriComplete: complete
+            } : {},
+            deviceCode: start.deviceCode
+        },
+        hint: message
+    });
+}
+async function workspace_create_handler(args) {
+    const workspace = String(args.workspace || "").trim().toLowerCase();
+    if (!SLUG_PATTERN.test(workspace)) return workspace_create_fail("BadRequest", "workspace must be a single slug: lowercase letters, digits and hyphens, no slash, at most 64 characters.", "bad-request", "E_BAD_REQUEST");
+    const apiCheck = safeApiBase(resolveApiBase(args.api), args.api);
+    if (!apiCheck.ok) return workspace_create_fail("ConfigError", apiCheck.message, "bad-request", "E_BAD_REQUEST");
+    const apiBase = apiCheck.base;
+    let config;
+    try {
+        config = await fetchLoginConfig(apiBase);
+    } catch (err) {
+        return workspace_create_fail("ConfigError", err?.message || "Could not load login config.", "create-failed", "E_PLATFORM");
     }
-    let lastStatus = 0;
-    for (const url of (await templateMetaUrls()))try {
-        const response = await fetch(url);
-        if (!response.ok) {
-            lastStatus = response.status;
-            continue;
+    let deviceCode = String(args.deviceCode || "").trim();
+    let interval = 5;
+    let budgetMs = workspace_create_RESUME_BUDGET_MS;
+    if (!deviceCode) {
+        let start;
+        try {
+            start = await requestDeviceCode({
+                apiBase,
+                path: config.deviceCodeUrl,
+                workspace,
+                intent: "create-workspace"
+            });
+        } catch (err) {
+            const message = err?.message || "Could not start the device flow.";
+            const laneClosed = /CLI_WORKSPACE_CREATE_DISABLED|403/.test(String(message));
+            const serverMessage = "string" == typeof err?.serverMessage ? err.serverMessage.trim() : "";
+            return workspace_create_fail("CreateStartError", laneClosed ? serverMessage || `Headless workspace creation is not open on this host yet. Create the workspace in the console instead. (${message})` : String(message), laneClosed ? "lane-closed" : "create-failed", "E_PLATFORM", laneClosed ? workspace_create_laneClosedHint() : void 0);
         }
-        const data = await response.json();
-        if (!isUsableMeta(data)) continue;
-        node_fs.mkdirSync(CACHE_DIR, {
-            recursive: true
+        deviceCode = start.deviceCode;
+        interval = start.interval;
+        budgetMs = workspace_create_FIRST_CALL_BUDGET_MS;
+        const early = await pollDeviceGrant({
+            apiBase,
+            path: config.deviceTokenUrl,
+            workspace,
+            deviceCode,
+            interval,
+            budgetMs
         });
-        const tmpFile = `${CACHE_FILE}.${process.pid}.tmp`;
-        node_fs.writeFileSync(tmpFile, JSON.stringify(data, null, 2));
-        node_fs.renameSync(tmpFile, CACHE_FILE);
-        return data;
-    } catch  {}
-    const stale = readCachedMeta();
-    if (stale) return stale;
-    if (isUsableMeta(templates_meta_snapshot_namespaceObject)) return templates_meta_snapshot_namespaceObject;
-    throw new Error(`Failed to fetch templates-meta.json (${lastStatus || "network error"}).`);
+        if (!early.ok && "pending" === early.reason) return workspace_create_pendingEnvelope(start);
+        return workspace_create_finishFromPoll(early, {
+            apiBase,
+            workspace,
+            args,
+            verificationUri: config.verificationUri,
+            deviceCode
+        });
+    }
+    const poll = await pollDeviceGrant({
+        apiBase,
+        path: config.deviceTokenUrl,
+        workspace,
+        deviceCode,
+        interval,
+        budgetMs
+    });
+    return workspace_create_finishFromPoll(poll, {
+        apiBase,
+        workspace,
+        args,
+        verificationUri: config.verificationUri,
+        deviceCode
+    });
 }
-async function listTemplates(filters) {
-    const meta = await fetchTemplatesMeta();
-    let templates = meta.templates;
-    if (filters?.surface) templates = templates.filter((t)=>t.surfaces.includes(filters.surface));
-    if (filters?.framework !== void 0) templates = templates.filter((t)=>t.uiFramework === filters.framework);
-    if (filters?.tags?.length) templates = templates.filter((t)=>filters.tags.some((tag)=>t.tags?.includes(tag) || t.aiRecommendFor?.includes(tag)));
-    if (filters?.featured) templates = templates.filter((t)=>t.featured);
-    if (filters?.query) {
-        const phrase = filters.query.toLowerCase().trim();
-        const STOP = new Set([
-            "the",
-            "a",
-            "an",
-            "and",
-            "or",
-            "for",
-            "with",
-            "that",
-            "this",
-            "to",
-            "of",
-            "on",
-            "in",
-            "into",
-            "your",
-            "my",
-            "me",
+async function workspace_create_finishFromPoll(poll, ctx) {
+    if (!poll.ok) {
+        if ("pending" === poll.reason) return envelope_envelope({
+            ok: false,
+            command: workspace_create_COMMAND,
+            status: "authorization-pending",
+            error: {
+                code: "E_AUTH_PENDING",
+                message: `Still waiting for approval at ${ctx.verificationUri}. Approve there, then call ${workspace_create_COMMAND} again with this same deviceCode.`
+            },
+            value: {
+                verificationUri: ctx.verificationUri,
+                deviceCode: ctx.deviceCode
+            }
+        });
+        if ("denied" === poll.reason) return workspace_create_fail("CreateDenied", "Creating the workspace was denied at extension.dev/device.", "create-denied", "E_AUTH_DENIED");
+        if ("expired" === poll.reason) return workspace_create_fail("CreateExpired", `The device code expired. Run ${workspace_create_COMMAND} again to restart.`, "create-expired", "E_AUTH_EXPIRED");
+        return workspace_create_fail("CreateAuthError", poll.message || "Device authorization failed.", "create-failed", "E_AUTH_FAILED");
+    }
+    const grant = poll.data;
+    const token = String(grant.token || "").trim();
+    const workspaceSlug = String(grant.workspaceSlug || "").trim().toLowerCase();
+    if (workspaceSlug !== ctx.workspace) return workspace_create_fail("CreateScopeError", `The approval was scoped to workspace '${workspaceSlug}', not the requested '${ctx.workspace}'. Nothing was created. Run ${workspace_create_COMMAND} again with the intended workspace.`, "create-failed", "E_AUTH_FAILED");
+    if ("workspace-provisioning" !== String(grant.tokenKind || "")) return envelope_envelope({
+        ok: false,
+        command: workspace_create_COMMAND,
+        status: "workspace-exists",
+        error: {
+            code: "E_PLATFORM",
+            message: `Workspace '${ctx.workspace}' already exists on this host, so there is nothing to create.`
+        },
+        hint: `Run extension_project_create with project '${ctx.workspace}/<project>' instead.`
+    });
+    const url = `${ctx.apiBase}/api/cli/workspaces/create`;
+    let res;
+    try {
+        res = await fetch(url, {
+            method: "POST",
+            headers: {
+                authorization: `Bearer ${token}`,
+                "content-type": "application/json",
+                ...identityHeaders(workspace_create_COMMAND)
+            },
+            body: JSON.stringify({
+                displayName: String(ctx.args.displayName || ctx.workspace).trim(),
+                description: String(ctx.args.description || "").trim(),
+                developerUrl: String(ctx.args.developerUrl || "").trim()
+            })
+        });
+    } catch (err) {
+        return workspace_create_fail("CreateNetworkError", `Could not reach ${url}: ${err?.message || err}`, "create-failed", "E_NETWORK");
+    }
+    const text = await res.text();
+    let data;
+    try {
+        data = JSON.parse(text);
+    } catch  {
+        data = {
+            message: text
+        };
+    }
+    if (!res.ok) {
+        const code = String(data.code || "");
+        if (sawPlatformHold(res, data)) return platformHoldEnvelope({
+            command: workspace_create_COMMAND,
+            name: "CreateHeld",
+            body: data,
+            value: {
+                workspace: ctx.workspace
+            }
+        });
+        if ("CLI_WORKSPACE_CREATE_DISABLED" === code) return workspace_create_fail("CreateClosed", String(data.message || "Headless workspace creation is not open yet."), "lane-closed", "E_PLATFORM", workspace_create_laneClosedHint());
+        if ("WORKSPACE_EXISTS" === code || "WORKSPACE_SLUG_RESERVED" === code) return envelope_envelope({
+            ok: false,
+            command: workspace_create_COMMAND,
+            status: "workspace-exists",
+            error: {
+                code: "E_PLATFORM",
+                message: String(data.message || `Workspace '${ctx.workspace}' cannot be created.`)
+            },
+            hint: "WORKSPACE_EXISTS" === code ? `Run extension_project_create with project '${ctx.workspace}/<project>' instead.` : "Pick a different slug and run the tool again."
+        });
+        return workspace_create_fail("CreateError", `create failed (${res.status}): ${String(data.message || data.error || text || "unknown error").slice(0, 500)}`, "create-failed", "E_PLATFORM");
+    }
+    const finalSlug = String(data.slug || ctx.workspace);
+    const owner = String(data.ownerGithubLogin || grant.ownerGithubLogin || "");
+    return envelope_envelope({
+        ok: true,
+        command: workspace_create_COMMAND,
+        status: "created",
+        value: {
+            workspaceSlug: finalSlug,
+            workspaceId: data.id ?? null,
+            displayName: data.displayName ?? finalSlug,
+            ownerGithubLogin: owner || null,
+            consoleUrl: `${consoleBase()}/${encodeURIComponent(finalSlug)}`,
+            nextSteps: [
+                `extension_project_create (project: '${finalSlug}/<project>', repo: '<owner>/<repo>')`
+            ]
+        },
+        hint: `Workspace ${finalSlug} exists${owner ? `, owned by ${owner}` : ""}. The grant is now spent and nothing was stored on this machine. If ${owner || "the approver"} is not who you meant to own it, stop here: ownership follows the GitHub account that approved the code. Next: extension_project_create with project '${finalSlug}/<project>'.`
+    });
+}
+var templates_meta_snapshot_namespaceObject = JSON.parse('{"version":"2","sourceRepo":"extension-js/examples","generatorVersion":"2","commit":"2c3a486af58dc1e0819d940db6a32e11426ef5eb","generatedAt":"2026-09-29T11:55:46.874Z","templates":[{"slug":"action","name":"action","title":"Action (Popup)","version":"1.0.0","manifest_version":3,"description":"Adds a toolbar popup to the browser with a simple page.","uiContext":["action","background"],"surfaces":["action","background"],"entrypoints":["./action/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["action","popup","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click the toolbar icon to open the action popup","Edit src/action/index.html and watch HMR update the popup"],"useCases":["Toolbar popup as the primary UI surface","Quick actions that don\'t need a full sidebar or page","Starting point for popup-based browser extensions"],"docsUrl":"https://extension.js.org/docs/implementation-guide/manifest-json","video":"AWMlWK934qE","files":["extension.config.js","src/action/index.html","src/action/scripts.js","src/action/styles.css","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/action/screenshot.png","icon":"examples/action/src/images/icon.png"},{"slug":"action-locales","name":"action-locales","title":"Action Locales","version":"1.0.0","manifest_version":3,"description":"Adds a toolbar popup whose text follows your browser\'s language.","uiContext":["action","background"],"surfaces":["action","background"],"entrypoints":["./action/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["action","popup","i18n","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click the toolbar icon to see the popup in your browser\'s language","Add a folder under _locales/ and switch your browser language to see it"],"useCases":["A toolbar popup translated with the i18n API","Shipping _locales without hand-editing the manifest","Reference for localized extension UI across browsers"],"docsUrl":"https://extension.js.org/docs/implementation-guide/locales","video":"bY0Mtv77bVc","files":["_locales/en/messages.json","_locales/pt_BR/messages.json","extension.config.js","src/action/index.html","src/action/scripts.js","src/action/styles.css","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/action-locales/screenshot.png","icon":"examples/action-locales/src/images/icon.png"},{"slug":"ai-chatgpt","name":"ai-chatgpt","title":"ChatGPT AI Sidebar","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel where you can chat with ChatGPT about the page you are viewing.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.ts"],"uiFramework":"react","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel","storage","tabs"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"tags":["ai","chatgpt","openai","gpt","chat","sidebar","content-scripts","react","shadcn"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open any web page and click the extension icon to open the sidebar","Enter your ChatGPT API key (from platform.openai.com)","Ask ChatGPT about the active tab, and the content script feeds the page text into the conversation"],"useCases":["Chat with the active tab\'s content using ChatGPT","Summarize or question articles, docs, and dashboards in place","Starting point for page-aware ChatGPT extensions"],"docsUrl":"https://platform.openai.com/docs/api-reference/chat","video":"oEiJ_b36EtE","files":["extension.config.js","src/background.ts","src/components/ApiKeyForm.tsx","src/components/ChatInput.tsx","src/components/ChatMessage.tsx","src/components/ui/button.tsx","src/components/ui/card.tsx","src/components/ui/scroll-area.tsx","src/content/ContentApp.ts","src/content/scripts.ts","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/lib/client.ts","src/lib/page-context.ts","src/lib/utils.ts","src/manifest.json","src/sidebar/SidebarApp.tsx","src/sidebar/index.html","src/sidebar/scripts.tsx","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/ai-chatgpt/screenshot.png","icon":"examples/ai-chatgpt/src/images/icon.png"},{"slug":"ai-claude","name":"ai-claude","title":"Claude AI Sidebar","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel where you can chat with Claude about the page you are viewing.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.ts"],"uiFramework":"react","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel","storage","tabs"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"tags":["ai","claude","anthropic","chat","sidebar","content-scripts","react","shadcn"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open any web page and click the extension icon to open the sidebar","Enter your Claude API key (from console.anthropic.com)","Ask Claude about the active tab, and the content script feeds the page text into the conversation"],"useCases":["Chat with the active tab\'s content using Claude","Summarize or question articles, docs, and dashboards in place","Starting point for page-aware Claude extensions"],"docsUrl":"https://docs.anthropic.com/en/api/getting-started","video":"z3JmyUlmiUw","files":["extension.config.js","src/background.ts","src/components/ApiKeyForm.tsx","src/components/ChatInput.tsx","src/components/ChatMessage.tsx","src/components/ui/button.tsx","src/components/ui/card.tsx","src/components/ui/scroll-area.tsx","src/content/ContentApp.ts","src/content/scripts.ts","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/lib/client.ts","src/lib/page-context.ts","src/lib/utils.ts","src/manifest.json","src/sidebar/SidebarApp.tsx","src/sidebar/index.html","src/sidebar/scripts.tsx","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/ai-claude/screenshot.png","icon":"examples/ai-claude/src/images/icon.png"},{"slug":"ai-gemini","name":"ai-gemini","title":"Gemini AI Sidebar","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel where you can chat with Gemini about the page you are viewing.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.ts"],"uiFramework":"react","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel","storage","tabs"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"tags":["ai","gemini","google","chat","sidebar","content-scripts","react","shadcn"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open any web page and click the extension icon to open the sidebar","Enter your Gemini API key (from aistudio.google.com)","Ask Gemini about the active tab, and the content script feeds the page text into the conversation"],"useCases":["Chat with the active tab\'s content using Gemini","Summarize or question articles, docs, and dashboards in place","Starting point for page-aware Gemini extensions"],"docsUrl":"https://ai.google.dev/gemini-api/docs","video":"I2uhXovfurE","files":["extension.config.js","src/background.ts","src/components/ApiKeyForm.tsx","src/components/ChatInput.tsx","src/components/ChatMessage.tsx","src/components/ui/button.tsx","src/components/ui/card.tsx","src/components/ui/scroll-area.tsx","src/content/ContentApp.ts","src/content/scripts.ts","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/lib/client.ts","src/lib/page-context.ts","src/lib/utils.ts","src/manifest.json","src/sidebar/SidebarApp.tsx","src/sidebar/index.html","src/sidebar/scripts.tsx","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/ai-gemini/screenshot.png","icon":"examples/ai-gemini/src/images/icon.png"},{"slug":"ai-perplexity","name":"ai-perplexity","title":"Perplexity AI Sidebar","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel where you can chat with Perplexity about the page you are viewing.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.ts"],"uiFramework":"react","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel","storage","tabs"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"tags":["ai","perplexity","search","chat","sidebar","content-scripts","react","shadcn"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open any web page and click the extension icon to open the sidebar","Enter your Perplexity API key (from perplexity.ai/settings/api)","Ask Perplexity about the active tab, and the content script feeds the page text into the conversation"],"useCases":["Chat with the active tab\'s content using Perplexity","Summarize or question articles, docs, and dashboards in place","Starting point for page-aware Perplexity extensions"],"docsUrl":"https://docs.perplexity.ai/","video":"W9j9rUrevjI","files":["extension.config.js","src/background.ts","src/components/ApiKeyForm.tsx","src/components/ChatInput.tsx","src/components/ChatMessage.tsx","src/components/ui/button.tsx","src/components/ui/card.tsx","src/components/ui/scroll-area.tsx","src/content/ContentApp.ts","src/content/scripts.ts","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/lib/client.ts","src/lib/page-context.ts","src/lib/utils.ts","src/manifest.json","src/sidebar/SidebarApp.tsx","src/sidebar/index.html","src/sidebar/scripts.tsx","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/ai-perplexity/screenshot.png","icon":"examples/ai-perplexity/src/images/icon.png"},{"slug":"content","name":"@extension-js/content","title":"Content scripts","version":"1.0.0","manifest_version":3,"description":"Injects a small badge into every web page you visit, with an options page that moves it to the left or right edge.","uiContext":["content","options","background"],"surfaces":["content","options","background"],"entrypoints":["options/index.html","background.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["storage"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"tags":["content","options","storage","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click Open options on the badge injected into the page","Tick the setting and watch the badge move to the left edge"],"useCases":["A plain JavaScript UI injected into every page","One position setting shared between an options page and a content script","Starting point for content scripts that need preferences"],"docsUrl":"https://extension.js.org/docs/implementation-guide/content-scripts","video":"GflWcgdS9Tw","files":["extension.config.js","src/background.js","src/content/greet.js","src/content/scripts.js","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/options/index.html","src/options/scripts.js","src/options/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content/screenshot.png","icon":"examples/content/src/images/icon.png"},{"slug":"content-css-modules","name":"@extension-js/content-css-modules","title":"Content CSS Modules","version":"1.0.0","manifest_version":3,"description":"Injects a small styled badge into every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"tags":["content-scripts","css-modules","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Open any web page to see the badge this template injects","Edit src/content/styles.module.css and save to restyle the badge"],"useCases":["A content script styled with CSS modules","Class names hashed so page styles never collide","Starting point for content scripts that need scoped CSS"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/css-modules","video":"ondh3B28ieQ","files":["extension.config.js","src/background.js","src/content/scripts.js","src/content/styles.module.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-css-modules/screenshot.png","icon":"examples/content-css-modules/src/images/icon.png"},{"slug":"content-custom-font","name":"content-custom-font","title":"Custom fonts in a content script","version":"1.0.0","manifest_version":3,"description":"Injects a badge rendered in a custom font into every web page you visit, with an options page that turns the custom font on and off.","uiContext":["content","options","background"],"surfaces":["content","options","background"],"entrypoints":["options/index.html","background.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["postcss.config.js","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["storage"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"tags":["content","fonts","options","storage","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click Open options on the badge injected into the page","Untick the setting and watch the badge fall back to the system font"],"useCases":["A content script that ships its own typeface","One font setting shared between an options page and a content script","Starting point for injected UI that must not inherit host page type"],"docsUrl":"https://extension.js.org/docs/implementation-guide/css","video":"IAbckjfGO5Y","files":["extension.config.js","public/fonts/MomoSignature-Regular.ttf","public/fonts/MomoSignature-Regular.woff2","public/fonts/OFL.txt","src/background.js","src/content/scripts.js","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/options/index.html","src/options/scripts.js","src/options/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-custom-font/screenshot.png","icon":"examples/content-custom-font/src/images/icon.png"},{"slug":"content-env","name":"content-env","title":"Content Env","version":"1.0.0","manifest_version":3,"description":"Injects a small panel showing the extension\'s environment values into every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.ts","content/scripts.ts"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"tags":["content-scripts","env","configuration","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Open any web page to see the panel print the injected values","Edit .env.chrome or .env.firefox to change what the panel reads"],"useCases":["Reading build-time configuration inside a content script","Switching behavior per browser without touching the source","Reference for EXTENSION_PUBLIC_* values in typed sources"],"docsUrl":"https://extension.js.org/docs/features/environment-variables","video":"Q-ugTIZVZ-U","files":["extension.config.js","src/background.ts","src/content/scripts.ts","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-env/screenshot.png","icon":"examples/content-env/src/images/icon.png"},{"slug":"content-less","name":"@extension-js/content-less","title":"Content Less","version":"1.0.0","manifest_version":3,"description":"Injects a small styled badge into every web page you visit, with a Less options page that moves it to the left or right edge.","uiContext":["content","options","background"],"surfaces":["content","options","background"],"entrypoints":["options/index.html","background.js","content/scripts.js"],"uiFramework":"","css":"less","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["storage"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"tags":["content","options","storage","less"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click Open options on the badge injected into the page","Tick the setting and watch the badge move to the left edge"],"useCases":["A Less-styled badge injected into every page","One position setting shared between an options page and a content script","Starting point for Less extensions that need preferences"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/less","video":"VGssDbxBeMM","files":["extension.config.js","src/background.js","src/content/scripts.js","src/content/styles.less","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/options/index.html","src/options/scripts.js","src/options/styles.less"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-less/screenshot.png","icon":"examples/content-less/src/images/icon.png"},{"slug":"content-less-modules","name":"@extension-js/content-less-modules","title":"Content Less Modules","version":"1.0.0","manifest_version":3,"description":"Injects a small styled badge into every web page you visit, with a Less modules options page that moves it to the left or right edge.","uiContext":["content","options","background"],"surfaces":["content","options","background"],"entrypoints":["options/index.html","background.js","content/scripts.js"],"uiFramework":"","css":"less","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["storage"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"tags":["content","options","storage","less-modules"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click Open options on the badge injected into the page","Tick the setting and watch the badge move to the left edge"],"useCases":["Hashed class names shared by a content script and an options page","One position setting shared between an options page and a content script","Starting point for CSS Modules extensions that need preferences"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/less","video":"Q1fNVB2ZuNw","files":["extension.config.js","src/background.js","src/content/scripts.js","src/content/styles.module.less","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/options/index.html","src/options/scripts.js","src/options/styles.module.less"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-less-modules/screenshot.png","icon":"examples/content-less-modules/src/images/icon.png"},{"slug":"content-main-world","name":"content-main-world","title":"Main-world Content Script","version":"1.0.0","manifest_version":3,"description":"Injects a small UI into every web page from both the extension and the page\'s own JavaScript world, with an options page that moves it to the left or right edge.","uiContext":["content","options","background"],"surfaces":["content","options","background"],"entrypoints":["options/index.html","background.js","content/isolated-one.js","content/isolated-two.js","content/scripts.js","content/isolated-options.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["storage"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"tags":["content-scripts","main-world","isolated-world","options","storage","javascript"],"difficulty":"intermediate","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Click Open options on the UI injected into the page","Tick the setting and watch the main-world UI move to the left edge"],"useCases":["Hook into page-level globals that isolated content scripts cannot reach","Bridge isolated and main-world execution contexts cleanly","Read a stored setting from a main-world script that has no chrome APIs"],"docsUrl":"https://extension.js.org/docs/implementation-guide/content-scripts","video":"3-C3wCE3fWU","files":["extension.config.js","src/background.js","src/content/isolated-one.js","src/content/isolated-options.js","src/content/isolated-two.js","src/content/scripts.js","src/content/styles.css","src/content/utils/bridge.js","src/content/utils/constants.js","src/content/utils/create-badge.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/options/index.html","src/options/scripts.js","src/options/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-main-world/screenshot.png","icon":"examples/content-main-world/src/images/icon.png"},{"slug":"content-multi-one-entry","name":"content-multi-one-entry","title":"Content Multi One Entry","version":"1.0.0","manifest_version":3,"description":"Injects four small elements into every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.js","content/script-top-left.js","content/script-top-right.js","content/script-bottom-left.js","content/script-bottom-right.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"tags":["content-scripts","multi-entry","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Open any web page and an element appears in each of its four corners","Edit one script in src/content/ and save to see that corner update"],"useCases":["Four scripts shipped from a single content-script entry","One match rule driving several focused files","Reference for grouping content scripts under one entry"],"docsUrl":"https://extension.js.org/docs/implementation-guide/content-scripts","video":"l1QWq7lIKo8","files":["extension.config.js","src/background.js","src/content/script-bottom-left.js","src/content/script-bottom-right.js","src/content/script-top-left.js","src/content/script-top-right.js","src/content/styles.css","src/content/utils/constants.js","src/content/utils/create-badge.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-multi-one-entry/screenshot.png","icon":"examples/content-multi-one-entry/src/images/icon.png"},{"slug":"content-multi-three-entries","name":"content-multi-three-entries","title":"Multi-entry Content Scripts","version":"1.0.0","manifest_version":3,"description":"Injects four small elements into every web page you visit.","uiContext":["content","background"],"surfaces":["content","background"],"entrypoints":["background.js","content/script-top-left.js","content/script-top-right.js","content/script-bottom-left.js","content/script-bottom-right.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"tags":["content-scripts","multi-entry","javascript"],"difficulty":"intermediate","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open any page and three separate content scripts inject small elements","Edit any of the entries in src/content/ to see HMR update independently"],"useCases":["Split content-script logic across multiple entries with different match rules","Target different page contexts with focused, independent bundles","Reference for the multi-entry content_scripts pattern in MV3"],"docsUrl":"https://extension.js.org/docs/implementation-guide/content-scripts","video":"oDcdmGaIBjw","files":["extension.config.js","src/background.js","src/content/script-bottom-left.js","src/content/script-bottom-right.js","src/content/script-top-left.js","src/content/script-top-right.js","src/content/styles.css","src/content/utils/constants.js","src/content/utils/create-badge.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-multi-three-entries/screenshot.png","icon":"examples/content-multi-three-entries/src/images/icon.png"},{"slug":"content-preact","name":"content-preact","title":"Content Preact","version":"1.0.0","manifest_version":3,"description":"Shows an overlay UI on web pages and an options page that moves it from right to left.","uiContext":["content","options","background"],"surfaces":["content","options","background"],"entrypoints":["options/index.html","background.ts","./content/scripts.tsx"],"uiFramework":"preact","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["storage"],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["content","options","storage","preact","typescript","tailwind"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click Open options on the overlay injected into the page","Tick the setting and watch the overlay move to the left edge"],"useCases":["An on-page UI written in Preact and isolated in a Shadow DOM","One setting shared between an options page and a content script","Starting point for Preact extensions that need preferences"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/preact","video":"sYA3V9YIWwo","files":["extension.config.js","src/background.ts","src/content/ContentApp.tsx","src/content/scripts.tsx","src/content/styles.css","src/images/chromeWindow.png","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/images/preact.png","src/images/tailwind.png","src/images/tailwind_bg.png","src/images/typescript.png","src/manifest.json","src/options/OptionsApp.tsx","src/options/index.html","src/options/scripts.tsx","src/options/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-preact/screenshot.png","icon":"examples/content-preact/src/images/icon.png"},{"slug":"content-react","name":"content-react","title":"Content React","version":"1.0.0","manifest_version":3,"description":"Shows a small overlay UI on every web page, with a React options page that moves it from right to left.","uiContext":["content","options","background"],"surfaces":["content","options","background"],"entrypoints":["options/index.html","background.ts","./content/scripts.tsx"],"uiFramework":"react","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["storage"],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["content","options","storage","react","typescript","tailwind"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click Open options on the overlay injected into the page","Tick the setting and watch the overlay move to the left edge"],"useCases":["A React UI injected into any page, isolated in a Shadow DOM","One setting shared between a React options page and a content script","Starting point for content-script extensions that need preferences"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/react","video":"oGNhj9k4bNs","files":["extension.config.js","src/background.ts","src/content/ContentApp.tsx","src/content/scripts.tsx","src/content/styles.css","src/images/chromeWindow.png","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/images/react.png","src/images/tailwind.png","src/images/tailwind_bg.png","src/images/typescript.png","src/manifest.json","src/options/OptionsApp.tsx","src/options/index.html","src/options/scripts.tsx","src/options/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-react/screenshot.png","icon":"examples/content-react/src/images/icon.png"},{"slug":"content-sass","name":"@extension-js/content-sass","title":"Content scripts with Sass","version":"1.0.0","manifest_version":3,"description":"Injects a small styled badge into every web page you visit, with a Sass options page that moves it to the left or right edge.","uiContext":["content","options","background"],"surfaces":["content","options","background"],"entrypoints":["options/index.html","background.js","content/scripts.js"],"uiFramework":"","css":"sass","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["storage"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"tags":["content","sass","options","storage"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click Open options on the badge injected into the page","Tick the setting and watch the badge move to the left edge"],"useCases":["A badge injected into every page and styled with Sass","One position setting shared between an options page and a content script","Starting point for Sass content scripts that need preferences"],"docsUrl":"https://extension.js.org/docs/implementation-guide/css","video":"-VceQYe_KMk","files":["extension.config.js","src/background.js","src/content/scripts.js","src/content/styles.scss","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/options/index.html","src/options/scripts.js","src/options/styles.scss"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-sass/screenshot.png","icon":"examples/content-sass/src/images/icon.png"},{"slug":"content-sass-modules","name":"@extension-js/content-sass-modules","title":"Content scripts with Sass modules","version":"1.0.0","manifest_version":3,"description":"Injects a small styled badge into every web page you visit, with a Sass modules options page that moves it to the left or right edge.","uiContext":["content","options","background"],"surfaces":["content","options","background"],"entrypoints":["options/index.html","background.js","content/scripts.js"],"uiFramework":"","css":"sass","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{"build":"extension build"},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["storage"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"tags":["content","sass","css-modules","options","storage"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click Open options on the badge injected into the page","Tick the setting and watch the badge move to the left edge"],"useCases":["A badge injected into every page and styled with hashed Sass module class names","One position setting shared between an options page and a content script","Starting point for Sass module content scripts that need preferences"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/sass","video":"Ma9f_Q1C7Eo","files":["extension.config.js","src/background.js","src/content/scripts.js","src/content/styles.module.scss","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/options/index.html","src/options/scripts.js","src/options/styles.module.scss"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-sass-modules/screenshot.png","icon":"examples/content-sass-modules/src/images/icon.png"},{"slug":"content-svelte","name":"content-svelte","title":"Content Svelte","version":"1.0.0","manifest_version":3,"description":"Shows a Svelte overlay on every web page you visit, with an options page that moves it from right to left.","uiContext":["content","options","background"],"surfaces":["content","options","background"],"entrypoints":["options/index.html","background.ts","./content/scripts.ts"],"uiFramework":"svelte","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["storage"],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["content","svelte","typescript","tailwind","options","storage"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click Open options on the overlay injected into the page","Tick the setting and watch the overlay move to the left edge"],"useCases":["A Svelte overlay injected into every page, isolated in a Shadow DOM","One setting shared between a Svelte options page and a content script","Starting point for Svelte extensions that need preferences"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/svelte","video":"g6-GZ6_Rn38","files":["extension.config.js","src/background.ts","src/content/ContentApp.svelte","src/content/scripts.ts","src/content/styles.css","src/content/svelte.d.ts","src/images/chromeWindow.png","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/images/svelte.png","src/images/tailwind.png","src/images/tailwind_bg.png","src/images/typescript.png","src/manifest.json","src/options/OptionsApp.svelte","src/options/index.html","src/options/scripts.ts","src/options/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-svelte/screenshot.png","icon":"examples/content-svelte/src/images/icon.png"},{"slug":"content-typescript","name":"content-typescript","title":"Content TypeScript","version":"1.0.0","manifest_version":3,"description":"Shows a small overlay UI on every web page, with an options page that moves it from right to left.","uiContext":["content","options","background"],"surfaces":["content","options","background"],"entrypoints":["options/index.html","background.ts","content/scripts.ts"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["storage"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"tags":["content","options","storage","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click Open options on the overlay injected into the page","Tick the setting and watch the overlay move to the left edge"],"useCases":["A typed overlay injected into every page","One setting shared between an options page and a content script","Starting point for TypeScript extensions that need preferences"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/typescript","video":"9OBuuh3N_cM","files":["extension.config.js","src/background.ts","src/content/scripts.ts","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/options/index.html","src/options/scripts.ts","src/options/styles.css","src/types.ts"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-typescript/screenshot.png","icon":"examples/content-typescript/src/images/icon.png"},{"slug":"content-vue","name":"content-vue","title":"Content Vue","version":"1.0.0","manifest_version":3,"description":"Shows a small overlay UI on every web page, with a Vue options page that moves it from right to left.","uiContext":["content","options","background"],"surfaces":["content","options","background"],"entrypoints":["options/index.html","background.ts","./content/scripts.ts"],"uiFramework":"vue","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["storage"],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["content","options","storage","vue","typescript","tailwind"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click Open options on the overlay injected into the page","Tick the setting and watch the overlay move to the left edge"],"useCases":["A Vue overlay injected into every page, isolated in a Shadow DOM","One setting shared between a Vue options page and a content script","Starting point for Vue extensions that need preferences"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/vue","video":"LIfZxR-B2Nk","files":["extension.config.js","src/background.ts","src/content/ContentApp.vue","src/content/scripts.ts","src/content/shims-vue.d.ts","src/content/styles.css","src/images/chromeWindow.png","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/images/logo.svg","src/images/tailwind.png","src/images/tailwind_bg.png","src/images/typescript.png","src/images/vue.png","src/manifest.json","src/options/OptionsApp.vue","src/options/index.html","src/options/scripts.ts","src/options/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/content-vue/screenshot.png","icon":"examples/content-vue/src/images/logo.svg"},{"slug":"devtools","name":"devtools","title":"Devtools panel","version":"1.0.0","manifest_version":3,"description":"Adds a devtools panel to the browser that reads the inspected page.","uiContext":["devtools"],"surfaces":["devtools"],"entrypoints":["devtools/index.html"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":false,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["devtools","panel","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open the browser devtools with F12 or Cmd+Option+I, then pick the Example tab","Edit src/panel/index.html and reopen devtools to see the change"],"useCases":["A devtools panel as the primary UI surface","Inspecting the current page from inside the developer tools","Starting point for debugging tools built as browser extensions"],"docsUrl":"https://extension.js.org/docs/implementation-guide/manifest-json","video":"kyJk6ksDOsU","files":["extension.config.js","src/devtools/index.html","src/devtools/scripts.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/panel/index.html","src/panel/scripts.js","src/panel/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/devtools/screenshot.png","icon":"examples/devtools/src/images/icon.png"},{"slug":"devtools-preact","name":"devtools-preact","title":"Devtools panel Preact","version":"1.0.0","manifest_version":3,"description":"Adds a devtools panel written in Preact that reads the inspected page.","uiContext":["devtools"],"surfaces":["devtools"],"entrypoints":["devtools/index.html"],"uiFramework":"preact","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":false,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["devtools","panel","preact","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open the browser devtools with F12 or Cmd+Option+I, then pick the Example tab","Edit src/panel/PanelApp.tsx and reopen devtools to see the change"],"useCases":["A devtools panel as the primary UI surface","Inspecting the current page from inside the developer tools","Starting point for Preact debugging tools built as browser extensions"],"docsUrl":"https://extension.js.org/docs/implementation-guide/manifest-json","video":"WjPVn5SlGaU","files":["extension.config.js","src/devtools/index.html","src/devtools/scripts.ts","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/images/preact.png","src/manifest.json","src/panel/PanelApp.tsx","src/panel/index.html","src/panel/scripts.tsx","src/panel/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/devtools-preact/screenshot.png","icon":"examples/devtools-preact/src/images/icon.png"},{"slug":"devtools-react","name":"devtools-react","title":"React devtools panel","version":"1.0.0","manifest_version":3,"description":"Adds a React devtools panel to the browser that reads the inspected page.","uiContext":["devtools"],"surfaces":["devtools"],"entrypoints":["devtools/index.html"],"uiFramework":"react","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":false,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["devtools","panel","react","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open the browser devtools with F12 or Cmd+Option+I, then pick the Example tab","Edit src/panel/PanelApp.tsx and save to see the panel update"],"useCases":["A React devtools panel as the primary UI surface","Inspecting the current page from inside the developer tools","Starting point for debugging tools built as browser extensions"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/react","video":"mRZO9Eg2aUQ","files":["extension.config.js","src/devtools/index.html","src/devtools/scripts.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/images/react.png","src/manifest.json","src/panel/PanelApp.tsx","src/panel/index.html","src/panel/scripts.tsx","src/panel/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/devtools-react/screenshot.png","icon":"examples/devtools-react/src/images/icon.png"},{"slug":"devtools-svelte","name":"devtools-svelte","title":"Devtools panel with Svelte","version":"1.0.0","manifest_version":3,"description":"Adds a Svelte devtools panel to the browser that reads the inspected page.","uiContext":["devtools"],"surfaces":["devtools"],"entrypoints":["devtools/index.html"],"uiFramework":"svelte","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":false,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["devtools","panel","svelte","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open the browser devtools with F12 or Cmd+Option+I, then pick the Example tab","Edit src/panel/PanelApp.svelte and reopen devtools to see the change"],"useCases":["A devtools panel as the primary UI surface","Inspecting the current page from inside the developer tools","Starting point for debugging tools built as browser extensions"],"docsUrl":"https://extension.js.org/docs/implementation-guide/manifest-json","video":"SqOxa9hRg1s","files":["extension.config.js","src/devtools/index.html","src/devtools/scripts.ts","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/images/svelte.png","src/manifest.json","src/panel/PanelApp.svelte","src/panel/index.html","src/panel/scripts.ts","src/panel/styles.css","src/panel/svelte.d.ts"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/devtools-svelte/screenshot.png","icon":"examples/devtools-svelte/src/images/icon.png"},{"slug":"devtools-typescript","name":"devtools-typescript","title":"Devtools panel (TypeScript)","version":"1.0.0","manifest_version":3,"description":"Adds a devtools panel to the browser that reads the inspected page.","uiContext":["devtools"],"surfaces":["devtools"],"entrypoints":["devtools/index.html"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":false,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["devtools","panel","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open the browser devtools with F12 or Cmd+Option+I, then pick the Example tab","Edit src/panel/index.html and reopen devtools to see the change"],"useCases":["A devtools panel as the primary UI surface","Inspecting the current page from inside the developer tools","Starting point for debugging tools built as browser extensions"],"docsUrl":"https://extension.js.org/docs/implementation-guide/manifest-json","video":"iI1Th6Hi_ck","files":["extension.config.js","src/devtools/index.html","src/devtools/scripts.ts","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/images/typescript.png","src/manifest.json","src/panel/index.html","src/panel/scripts.ts","src/panel/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/devtools-typescript/screenshot.png","icon":"examples/devtools-typescript/src/images/icon.png"},{"slug":"devtools-vue","name":"devtools-vue","title":"Devtools panel with Vue","version":"1.0.0","manifest_version":3,"description":"Adds a devtools panel built with Vue that reads the inspected page.","uiContext":["devtools"],"surfaces":["devtools"],"entrypoints":["devtools/index.html"],"uiFramework":"vue","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":false,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["devtools","panel","vue","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open the browser devtools with F12 or Cmd+Option+I, then pick the Example tab","Edit src/panel/PanelApp.vue and reopen devtools to see the change"],"useCases":["A devtools panel as the primary UI surface","Inspecting the current page from inside the developer tools","Starting point for debugging tools built as browser extensions"],"docsUrl":"https://extension.js.org/docs/implementation-guide/manifest-json","video":"sp-bjexg2X8","files":["extension.config.js","src/devtools/index.html","src/devtools/scripts.ts","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/images/vue.png","src/manifest.json","src/panel/PanelApp.vue","src/panel/index.html","src/panel/scripts.ts","src/panel/shims-vue.d.ts","src/panel/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/devtools-vue/screenshot.png","icon":"examples/devtools-vue/src/images/icon.png"},{"slug":"init","name":"init","title":"Initial","version":"1.0.0","manifest_version":3,"description":"A minimal extension that loads in your browser, ready to build on.","uiContext":[],"surfaces":[],"entrypoints":[],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":false,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["minimal","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","The extension loads in a fresh profile with no surface of its own","Add src/newtab/index.html and it ships on the next reload"],"useCases":["The smallest Extension.js project that still runs","A blank slate for whichever surface you choose","Reference for the minimum an MV3 extension needs"],"docsUrl":"https://extension.js.org/docs/getting-started/immediately","files":["extension.config.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/images/javascript.png","src/index.js","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/init/screenshot.png","icon":"examples/init/src/images/icon.png"},{"slug":"javascript","name":"javascript","title":"JavaScript","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser with a simple page.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["sidebar","javascript","content-scripts"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click the extension icon to open the sidebar panel","Edit src/sidebar/index.html and save to watch the panel update"],"useCases":["A sidebar panel as the primary UI surface","Plain JavaScript with no compiler config to maintain","Starting point for extensions written in JavaScript"],"docsUrl":"https://extension.js.org/docs/getting-started/templates/javascript","video":"Ryjuq2o-kzc","files":["extension.config.js","src/background.js","src/content/ContentApp.js","src/content/scripts.js","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/sidebar/SidebarApp.js","src/sidebar/index.html","src/sidebar/scripts.js","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/javascript/screenshot.png","icon":"examples/javascript/src/images/icon.png"},{"slug":"newtab","name":"newtab","title":"New Tab","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple page you can customize.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["new-tab","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Open a new tab and this page loads in place of the default","Edit src/newtab/index.html and save to watch the tab update"],"useCases":["A new tab page as the primary UI surface","Dashboards, launchers, and start pages","Starting point for new tab extensions in JavaScript"],"docsUrl":"https://extension.js.org/docs/implementation-guide/html","video":"fouoMkXLyvQ","files":["extension.config.js","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.js","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/newtab/screenshot.png","icon":"examples/newtab/src/images/icon.png"},{"slug":"newtab-browser-flags","name":"newtab-browser-flags","title":"New Tab Browser Flags","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a launcher that opens the extension\'s sidebar panel.","uiContext":["content","newtab","sidebar","background"],"surfaces":["content","newtab","sidebar","background"],"entrypoints":["newtab/index.html","sidebar/index.html","background.js","content/content.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{"build":"extension build"},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["activeTab"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"tags":["new-tab","sidebar","configuration","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","The browser starts with the flags this template sets in extension.config.js","Open a new tab and use the launcher to open the sidebar panel"],"useCases":["Passing custom browser flags through extension.config.js","A new tab launcher that opens another extension surface","Reference for browser-specific differences across targets"],"docsUrl":"https://extension.js.org/docs/browsers/browser-flags","files":["extension.config.js","src/background.js","src/content/content.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/newtab.css","src/newtab/newtab.js","src/sidebar/index.html","src/sidebar/sidebar.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/newtab-browser-flags/screenshot.png","icon":"examples/newtab-browser-flags/src/images/icon.png"},{"slug":"newtab-config-eslint","name":"newtab-config-eslint","title":"New Tab Config ESLint","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js","eslint.config.mjs"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["new-tab","configuration","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Open a new tab to see the page this template ships","Run npx eslint src to check the source with the bundled config"],"useCases":["A new tab extension that lints its own source","ESLint wired into an Extension.js project without ejecting","Reference for adding a linter to an extension codebase"],"docsUrl":"https://extension.js.org/docs/integrations/eslint","video":"CoS-_Cv-SvM","files":["extension.config.js","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.ts","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/newtab-config-eslint/screenshot.png","icon":"examples/newtab-config-eslint/src/images/icon.png"},{"slug":"newtab-config-prettier","name":"newtab-config-prettier","title":"New Tab Config Prettier","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js",".prettierrc"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["new-tab","configuration","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Open a new tab to see the page this template ships","Run npx prettier --check src to see the rules this template ships"],"useCases":["A new tab extension that formats its own source","Prettier wired into an Extension.js project without ejecting","Reference for adding a formatter to an extension codebase"],"docsUrl":"https://extension.js.org/docs/integrations/prettier","video":"JnNNaUzefTg","files":["extension.config.js","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.ts","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/newtab-config-prettier/screenshot.png","icon":"examples/newtab-config-prettier/src/images/icon.png"},{"slug":"newtab-config-stylelint","name":"newtab-config-stylelint","title":"New Tab Config Stylelint","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"sass","configFiles":[".stylelintrc.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["new-tab","sass","configuration"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Open a new tab to see the styled page this template ships","Run npx stylelint src to check the Sass with the bundled config"],"useCases":["A new tab extension that lints its own stylesheets","Stylelint and Sass wired into an Extension.js project","Reference for adding a style linter to an extension codebase"],"docsUrl":"https://extension.js.org/docs/integrations/stylelint","video":"3DVh7oDKFxo","files":["extension.config.js","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.js","src/newtab/styles.scss"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/newtab-config-stylelint/screenshot.png","icon":"examples/newtab-config-stylelint/src/images/icon.png"},{"slug":"newtab-crypto","name":"newtab-crypto","title":"New Tab Crypto","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a page that hashes any text you type using SHA-256.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["new-tab","web-crypto","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Open a new tab and type any text to see its SHA-256 hash","Edit src/newtab/scripts.ts to hash with a different algorithm"],"useCases":["Hashing text with the Web Crypto API inside an extension","A new tab page that does real work with no network","Reference for browser crypto primitives under MV3"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/node","video":"dPdh5H_sTgw","files":["extension.config.js","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.ts","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/newtab-crypto/screenshot.png","icon":"examples/newtab-crypto/src/images/icon.png"},{"slug":"newtab-env","name":"newtab-env","title":"Environment Variables","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a page showing the extension\'s environment values.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["env","configuration","new-tab","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Copy .env.example to .env and edit the values","Run npm run dev to launch the extension","Open a new tab and the page reads injected EXTENSION_PUBLIC_* values"],"useCases":["Inject build-time configuration without leaking secrets","Switch behavior per browser, mode, or deployment target","Reference for safe env-var usage across JS, JSON, and HTML"],"docsUrl":"https://extension.js.org/docs/features/environment-variables","video":"8XP2acacpK8","files":["extension.config.js","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.ts","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/newtab-env/screenshot.png","icon":"examples/newtab-env/src/images/icon.png"},{"slug":"newtab-less","name":"newtab-less","title":"New Tab Less","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple styled page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"less","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["new-tab","less","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Open a new tab to see the styled page this template ships","Edit src/newtab/styles.less and save to watch the styles reload"],"useCases":["A new tab page styled with Less","Less compiled by Extension.js with no extra config","Starting point for extensions that prefer Less to plain CSS"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/less","video":"T4Bgw8pCYY0","files":["extension.config.js","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.js","src/newtab/styles.less"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/newtab-less/screenshot.png","icon":"examples/newtab-less/src/images/icon.png"},{"slug":"newtab-preact","name":"newtab-preact","title":"New Tab Preact","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple Preact page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"preact","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["new-tab","preact","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Open a new tab to see the Preact page this template ships","Edit src/newtab/NewTabApp.tsx and save to see fast refresh update it"],"useCases":["A new tab page rendered by Preact","Preact and JSX compiled with no extra config","Starting point for Preact extensions with a new tab"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/preact","video":"ezN6818j744","files":["extension.config.js","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/newtab/NewTabApp.tsx","src/newtab/index.html","src/newtab/scripts.tsx","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/newtab-preact/screenshot.png","icon":"examples/newtab-preact/src/images/icon.png"},{"slug":"newtab-react","name":"newtab-react","title":"New Tab React","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple React page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"react","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["new-tab","react","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Open a new tab to see the React page this template ships","Edit src/newtab/NewTabApp.tsx and save to see fast refresh update it"],"useCases":["A new tab page rendered by React","React and JSX compiled with no extra config","Starting point for React extensions with a new tab"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/react","video":"jt4HgQPdJX8","files":["extension.config.js","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/newtab/NewTabApp.tsx","src/newtab/index.html","src/newtab/scripts.tsx","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/newtab-react/screenshot.png","icon":"examples/newtab-react/src/images/icon.png"},{"slug":"newtab-react-router","name":"newtab-react-router","title":"New Tab React Router","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a small React app you can navigate across routes.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"react","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["new-tab","react","routing","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Open a new tab and follow the links to move between routes","Add a route under src/newtab/ and it renders with no server"],"useCases":["A multi-route new tab app with client-side routing","React Router running inside an extension page","Reference for routing with no server under MV3"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/react","video":"ysvv7Q10p3Q","files":["extension.config.js","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/newtab/NewTabApp.tsx","src/newtab/index.html","src/newtab/scripts.tsx","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/newtab-react-router/screenshot.png","icon":"examples/newtab-react-router/src/images/icon.png"},{"slug":"newtab-sass","name":"newtab-sass","title":"New Tab Sass","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple styled page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"sass","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["new-tab","sass","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Open a new tab to see the styled page this template ships","Edit src/newtab/styles.scss and save to watch the styles reload"],"useCases":["A new tab page styled with Sass","Sass compiled by Extension.js with no extra config","Starting point for extensions that prefer Sass to plain CSS"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/sass","video":"bUWLBJeWzpc","files":["extension.config.js","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.js","src/newtab/styles.scss"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/newtab-sass/screenshot.png","icon":"examples/newtab-sass/src/images/icon.png"},{"slug":"newtab-svelte","name":"newtab-svelte","title":"New Tab Svelte","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple Svelte page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"svelte","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["new-tab","svelte","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Open a new tab to see the Svelte page this template ships","Edit src/newtab/NewTabApp.svelte and save to watch it update"],"useCases":["A new tab page rendered by Svelte","Svelte components compiled with no extra config","Starting point for Svelte extensions with a new tab"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/svelte","video":"uq-HVZb51U8","files":["extension.config.js","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/newtab/NewTabApp.svelte","src/newtab/index.html","src/newtab/scripts.ts","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/newtab-svelte/screenshot.png","icon":"examples/newtab-svelte/src/images/icon.png"},{"slug":"newtab-typescript","name":"newtab-typescript","title":"New Tab TypeScript","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["new-tab","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Open a new tab to see the page this template ships","Edit src/newtab/scripts.ts and save to watch the tab update"],"useCases":["A typed new tab page","TypeScript compiled by Extension.js with no extra config","Starting point for TypeScript extensions with a new tab"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/typescript","video":"0sRMGlx7MbA","files":["extension.config.js","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/newtab/index.html","src/newtab/scripts.ts","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/newtab-typescript/screenshot.png","icon":"examples/newtab-typescript/src/images/icon.png"},{"slug":"newtab-vue","name":"newtab-vue","title":"New Tab Vue","version":"1.0.0","manifest_version":3,"description":"Replaces your new tab page with a simple Vue page.","uiContext":["newtab","background"],"surfaces":["newtab","background"],"entrypoints":["newtab/index.html","background.js"],"uiFramework":"vue","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["new-tab","vue","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Open a new tab to see the Vue page this template ships","Edit src/newtab/NewTabApp.vue and save to watch it update"],"useCases":["A new tab page rendered by Vue","Single-file components compiled with no extra config","Starting point for Vue extensions with a new tab"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/vue","video":"g4rjynbMI5c","files":["extension.config.js","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/newtab/NewTabApp.vue","src/newtab/index.html","src/newtab/scripts.ts","src/newtab/shims-vue.d.ts","src/newtab/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/newtab-vue/screenshot.png","icon":"examples/newtab-vue/src/images/icon.png"},{"slug":"playwright","name":"playwright","title":"Playwright E2E Sidebar","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser, covered end to end by Playwright tests.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.ts"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{"test":"playwright test"},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["testing","playwright","e2e","sidebar","typescript"],"difficulty":"intermediate","timeToFirstSuccessMinutes":4,"firstSteps":["Run npm install to set up Playwright deps","Run npm run dev to launch the extension","Run npm test to execute the Playwright spec against the loaded extension"],"useCases":["End-to-end testing for browser-extension surfaces (popup, sidebar, content)","CI-ready Playwright setup wired to Extension.js builds","Reference for automating extension flows in headed and headless modes"],"docsUrl":"https://extension.js.org/docs/workflows/playwright-e2e","video":"k8PP2Gs1AsU","files":["extension.config.js","src/background.ts","src/content/ContentApp.ts","src/content/scripts.ts","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/sidebar/SidebarApp.ts","src/sidebar/index.html","src/sidebar/scripts.ts","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/playwright/screenshot.png","icon":"examples/playwright/src/images/icon.png"},{"slug":"preact","name":"preact","title":"Preact","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser with a simple Preact page.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.tsx"],"uiFramework":"preact","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["sidebar","preact","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click the extension icon to open the Preact sidebar panel","Edit the component in src/sidebar/ to see fast refresh update it"],"useCases":["A sidebar panel rendered by Preact","Preact and JSX compiled with no extra config","Starting point for Preact extensions"],"docsUrl":"https://extension.js.org/docs/getting-started/templates/preact","video":"VcAPgX8KHgI","files":["extension.config.js","public/extension.svg","public/logo.svg","src/background.ts","src/content/ContentApp.tsx","src/content/scripts.tsx","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/sidebar/SidebarApp.tsx","src/sidebar/index.html","src/sidebar/scripts.tsx","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/preact/screenshot.png","icon":"examples/preact/public/logo.svg"},{"slug":"react","name":"react","title":"React","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser with a simple React page.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.tsx"],"uiFramework":"react","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["sidebar","react","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click the extension icon to open the React sidebar panel","Edit the component in src/sidebar/ to see fast refresh update it"],"useCases":["A sidebar panel rendered by React","React and JSX compiled with no extra config","Starting point for React extensions"],"docsUrl":"https://extension.js.org/docs/getting-started/templates/react","video":"mRgWdPgv1hE","files":["extension.config.js","src/background.ts","src/content/ContentApp.tsx","src/content/scripts.tsx","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/sidebar/SidebarApp.tsx","src/sidebar/index.html","src/sidebar/scripts.tsx","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/react/screenshot.png","icon":"examples/react/src/images/icon.png"},{"slug":"sidebar","name":"sidebar","title":"Sidebar page","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser with a simple page.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["sidebar","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click the extension icon to open the sidebar panel","Edit src/sidebar/index.html and save to watch the panel update"],"useCases":["A sidebar panel that stays open while you browse","Reading and acting on the page beside it","Starting point for sidebar-first extensions"],"docsUrl":"https://extension.js.org/docs/implementation-guide/html","video":"bgGUqLiaZFI","files":["extension.config.js","src/background.js","src/content/scripts.js","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/sidebar/index.html","src/sidebar/scripts.js","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/sidebar/screenshot.png","icon":"examples/sidebar/src/images/icon.png"},{"slug":"sidebar-antd","name":"sidebar-antd","title":"Sidebar Ant Design","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser showing Ant Design components.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.js","content/scripts.jsx"],"uiFramework":"react","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":false,"tags":["sidebar","react","antd"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Click the extension icon to open the sidebar panel","Swap an Ant Design component in src/sidebar/ to see it update"],"useCases":["A sidebar built from Ant Design components","A component library bundled into an extension surface","Starting point for extensions with a ready-made design system"],"docsUrl":"https://ant.design/docs/react/introduce","video":"7YSGpO-RmVE","files":["extension.config.js","src/background.js","src/content/ContentApp.jsx","src/content/scripts.jsx","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/sidebar/SidebarApp.jsx","src/sidebar/index.html","src/sidebar/scripts.jsx","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/sidebar-antd/screenshot.png","icon":"examples/sidebar-antd/src/images/icon.png"},{"slug":"sidebar-monorepo-nx","name":"sidebar-monorepo-nx","title":"Sidebar Nx","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel and shows a small overlay UI on every web page you visit.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{"dev":"nx dev sidebar-monorepo-nx-packages-extension","build":"nx build sidebar-monorepo-nx-packages-extension"},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["sidebar","monorepo","nx","javascript"],"difficulty":"intermediate","timeToFirstSuccessMinutes":4,"firstSteps":["Run npm install at the workspace root to link the packages","Run npm run dev to launch the extension from the workspace","Edit the shared package and both the sidebar and the overlay follow"],"useCases":["An extension that lives inside an Nx workspace","Sharing code between the extension and other packages","Reference for Extension.js in a monorepo with no plugin"],"docsUrl":"https://nx.dev/docs","video":"2zuBnmCVvqg","files":["extension.config.js","packages/analytics/src/index.js","packages/extension/src/background.js","packages/extension/src/content/scripts.js","packages/extension/src/content/styles.css","packages/extension/src/images/icon-128.png","packages/extension/src/images/icon-16.png","packages/extension/src/images/icon-48.png","packages/extension/src/images/icon.png","packages/extension/src/manifest.json","packages/extension/src/sidebar/SidebarApp.js","packages/extension/src/sidebar/index.html","packages/extension/src/sidebar/scripts.js","packages/extension/src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/sidebar-monorepo-nx/screenshot.png","icon":null},{"slug":"sidebar-monorepo-turborepo","name":"sidebar-monorepo-turborepo","title":"Sidebar Turborepo","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel and shows a small overlay UI on every web page you visit.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{"dev":"extension dev packages/extension","build":"extension build packages/extension"},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["sidebar","monorepo","turborepo","javascript"],"difficulty":"intermediate","timeToFirstSuccessMinutes":4,"firstSteps":["Run npm install at the workspace root to link the packages","Run npm run dev to launch the extension from the workspace","Edit the shared package and both the sidebar and the overlay follow"],"useCases":["An extension that lives inside a Turborepo workspace","Sharing code between the extension and other packages","Reference for Extension.js in a monorepo with no plugin"],"docsUrl":"https://turborepo.dev/docs","video":"l3Z90k_4c3I","files":["extension.config.js","packages/analytics/src/index.js","packages/extension/src/background.js","packages/extension/src/content/scripts.js","packages/extension/src/content/styles.css","packages/extension/src/images/icon-128.png","packages/extension/src/images/icon-16.png","packages/extension/src/images/icon-48.png","packages/extension/src/images/icon.png","packages/extension/src/manifest.json","packages/extension/src/sidebar/SidebarApp.js","packages/extension/src/sidebar/index.html","packages/extension/src/sidebar/scripts.js","packages/extension/src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/sidebar-monorepo-turborepo/screenshot.png","icon":null},{"slug":"sidebar-shadcn","name":"sidebar-shadcn","title":"Sidebar shadcn","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser built with shadcn/ui components.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.tsx"],"uiFramework":"react","css":"css","configFiles":["postcss.config.js","tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["sidebar","react","shadcn","tailwind"],"difficulty":"beginner","timeToFirstSuccessMinutes":3,"firstSteps":["Run npm run dev to launch the extension","Click the extension icon to open the sidebar panel","Add a shadcn/ui component and save to see it in the panel"],"useCases":["A sidebar built from shadcn/ui components","Tailwind and Radix primitives inside an extension surface","Starting point for extensions with a modern component kit"],"docsUrl":"https://extension.js.org/docs/integrations/shadcnui","video":"gTpQ7v7zSuY","files":["extension.config.js","src/background.ts","src/components/ui/button.tsx","src/components/ui/card.tsx","src/components/ui/label.tsx","src/components/ui/switch.tsx","src/content/ContentApp.tsx","src/content/scripts.tsx","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/lib/utils.ts","src/manifest.json","src/sidebar/SidebarApp.tsx","src/sidebar/index.html","src/sidebar/scripts.tsx","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/sidebar-shadcn/screenshot.png","icon":"examples/sidebar-shadcn/src/images/icon.png"},{"slug":"special-folders-pages","name":"special-folders-pages","title":"Special Folders: pages/","version":"1.0.0","manifest_version":3,"description":"Opens a welcome page in a new tab when the extension loads.","uiContext":["background"],"surfaces":["background"],"entrypoints":["background.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":[],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["special-folders","pages","welcome-page","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","A welcome page from src/pages/ opens automatically on install","Add another HTML file under src/pages/ and it ships as a separate page"],"useCases":["Onboarding, help, and welcome pages that ship with the extension","Standalone HTML routes without manifest plumbing","Reference for Extension.js\'s pages/ special folder convention"],"docsUrl":"https://extension.js.org/docs/features/special-folders","files":["extension.config.js","pages/custom.html","pages/main.html","pages/main.js","pages/welcome.html","public/css/file.css","public/html/file.html","public/js/file.js","src/background.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/images/javascript.png","src/manifest.json","src/sandbox/eval.js","src/sandbox/index.html","src/sandbox/scripts.js","src/sandbox/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/special-folders-pages/screenshot.png","icon":"examples/special-folders-pages/src/images/icon.png"},{"slug":"special-folders-scripts","name":"special-folders-scripts","title":"Special Folders Scripts","version":"1.0.0","manifest_version":3,"description":"Shows a small overlay on web pages and a toolbar popup that runs the extension\'s bundled scripts.","uiContext":["content","action","background"],"surfaces":["content","action","background"],"entrypoints":["background.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["activeTab","scripting"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":false,"tags":["special-folders","scripts","javascript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Open any page for the overlay, then click the toolbar icon for the popup","Add a file under scripts/ and it ships as its own bundle"],"useCases":["Scripts shared between a popup and a content script","Standalone script bundles without manifest plumbing","Reference for the scripts/ special folder convention"],"docsUrl":"https://extension.js.org/docs/features/special-folders","video":"P8Q8TDQqbQE","files":["extension.config.js","scripts/script-one.js","scripts/script-three.js","scripts/script-two.js","src/background.js","src/content/scripts.js","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/images/javascript.png","src/manifest.json"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/special-folders-scripts/screenshot.png","icon":"examples/special-folders-scripts/src/images/icon.png"},{"slug":"svelte","name":"svelte","title":"Svelte","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser with a simple Svelte page.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.ts"],"uiFramework":"svelte","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["sidebar","svelte","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click the extension icon to open the Svelte sidebar panel","Edit the component in src/sidebar/ and save to watch it update"],"useCases":["A sidebar panel rendered by Svelte","Svelte components compiled with no extra config","Starting point for Svelte extensions"],"docsUrl":"https://extension.js.org/docs/getting-started/templates/svelte","video":"RgMo9t-oLL4","files":["extension.config.js","public/extension.svg","src/background.ts","src/content/ContentApp.svelte","src/content/scripts.ts","src/content/styles.css","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/sidebar/SidebarApp.svelte","src/sidebar/index.html","src/sidebar/scripts.ts","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/svelte/screenshot.png","icon":"examples/svelte/src/images/icon.png"},{"slug":"transformers-js","name":"transformers-js","title":"Transformers.js","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel that classifies the active page or your selected text with on-device AI models.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.js","content/scripts.js"],"uiFramework":"","css":"css","configFiles":["extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel","storage","tabs","contextMenus"],"host_permissions":["<all_urls>"],"optional_permissions":[],"featured":true,"tags":["sidebar","ai","transformers","javascript"],"difficulty":"intermediate","timeToFirstSuccessMinutes":4,"firstSteps":["Run npm run dev to launch the extension","Click the extension icon to open the side panel","Type in the text box, or use the page text or your selection, and the model classifies it on your machine"],"useCases":["Running Transformers.js models inside an extension","Classifying page text with no server and no API key","Reference for shipping on-device AI under MV3"],"docsUrl":"https://extension.js.org/docs/languages-and-frameworks/webassembly","video":"cTxqV5HXXWE","files":["extension.config.js","src/background.js","src/constants.js","src/content/scripts.js","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/sidebar/SidebarApp.js","src/sidebar/index.html","src/sidebar/sakura.css","src/sidebar/scripts.js","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/transformers-js/screenshot.png","icon":"examples/transformers-js/src/images/icon.png"},{"slug":"typescript","name":"typescript","title":"TypeScript","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser with a simple page.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.ts"],"uiFramework":"","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["sidebar","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click the extension icon to open the sidebar panel","Edit the typed sources in src/sidebar/ to watch the panel update"],"useCases":["A typed sidebar extension with no compiler config","TypeScript compiled by Extension.js out of the box","Starting point for TypeScript extensions"],"docsUrl":"https://extension.js.org/docs/getting-started/templates/typescript","video":"UX91cqUH2DU","files":["extension.config.js","src/background.ts","src/content/ContentApp.ts","src/content/scripts.ts","src/content/styles.css","src/content/types.d.ts","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/sidebar/SidebarApp.ts","src/sidebar/index.html","src/sidebar/scripts.ts","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/typescript/screenshot.png","icon":"examples/typescript/src/images/icon.png"},{"slug":"vue","name":"vue","title":"Vue","version":"1.0.0","manifest_version":3,"description":"Adds a sidebar panel to the browser with a simple Vue page.","uiContext":["content","sidebar","action","background"],"surfaces":["content","action","sidebar","background"],"entrypoints":["sidebar/index.html","background.ts","content/scripts.ts"],"uiFramework":"vue","css":"css","configFiles":["tsconfig.json","extension.config.js"],"hasBackground":true,"hasEnv":false,"setup":{"packageManager":"pnpm","scripts":{},"env":{"hasEnvExample":false,"hasEnv":false}},"permissions":["sidePanel"],"host_permissions":[],"optional_permissions":[],"featured":true,"tags":["sidebar","vue","typescript"],"difficulty":"beginner","timeToFirstSuccessMinutes":2,"firstSteps":["Run npm run dev to launch the extension","Click the extension icon to open the Vue sidebar panel","Edit the component in src/sidebar/ and save to watch it update"],"useCases":["A sidebar panel rendered by Vue","Single-file components compiled with no extra config","Starting point for Vue extensions"],"docsUrl":"https://extension.js.org/docs/getting-started/templates/vue","video":"x55b3Md2zIY","files":["extension.config.js","src/background.ts","src/content/ContentApp.vue","src/content/scripts.ts","src/content/styles.css","src/content/types.d.ts","src/images/icon-128.png","src/images/icon-16.png","src/images/icon-32.png","src/images/icon-48.png","src/images/icon-64.png","src/images/icon.png","src/manifest.json","src/shims-vue.d.ts","src/sidebar/SidebarApp.vue","src/sidebar/index.html","src/sidebar/scripts.ts","src/sidebar/styles.css"],"browsers":["chrome","edge","firefox"],"screenshot":"examples/vue/screenshot.png","icon":"examples/vue/src/images/icon.png"}]}');
+const CACHE_DIR = node_path.join(node_os.homedir(), ".cache", "extension-js");
+const CACHE_FILE = node_path.join(CACHE_DIR, "templates-meta.json");
+const CACHE_TTL_MS = 3600000;
+function isUsableMeta(data) {
+    return "object" == typeof data && null !== data && Array.isArray(data.templates) && data.templates.length > 0;
+}
+function isCacheValid() {
+    try {
+        const stat = node_fs.statSync(CACHE_FILE);
+        return Date.now() - stat.mtimeMs < CACHE_TTL_MS;
+    } catch  {
+        return false;
+    }
+}
+function readCachedMeta() {
+    try {
+        const cached = JSON.parse(node_fs.readFileSync(CACHE_FILE, "utf8"));
+        return isUsableMeta(cached) ? cached : null;
+    } catch  {
+        return null;
+    }
+}
+async function fetchTemplatesMeta() {
+    if (isCacheValid()) {
+        const cached = readCachedMeta();
+        if (cached) return cached;
+    }
+    let lastStatus = 0;
+    for (const url of (await templateMetaUrls()))try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            lastStatus = response.status;
+            continue;
+        }
+        const data = await response.json();
+        if (!isUsableMeta(data)) continue;
+        node_fs.mkdirSync(CACHE_DIR, {
+            recursive: true
+        });
+        const tmpFile = `${CACHE_FILE}.${process.pid}.tmp`;
+        node_fs.writeFileSync(tmpFile, JSON.stringify(data, null, 2));
+        node_fs.renameSync(tmpFile, CACHE_FILE);
+        return data;
+    } catch  {}
+    const stale = readCachedMeta();
+    if (stale) return stale;
+    if (isUsableMeta(templates_meta_snapshot_namespaceObject)) return templates_meta_snapshot_namespaceObject;
+    throw new Error(`Failed to fetch templates-meta.json (${lastStatus || "network error"}).`);
+}
+async function listTemplates(filters) {
+    const meta = await fetchTemplatesMeta();
+    let templates = meta.templates;
+    if (filters?.surface) templates = templates.filter((t)=>t.surfaces.includes(filters.surface));
+    if (filters?.framework !== void 0) templates = templates.filter((t)=>t.uiFramework === filters.framework);
+    if (filters?.tags?.length) templates = templates.filter((t)=>filters.tags.some((tag)=>t.tags?.includes(tag) || t.aiRecommendFor?.includes(tag)));
+    if (filters?.featured) templates = templates.filter((t)=>t.featured);
+    if (filters?.query) {
+        const phrase = filters.query.toLowerCase().trim();
+        const STOP = new Set([
+            "the",
+            "a",
+            "an",
+            "and",
+            "or",
+            "for",
+            "with",
+            "that",
+            "this",
+            "to",
+            "of",
+            "on",
+            "in",
+            "into",
+            "your",
+            "my",
+            "me",
             "it",
             "is"
         ]);
@@ -2700,11 +3142,110 @@ function removeSession(projectPath, browser, pid) {
 function listSessions() {
     return Array.from(sessions.values());
 }
+const PROJECT_MANIFEST_FILENAMES = [
+    "package.json",
+    "deno.jsonc",
+    "deno.json"
+];
+const PACKAGE_MANIFEST = "package.json";
+const DENO_MANIFESTS = [
+    "deno.jsonc",
+    "deno.json"
+];
+const EXTENSION_DEPENDENCY_NAMES = [
+    "extension",
+    "extension-develop",
+    "extension-create"
+];
+const EXTENSION_CONFIG_FILENAMES = [
+    "extension.config.js",
+    "extension.config.mjs",
+    "extension.config.cjs"
+];
+function isFile(file) {
+    try {
+        return node_fs.statSync(file).isFile();
+    } catch  {
+        return false;
+    }
+}
+function nearestAbove(startDir, names) {
+    let current = startDir;
+    for(;;){
+        for (const name of names)if (isFile(node_path.join(current, name))) return node_path.join(current, name);
+        const parent = node_path.dirname(current);
+        if (parent === current) return null;
+        current = parent;
+    }
+}
+function extensionManifestPath(projectPath) {
+    const src = node_path.join(projectPath, "src", "manifest.json");
+    if (isFile(src)) return src;
+    const root = node_path.join(projectPath, "manifest.json");
+    return isFile(root) ? root : null;
+}
+function declaresExtension(projectManifestPath) {
+    let parsed;
+    try {
+        parsed = JSON.parse(node_fs.readFileSync(projectManifestPath, "utf8"));
+    } catch  {
+        return false;
+    }
+    if (!parsed || "object" != typeof parsed) return false;
+    const record = parsed;
+    const named = [];
+    for (const field of [
+        "dependencies",
+        "devDependencies"
+    ]){
+        const deps = record[field];
+        if (deps && "object" == typeof deps) named.push(...Object.keys(deps));
+    }
+    const imports = record.imports;
+    if (imports && "object" == typeof imports) for (const [key, value] of Object.entries(imports)){
+        named.push(key);
+        if ("string" == typeof value) named.push(value);
+    }
+    return named.some((entry)=>EXTENSION_DEPENDENCY_NAMES.some((name)=>entry === name || entry.includes(`${name}@`) || entry === `npm:${name}`));
+}
+function ownsManifest(projectManifestPath, manifestPath) {
+    const projectDir = node_path.resolve(node_path.dirname(projectManifestPath));
+    const manifestDir = node_path.resolve(node_path.dirname(manifestPath));
+    if (projectDir === manifestDir) return true;
+    if ("src" === node_path.basename(manifestDir) && node_path.dirname(manifestDir) === projectDir) return true;
+    if (declaresExtension(projectManifestPath)) return true;
+    return EXTENSION_CONFIG_FILENAMES.some((name)=>isFile(node_path.join(projectDir, name)));
+}
+function engineProjectRoot(projectPath) {
+    const start = node_path.resolve(projectPath);
+    const manifest = extensionManifestPath(start);
+    if (!manifest) {
+        const nearest = nearestAbove(start, PROJECT_MANIFEST_FILENAMES);
+        return nearest ? node_path.dirname(nearest) : start;
+    }
+    const manifestDir = node_path.dirname(manifest);
+    const packageJson = nearestAbove(manifestDir, [
+        PACKAGE_MANIFEST
+    ]);
+    if (packageJson && ownsManifest(packageJson, manifest)) return node_path.dirname(packageJson);
+    const deno = nearestAbove(manifestDir, DENO_MANIFESTS);
+    if (deno && ownsManifest(deno, manifest)) return node_path.dirname(deno);
+    return start;
+}
+const rooted = (fn)=>(projectPath, ...rest)=>fn(engineProjectRoot(projectPath), ...rest);
+rooted(actionsPath);
+rooted(browserArtifactsDir);
+const session_paths_buildSummaryPath = rooted(buildSummaryPath);
+rooted(eventsPath);
+const session_paths_logsPath = rooted(logsPath);
+const session_paths_readyContractPath = rooted(bridge_readyContractPath);
+const session_paths_sessionArtifactsRootDir = rooted(sessionArtifactsRootDir);
+rooted(bridge_sessionStateDir);
 function sessionPathHint(file) {
     return `Looked at ${file} (the session-state layout this MCP's pinned engine publishes). If the project runs an older Extension.js, its layout may differ and this path will never appear.`;
 }
 function profilesRootDir(projectPath) {
-    return node_path.join(sessionArtifactsRootDir(projectPath), "profiles");
+    return node_path.join(session_paths_sessionArtifactsRootDir(projectPath), "profiles");
 }
 function browserProfileRootDir(projectPath, browser) {
     return node_path.join(profilesRootDir(projectPath), `${browser}-profile`);
@@ -2722,7 +3263,7 @@ function profileRemediation(input) {
     return `The engine keeps this session's profile in a directory inside ${root}, one per run: "${PERSISTED_PROFILE_DIR_NAME}" when the profile is persisted, otherwise three random words drawn fresh on every start, which no caller can predict. List ${root} to see which run directories exist and remove the one the stuck browser holds, or remove ${root} entirely once no session is running.`;
 }
 function contractSightings(projectPath) {
-    const root = sessionArtifactsRootDir(projectPath);
+    const root = session_paths_sessionArtifactsRootDir(projectPath);
     let dirs;
     try {
         dirs = node_fs.readdirSync(root);
@@ -2731,7 +3272,7 @@ function contractSightings(projectPath) {
     }
     const sightings = [];
     for (const dir of dirs){
-        const readyPath = bridge_readyContractPath(projectPath, dir);
+        const readyPath = session_paths_readyContractPath(projectPath, dir);
         try {
             const stat = node_fs.statSync(readyPath);
             const contract = JSON.parse(node_fs.readFileSync(readyPath, "utf8"));
@@ -2792,15 +3333,17 @@ function liveProjectSessions(projectPath) {
         ...out.values()
     ];
 }
-function deadReadySession(projectPath) {
-    for (const sighting of contractSightings(projectPath))if (void 0 !== sighting.pid && !pidAlive(sighting.pid)) return {
-        browser: sighting.browser,
-        pid: sighting.pid
-    };
+function deadReadySession(projectPath, browser) {
+    for (const sighting of contractSightings(projectPath))if (!browser || sighting.browser === browser) {
+        if (void 0 !== sighting.pid && !pidAlive(sighting.pid)) return {
+            browser: sighting.browser,
+            pid: sighting.pid
+        };
+    }
     return null;
 }
 function contractBoundPort(projectPath, browser, since) {
-    const readyPath = bridge_readyContractPath(projectPath, browser);
+    const readyPath = session_paths_readyContractPath(projectPath, browser);
     try {
         const stat = node_fs.statSync(readyPath);
         if (stat.mtimeMs < since) return null;
@@ -2850,6 +3393,8 @@ const GECKO_FAMILY = new Set([
     "firefox",
     "waterfox",
     "librewolf",
+    "zen",
+    "floorp",
     "gecko-based",
     "firefox-based"
 ]);
@@ -3228,7 +3773,7 @@ function readZipEntryNames(zipPath) {
 }
 const build_COMMAND = "extension_build";
 function readBuildSummary(projectPath, browser, since) {
-    const file = buildSummaryPath(projectPath, browser);
+    const file = session_paths_buildSummaryPath(projectPath, browser);
     try {
         const stat = node_fs.statSync(file);
         if (stat.mtimeMs >= since) {
@@ -3780,6 +4325,11 @@ async function build_handler(args) {
     }
     const engineFailure = "string" == typeof engine.frame?.error?.message ? engine.frame.error.message.trim() : "";
     const message = engineFailure || stderr.trim() || out || `extension build exited with code ${code}`;
+    const compileErrors = buildCompileErrors(args.projectPath, browser, start);
+    const tail = [
+        out,
+        stderr.trim()
+    ].filter(Boolean).join("\n").trim();
     return envelope_envelope({
         ok: false,
         command: build_COMMAND,
@@ -3790,12 +4340,30 @@ async function build_handler(args) {
         },
         value: {
             browser,
-            duration
+            duration,
+            ...compileErrors.length ? {
+                errors: compileErrors
+            } : {},
+            ...tail && !compileErrors.length ? {
+                output: tail.slice(-4000)
+            } : {}
         },
         warnings,
-        hint: "Check that the project has a valid src/manifest.json. Missing dependencies are installed by the build itself, so a failure here is usually the manifest, a compile error, or a Safari toolchain the host does not have."
+        hint: compileErrors.length ? `Fix the ${compileErrors.length} compile error${1 === compileErrors.length ? "" : "s"} in value.errors (file, loader and message as the bundler printed them) and build again. extension_manifest_validate covers the manifest; a missing dependency is installed by the build itself.` : "Read value.output for the bundler's own report. The manifest may live at the project root or under src; a failure here is usually a compile error, a manifest the engine refuses, or a Safari toolchain the host does not have."
     });
 }
+const ANSI_SEQUENCE = new RegExp(`${String.fromCharCode(27)}\\[[0-9;]*m`, "g");
+function buildCompileErrors(projectPath, browser, since) {
+    try {
+        const file = session_paths_readyContractPath(projectPath, browser);
+        if (node_fs.statSync(file).mtimeMs < since) return [];
+        const contract = JSON.parse(node_fs.readFileSync(file, "utf8"));
+        const errors = Array.isArray(contract?.errors) ? contract.errors : [];
+        return errors.filter((e)=>"string" == typeof e && e.trim()).map((e)=>e.replace(ANSI_SEQUENCE, "").trim()).slice(0, 20);
+    } catch  {
+        return [];
+    }
+}
 const MERGED_FD_CHATTER = [
     /^npm warn Unknown project config/i,
     /This will stop working in the next major version of npm/i,
@@ -3822,7 +4390,7 @@ const LEGACY_FIDELITY_WARNING = "This session ran a CLI that does not stamp the
 const READY_STAMP_PROFILE_LOCKED_CODE = "profile_locked";
 function readContract(projectPath, browser, since) {
     try {
-        const file = bridge_readyContractPath(projectPath, browser);
+        const file = session_paths_readyContractPath(projectPath, browser);
         const stat = node_fs.statSync(file);
         const contract = JSON.parse(node_fs.readFileSync(file, "utf8"));
         if (!contract || "object" != typeof contract) return null;
@@ -4085,7 +4653,7 @@ function projectPathForms(projectPath) {
         ...forms
     ];
 }
-const PLAUSIBLE_SESSION_BINARY = /chrom|edge|brave|opera|vivaldi|yandex|firefox|waterfox|librewolf|safari|node|electron|extension/i;
+const PLAUSIBLE_SESSION_BINARY = /chrom|edge|brave|opera|vivaldi|yandex|firefox|waterfox|librewolf|zen|floorp|safari|node|electron|extension/i;
 function processCommand(pid) {
     try {
         const cmdline = node_fs.readFileSync(`/proc/${pid}/cmdline`, "utf8");
@@ -4107,7 +4675,7 @@ function processCommand(pid) {
 }
 function contractProcessHints(projectPath, browser) {
     try {
-        const contract = JSON.parse(node_fs.readFileSync(bridge_readyContractPath(projectPath, browser), "utf8"));
+        const contract = JSON.parse(node_fs.readFileSync(session_paths_readyContractPath(projectPath, browser), "utf8"));
         const pids = [
             contract.browserPid,
             contract.launcherPid
@@ -4174,7 +4742,7 @@ function stop_signal(pid, sig) {
 }
 function pidFromReadyContract(projectPath, browser) {
     try {
-        const raw = node_fs.readFileSync(bridge_readyContractPath(projectPath, browser), "utf8");
+        const raw = node_fs.readFileSync(session_paths_readyContractPath(projectPath, browser), "utf8");
         const contract = JSON.parse(raw);
         return "number" == typeof contract.pid ? contract.pid : null;
     } catch  {
@@ -4212,7 +4780,7 @@ async function stopOne(projectPath, browser) {
     removeSession(projectPath, browser);
     removeSessionMarker(projectPath, browser);
     try {
-        node_fs.rmSync(bridge_readyContractPath(projectPath, browser), {
+        node_fs.rmSync(session_paths_readyContractPath(projectPath, browser), {
             force: true
         });
     } catch  {}
@@ -4601,6 +5169,7 @@ async function dev_handler(args) {
                 } : {}
             } : {},
             capabilities,
+            engine: describeExtensionInvocation(args.projectPath),
             logPath
         },
         warnings: [
@@ -4613,7 +5182,7 @@ async function dev_handler(args) {
 }
 const start_schema = {
     name: "extension_start",
-    description: "Run the PRODUCTION build in a browser: build the project, serve it, and launch. There is no hot module replacement and no control channel, so your edits are not picked up and extension_eval, extension_storage, extension_reload, extension_open and extension_dom_snapshot cannot attach to this session. Use extension_dev while writing code, and this to check what actually ships. Pass build:false to launch an existing dist/<browser> without rebuilding.",
+    description: "Run the PRODUCTION build in a browser: build the project, serve it, and launch. There is no hot module replacement and no control channel, so your edits are not picked up and extension_eval, extension_storage, extension_reload, extension_open and extension_dom_snapshot cannot attach to this session. Use extension_dev while writing code, and this to check what actually ships. Pass build:false to launch an existing dist/<browser> without rebuilding, or outputPath to launch any prebuilt unpacked extension directory, one another toolchain produced included, which implies build:false.",
     inputSchema: {
         type: "object",
         properties: {
@@ -4638,6 +5207,10 @@ const start_schema = {
                 default: false,
                 description: "Serve without launching a browser"
             },
+            outputPath: {
+                type: "string",
+                description: "An existing unpacked extension directory to launch as it is (a manifest.json at its root), for an artifact built by another toolchain or an exact release candidate. Implies build:false; projectPath still names the project the session belongs to. Relative paths resolve against projectPath."
+            },
             ...LAUNCH_FLAG_SCHEMA
         },
         required: [
@@ -4647,7 +5220,22 @@ const start_schema = {
 };
 async function start_handler(args) {
     const browser = args.browser ?? "chrome";
-    const building = false !== args.build;
+    const outputPath = "string" == typeof args.outputPath && args.outputPath.trim() ? node_path.resolve(args.projectPath, args.outputPath.trim()) : null;
+    if (outputPath) {
+        const manifest = node_path.join(outputPath, "manifest.json");
+        if (!node_fs.existsSync(manifest)) return envelope_envelope({
+            ok: false,
+            command: start_schema.name,
+            status: "no-unpacked-extension",
+            error: {
+                code: "E_NO_DIST",
+                name: "NoUnpackedExtension",
+                message: `outputPath ${outputPath} holds no manifest.json, so there is no unpacked extension to launch.`
+            },
+            hint: "Point outputPath at the directory that holds the built manifest.json (for an Extension.js project that is dist/<browser>; for another toolchain, its build output), or omit it to build and run the project."
+        });
+    }
+    const building = false !== args.build && !outputPath;
     const command = building ? "start" : "preview";
     const cliArgs = [
         command,
@@ -4655,6 +5243,7 @@ async function start_handler(args) {
         "--browser",
         browser
     ];
+    if (outputPath) cliArgs.push("--output-path", outputPath);
     if (building && false === args.polyfill) cliArgs.push("--polyfill", "false");
     if (void 0 !== args.port) cliArgs.push("--port", String(args.port));
     if (args.noBrowser) cliArgs.push("--no-browser");
@@ -4771,7 +5360,7 @@ async function start_handler(args) {
     });
 }
 function toMcpSpeak(text) {
-    return text.replace(/`?extension dev(?: [^\s`]*)? --browser[= ]([\w-]+) --allow-control`?/g, 'extension_dev with { browser: "$1", allowControl: true }').replace(/--allow-control/g, "allowControl: true (extension_dev)").replace(/--allow-eval/g, "allowEval: true (extension_dev)").replace(/Use --context page --tab <id>/g, 'Use context: "page" (targets the active tab; pass url or tab to pick another)').replace(/--context[= ](background|popup|options|sidebar|devtools|newtab|history|bookmarks|content|page)\b/g, 'context: "$1"').replace(/--tab[= ](\d+|<[\w-]+>)/g, "tab: $1").replace(/--url[= ]"([^"]+)"/g, 'url: "$1"').replace(/--url[= ](<[\w-]+>|\S*(?:\/\/|\*)\S*)/g, 'url: "$1"').replace(/--browser[= ]([\w]+-based|chrome|chromium|edge|brave|opera|vivaldi|yandex|firefox|waterfox|librewolf|safari)\b/g, 'browser: "$1"').replace(/--timeout[= ](\d+)/g, "timeout: $1").replace(/\bextension open (popup|options|sidebar|newtab|history|bookmarks)\b/g, 'extension_open with surface: "$1"').replace(/`extension dev`/g, "extension_dev").replace(/\bextension dev\b/g, "extension_dev").replace(/--tab\b/g, "`tab`").replace(/--url\b/g, "`url`").replace(/--context\b/g, "`context`").replace(/--browser\b/g, "`browser`").replace(/--timeout\b/g, "`timeout`");
+    return text.replace(/`?extension dev(?: [^\s`]*)? --browser[= ]([\w-]+) --allow-control`?/g, 'extension_dev with { browser: "$1", allowControl: true }').replace(/--allow-control/g, "allowControl: true (extension_dev)").replace(/--allow-eval/g, "allowEval: true (extension_dev)").replace(/Use --context page --tab <id>/g, 'Use context: "page" (targets the active tab; pass url or tab to pick another)').replace(/--context[= ](background|popup|options|sidebar|devtools|newtab|history|bookmarks|content|page)\b/g, 'context: "$1"').replace(/--tab[= ](\d+|<[\w-]+>)/g, "tab: $1").replace(/--url[= ]"([^"]+)"/g, 'url: "$1"').replace(/--url[= ](<[\w-]+>|\S*(?:\/\/|\*)\S*)/g, 'url: "$1"').replace(/--browser[= ]([\w]+-based|chrome|chromium|edge|brave|opera|vivaldi|yandex|firefox|waterfox|librewolf|zen|floorp|safari)\b/g, 'browser: "$1"').replace(/--timeout[= ](\d+)/g, "timeout: $1").replace(/\bextension open (popup|options|sidebar|newtab|history|bookmarks)\b/g, 'extension_open with surface: "$1"').replace(/`extension dev`/g, "extension_dev").replace(/\bextension dev\b/g, "extension_dev").replace(/--tab\b/g, "`tab`").replace(/--url\b/g, "`url`").replace(/--context\b/g, "`context`").replace(/--browser\b/g, "`browser`").replace(/--timeout\b/g, "`timeout`");
 }
 const CONTROL_CHANNEL_DOWN_CODES = new Set([
     "E_CONTROL_DENIED",
@@ -4783,18 +5372,22 @@ const CONTROL_CHANNEL_DOWN_CODES = new Set([
 function legacyControlChannelScrape(message) {
     return /no active control channel|control channel refused|\b1006\b|no executor connected|is the session started with allowControl/i.test(message);
 }
-function withSessionContext(message, projectPath, code) {
+function withSessionContext(message, projectPath, code, browser) {
     const isControlError = code ? CONTROL_CHANNEL_DOWN_CODES.has(code) : legacyControlChannelScrape(message);
     if (!isControlError) return message;
-    const dead = deadReadySession(projectPath);
+    const dead = deadReadySession(projectPath, browser);
     if (dead) return `${message}\nLikely cause: the dev server has exited, ${dead.browser} ready.json still says ready but its pid ${dead.pid} is dead. Restart with extension_dev (this is not an allowControl problem); extension_doctor confirms.`;
     const running = knownSessionBrowsers(projectPath);
     if (0 === running.length) return message;
     return `${message} Active session browser(s) for this project: ${running.join(", ")}, pass that as \`browser\`, or restart it via extension_dev with allowControl: true if the control channel is off.`;
 }
-function translateFrame(frame, projectPath) {
+function browserFlag(args) {
+    const at = args.indexOf("--browser");
+    return -1 !== at && "string" == typeof args[at + 1] ? args[at + 1] : void 0;
+}
+function translateFrame(frame, projectPath, browser) {
     if (!frame || false !== frame.ok) return frame;
-    if (frame.error && "string" == typeof frame.error.message) frame.error.message = withSessionContext(toMcpSpeak(frame.error.message), projectPath, "string" == typeof frame.error.code ? frame.error.code : void 0);
+    if (frame.error && "string" == typeof frame.error.message) frame.error.message = withSessionContext(toMcpSpeak(frame.error.message), projectPath, "string" == typeof frame.error.code ? frame.error.code : void 0, browser);
     if ("string" == typeof frame.error?.hint) frame.error.hint = toMcpSpeak(frame.error.hint);
     if ("string" == typeof frame.hint) frame.hint = toMcpSpeak(frame.hint);
     return frame;
@@ -4869,7 +5462,7 @@ async function runActVerb(args, projectPath, timeoutMs, tool) {
     });
     const out = stdout.trim();
     if (out) try {
-        const frame = translateFrame(JSON.parse(out), projectPath);
+        const frame = translateFrame(JSON.parse(out), projectPath, browserFlag(args));
         if (isEnvelope(frame)) {
             frame.command = command;
             if (!Array.isArray(frame.warnings)) frame.warnings = [];
@@ -4896,7 +5489,7 @@ async function runActVerb(args, projectPath, timeoutMs, tool) {
         error: {
             code: "E_CLI",
             name: "CliError",
-            message: withSessionContext(toMcpSpeak(message), projectPath)
+            message: withSessionContext(toMcpSpeak(message), projectPath, void 0, browserFlag(args))
         }
     });
 }
@@ -5240,6 +5833,26 @@ class CDPClient extends CDPConnection {
         if ("string" == typeof data.webSocketDebuggerUrl) return data.webSocketDebuggerUrl;
         throw new Error("No webSocketDebuggerUrl in /json/version response");
     }
+    static async discoverBrowserVersion(port, host = "127.0.0.1") {
+        try {
+            const res = await fetch(`http://${host}:${port}/json/version`);
+            if (!res.ok) return null;
+            const data = await res.json();
+            return "string" == typeof data.Browser ? data.Browser : null;
+        } catch  {
+            return null;
+        }
+    }
+    static async discoverUserAgent(port, host = "127.0.0.1") {
+        try {
+            const res = await fetch(`http://${host}:${port}/json/version`);
+            if (!res.ok) return null;
+            const data = await res.json();
+            return "string" == typeof data["User-Agent"] ? data["User-Agent"] : null;
+        } catch  {
+            return null;
+        }
+    }
     static async discoverTargets(port, host = "127.0.0.1") {
         const res = await fetch(`http://${host}:${port}/json`);
         if (!res.ok) throw new Error(`CDP /json failed: ${res.status}`);
@@ -5364,7 +5977,7 @@ class CDPClient extends CDPConnection {
 async function resolveContractPort(projectPath, browser, field, options) {
     const waitMs = options?.waitMs ?? 20000;
     const graceMs = options?.graceMs ?? 2500;
-    const readyPath = bridge_readyContractPath(projectPath, browser);
+    const readyPath = session_paths_readyContractPath(projectPath, browser);
     const deadline = Date.now() + waitMs;
     let contractSeen = false;
     let contractSeenAt = null;
@@ -5441,7 +6054,7 @@ function webdriver_define_property(obj, key, value) {
 const WEBDRIVER_SESSION_MISSING_HINT = "A Safari page is readable only through a safaridriver session the dev session records in ready.json (webdriverPort and webdriverSessionId), and no Extension.js release opens one today: Safari grants one automation session at a time, so this server never opens its own. What Safari does give you is the dev session's log file, which extension_logs and the log-based assertions read once the extension is enabled; the rest is Web Inspector, attended.";
 function readWebDriverSession(projectPath, browser) {
     try {
-        const contract = JSON.parse(node_fs.readFileSync(bridge_readyContractPath(projectPath, browser), "utf8"));
+        const contract = JSON.parse(node_fs.readFileSync(session_paths_readyContractPath(projectPath, browser), "utf8"));
         if ("number" == typeof contract.webdriverPort && Number.isFinite(contract.webdriverPort) && "string" == typeof contract.webdriverSessionId && contract.webdriverSessionId.length > 0) return {
             port: contract.webdriverPort,
             sessionId: contract.webdriverSessionId
@@ -5451,7 +6064,7 @@ function readWebDriverSession(projectPath, browser) {
 }
 function readyExtensionId(projectPath, browser) {
     try {
-        const contract = JSON.parse(node_fs.readFileSync(bridge_readyContractPath(projectPath, browser), "utf8"));
+        const contract = JSON.parse(node_fs.readFileSync(session_paths_readyContractPath(projectPath, browser), "utf8"));
         const id = String(contract.extensionId || "").trim();
         return id.length > 0 ? id : null;
     } catch  {
@@ -5721,11 +6334,18 @@ async function pollForBridgeTab(projectPath, browser, url, budgetMs) {
     }
 }
 const UNKNOWN_VERB = /unknown command/i;
-async function navigateToUrlViaBridge(projectPath, browser, url, timeout, tool = "extension_open") {
+async function navigateToUrlViaBridge(projectPath, browser, url, timeout, tool = "extension_open", target = {}) {
     const viaVerb = await runActVerb([
         "navigate",
         url,
         projectPath,
+        ...null != target.tab ? [
+            "--tab",
+            String(target.tab)
+        ] : [],
+        ...null == target.tab && target.newTab ? [
+            "--new-tab"
+        ] : [],
         "--browser",
         browser,
         ...null != timeout ? [
@@ -5812,7 +6432,47 @@ async function navigateToUrlViaBackgroundEval(projectPath, browser, url, timeout
         hint: "Inspect it with extension_dom_snapshot or extension_eval using url or this numeric tab id (context: 'page'/'content')."
     });
 }
+const UUIDS_PREF = /user_pref\("extensions\.webextensions\.uuids",\s*"((?:[^"\\]|\\.)*)"\)/;
+function geckoAddonId(projectPath, browser) {
+    const read = readBuiltManifest(projectPath, browser);
+    const manifest = read?.manifest;
+    const settings = manifest?.browser_specific_settings ?? manifest?.["firefox:browser_specific_settings"] ?? manifest?.["gecko:browser_specific_settings"] ?? manifest?.applications;
+    const id = settings?.gecko?.id;
+    return "string" == typeof id && id ? id : null;
+}
+function sessionProfilePath(projectPath, browser) {
+    try {
+        const contract = JSON.parse(node_fs.readFileSync(session_paths_readyContractPath(projectPath, browser), "utf8"));
+        return "string" == typeof contract.profilePath && contract.profilePath.trim() ? contract.profilePath : null;
+    } catch  {
+        return null;
+    }
+}
+function readGeckoBaseUrlFromProfile(projectPath, browser) {
+    const addonId = geckoAddonId(projectPath, browser);
+    const profile = sessionProfilePath(projectPath, browser);
+    if (!addonId || !profile) return null;
+    let prefs;
+    try {
+        prefs = node_fs.readFileSync(node_path.join(profile, "prefs.js"), "utf8");
+    } catch  {
+        return null;
+    }
+    const match = UUIDS_PREF.exec(prefs);
+    if (!match) return null;
+    try {
+        const map = JSON.parse(JSON.parse(`"${match[1]}"`));
+        const uuid = map[addonId];
+        return "string" == typeof uuid && uuid ? `moz-extension://${uuid}/` : null;
+    } catch  {
+        return null;
+    }
+}
 async function resolveBridgeBaseUrl(projectPath, browser, timeout) {
+    const fromRelay = await resolveBridgeBaseUrlThroughRelay(projectPath, browser, timeout);
+    return fromRelay ?? readGeckoBaseUrlFromProfile(projectPath, browser);
+}
+async function resolveBridgeBaseUrlThroughRelay(projectPath, browser, timeout) {
     const raw = await runActVerb([
         "eval",
         '(typeof browser !== "undefined" ? browser : chrome).runtime.getURL("")',
@@ -5844,6 +6504,17 @@ function filterPageTargets(raw) {
 async function listPageTargets(port) {
     return filterPageTargets(await CDPClient.discoverTargets(port));
 }
+function filterDocumentTargets(raw) {
+    return raw.filter((t)=>("page" === t.type || "iframe" === t.type) && !String(t.url ?? "").startsWith("devtools://")).map((t)=>({
+            targetId: String(t.id),
+            type: String(t.type),
+            url: String(t.url ?? ""),
+            title: String(t.title ?? "")
+        }));
+}
+async function listDocumentTargets(port) {
+    return filterDocumentTargets(await CDPClient.discoverTargets(port));
+}
 function matchTargetsByUrl(targets, needle) {
     const wanted = needle.toLowerCase();
     const byUrl = targets.filter((t)=>t.url.toLowerCase().includes(wanted));
@@ -5853,8 +6524,7 @@ function matchTargetsByUrl(targets, needle) {
 const RUNTIME_EVALUATE_DEFAULTS = {
     returnByValue: true,
     awaitPromise: true,
-    userGesture: true,
-    replMode: true
+    userGesture: true
 };
 function stripHash(url) {
     return url.replace(/#.*$/, "");
@@ -5866,9 +6536,67 @@ function matchExtensionPageTargets(targets, wantedUrl) {
         return url === wanted || url.startsWith(wanted);
     });
 }
+const WORKER_TARGET_TYPES = new Set([
+    "service_worker",
+    "background_page",
+    "worker"
+]);
+async function findExtensionWorkerTargets(port, extensionId) {
+    try {
+        const origin = `chrome-extension://${extensionId}/`;
+        return (await CDPClient.discoverTargets(port)).filter((t)=>WORKER_TARGET_TYPES.has(String(t.type)) && String(t.url ?? "").startsWith(origin)).map((t)=>({
+                targetId: String(t.id),
+                type: String(t.type),
+                url: String(t.url ?? "")
+            }));
+    } catch  {
+        return [];
+    }
+}
+async function wakeExtensionWorker(port, extensionId) {
+    const cdp = new CDPClient();
+    const scopeURL = `chrome-extension://${extensionId}/`;
+    try {
+        await cdp.connect(await CDPClient.discoverBrowserWsUrl(port));
+        const pages = (await CDPClient.discoverTargets(port)).filter((t)=>"page" === t.type && !String(t.url ?? "").startsWith("devtools://"));
+        const host = pages.find((t)=>String(t.url ?? "").startsWith(scopeURL)) ?? pages[0];
+        if (!host) return {
+            woken: false,
+            reason: "the session has no page target to issue ServiceWorker.startWorker from"
+        };
+        const sessionId = await cdp.attachToTarget(String(host.id));
+        await cdp.sendCommand("ServiceWorker.enable", {}, sessionId);
+        await cdp.sendCommand("ServiceWorker.startWorker", {
+            scopeURL
+        }, sessionId);
+        const deadline = Date.now() + 3000;
+        for(;;){
+            const targets = await findExtensionWorkerTargets(port, extensionId);
+            if (targets.length > 0) return {
+                woken: true,
+                targets
+            };
+            if (Date.now() >= deadline) break;
+            await new Promise((r)=>setTimeout(r, 150));
+        }
+        return {
+            woken: false,
+            reason: "ServiceWorker.startWorker answered but no worker target was listed within 3s (the extension may declare no background, or the worker exited at once)"
+        };
+    } catch (error) {
+        return {
+            woken: false,
+            reason: error instanceof Error ? error.message : String(error)
+        };
+    } finally{
+        try {
+            cdp.disconnect();
+        } catch  {}
+    }
+}
 async function findExtensionPageTargets(port, wantedUrl) {
     try {
-        return matchExtensionPageTargets(await listPageTargets(port), wantedUrl);
+        return matchExtensionPageTargets(await listDocumentTargets(port), wantedUrl);
     } catch  {
         return [];
     }
@@ -5886,15 +6614,30 @@ function describeException(details) {
     if (exception && "value" in exception) return String(exception.value);
     return details?.text || "the expression threw";
 }
+const TOP_LEVEL_AWAIT_REFUSAL = /await is only valid in async functions/i;
 async function evaluateOnExtensionPage(port, targetId, expression) {
     const cdp = new CDPClient();
     try {
         await cdp.connect(await CDPClient.discoverBrowserWsUrl(port));
         const sessionId = await cdp.attachToTarget(targetId);
-        const response = await cdp.sendCommand("Runtime.evaluate", {
+        let response = await cdp.sendCommand("Runtime.evaluate", {
             expression,
             ...RUNTIME_EVALUATE_DEFAULTS
         }, sessionId);
+        if (response?.exceptionDetails && TOP_LEVEL_AWAIT_REFUSAL.test(describeException(response.exceptionDetails))) {
+            const asPromise = await cdp.sendCommand("Runtime.evaluate", {
+                expression,
+                returnByValue: false,
+                awaitPromise: false,
+                userGesture: true,
+                replMode: true
+            }, sessionId);
+            const promiseObjectId = asPromise?.result?.objectId;
+            response = asPromise?.exceptionDetails || "string" != typeof promiseObjectId ? asPromise : await cdp.sendCommand("Runtime.awaitPromise", {
+                promiseObjectId,
+                returnByValue: true
+            }, sessionId);
+        }
         if (response?.exceptionDetails) return {
             ok: false,
             thrown: true,
@@ -6065,6 +6808,146 @@ async function openSidePanelWithSyntheticGesture(port, hostUrl) {
         } catch  {}
     }
 }
+const PANEL_IDS_EXPRESSION = "import('./ui/legacy/legacy.js').then((m) => m.InspectorView.InspectorView.instance().tabbedPane.tabIds())";
+function showPanelExpression(panelId) {
+    return `import('./ui/legacy/legacy.js').then((m) => m.InspectorView.InspectorView.instance().showPanel(${JSON.stringify(panelId)})).then(() => "shown")`;
+}
+function panelIdPrefix(extensionId) {
+    return `chrome-extension://${extensionId}`;
+}
+function panelTitleFromId(panelId, extensionId) {
+    return panelId.slice(panelIdPrefix(extensionId).length);
+}
+function isDevToolsFrontend(target) {
+    return String(target.url ?? "").startsWith("devtools://");
+}
+async function sleep(ms) {
+    await new Promise((r)=>setTimeout(r, ms));
+}
+async function openDevToolsPanel(port, options) {
+    const budgetMs = options.budgetMs ?? 15000;
+    const cdp = new CDPClient();
+    const listTargets = async ()=>await CDPClient.discoverTargets(port);
+    try {
+        await cdp.connect(await CDPClient.discoverBrowserWsUrl(port));
+        const before = new Set((await listTargets().catch(()=>[])).filter(isDevToolsFrontend).map((t)=>t.id));
+        let devtoolsTargetId = null;
+        try {
+            const opened = await cdp.sendCommand("Target.openDevTools", {
+                targetId: options.inspectedTargetId
+            });
+            if ("string" == typeof opened?.targetId) devtoolsTargetId = opened.targetId;
+        } catch (error) {
+            return {
+                opened: false,
+                stage: "open",
+                reason: error instanceof Error ? error.message : String(error)
+            };
+        }
+        const deadline = Date.now() + budgetMs;
+        while(!devtoolsTargetId && Date.now() < deadline){
+            await sleep(200);
+            const fresh = (await listTargets().catch(()=>[])).find((t)=>isDevToolsFrontend(t) && !before.has(t.id));
+            if (fresh) devtoolsTargetId = fresh.id;
+        }
+        if (!devtoolsTargetId) return {
+            opened: false,
+            stage: "frontend",
+            reason: "Target.openDevTools answered but no devtools:// frontend target appeared"
+        };
+        const sessionId = await cdp.attachToTarget(devtoolsTargetId);
+        if (options.reloadInspected) {
+            const frameDeadline = Date.now() + Math.min(5000, budgetMs / 2);
+            while(Date.now() < frameDeadline){
+                const frame = (await listTargets().catch(()=>[])).find((t)=>"iframe" === t.type && String(t.url ?? "").startsWith(options.devtoolsPageUrl));
+                if (frame) break;
+                await sleep(200);
+            }
+            await sleep(Math.min(2500, budgetMs / 4));
+            try {
+                const inspectedSession = await cdp.attachToTarget(options.inspectedTargetId);
+                await cdp.sendCommand("Page.reload", {}, inspectedSession);
+            } catch  {}
+        }
+        const evaluate = async (expression)=>await cdp.sendCommand("Runtime.evaluate", {
+                expression,
+                returnByValue: true,
+                awaitPromise: true
+            }, sessionId).catch(()=>null);
+        const wantedId = "string" == typeof options.panelTitle && options.panelTitle ? `${panelIdPrefix(options.extensionId)}${options.panelTitle}` : null;
+        const prefix = panelIdPrefix(options.extensionId);
+        let panels = [];
+        let panelId = null;
+        let nudged = false;
+        const nudgeAt = Date.now() + Math.min(4000, budgetMs / 2);
+        while(!panelId && Date.now() < deadline){
+            const response = await evaluate(PANEL_IDS_EXPRESSION);
+            const ids = response?.result?.value;
+            if (Array.isArray(ids)) {
+                panels = ids.map(String);
+                panelId = panels.find((id)=>wantedId ? id === wantedId : id.startsWith(prefix)) ?? null;
+            }
+            if (panelId) break;
+            if (!nudged && Date.now() >= nudgeAt) {
+                nudged = true;
+                const frame = (await listTargets().catch(()=>[])).find((t)=>"iframe" === t.type && String(t.url ?? "").startsWith(options.devtoolsPageUrl));
+                if (frame) try {
+                    const frameSession = await cdp.attachToTarget(frame.id);
+                    await cdp.sendCommand("Runtime.evaluate", {
+                        expression: "1",
+                        returnByValue: true
+                    }, frameSession);
+                } catch  {}
+            }
+            await sleep(250);
+        }
+        if (!panelId) return {
+            opened: false,
+            stage: "panel",
+            devtoolsTargetId,
+            panels,
+            reason: wantedId ? `no panel with id ${wantedId} registered within ${budgetMs}ms` : `no panel from ${prefix} registered within ${budgetMs}ms`
+        };
+        const framesBefore = new Set((await listTargets().catch(()=>[])).filter((t)=>"iframe" === t.type && String(t.url ?? "").startsWith(`${prefix}/`)).map((t)=>t.id));
+        const shown = await evaluate(showPanelExpression(panelId));
+        if (!shown || shown.exceptionDetails) return {
+            opened: false,
+            stage: "show",
+            devtoolsTargetId,
+            panels,
+            reason: `showPanel(${panelId}) ${shown?.exceptionDetails ? `threw: ${shown.exceptionDetails.exception?.description ?? shown.exceptionDetails.text ?? "unknown"}` : "did not answer"}`
+        };
+        let panelTarget = null;
+        const showDeadline = Date.now() + 3000;
+        while(!panelTarget && Date.now() < showDeadline){
+            const frames = (await listTargets().catch(()=>[])).filter((t)=>"iframe" === t.type && String(t.url ?? "").startsWith(`${prefix}/`) && !String(t.url ?? "").startsWith(options.devtoolsPageUrl));
+            const fresh = frames.find((t)=>!framesBefore.has(t.id)) ?? frames[0];
+            if (fresh) panelTarget = {
+                targetId: fresh.id,
+                url: String(fresh.url)
+            };
+            else await sleep(200);
+        }
+        return {
+            opened: true,
+            devtoolsTargetId,
+            panelId,
+            panelTitle: panelTitleFromId(panelId, options.extensionId),
+            panelTarget,
+            panels
+        };
+    } catch (error) {
+        return {
+            opened: false,
+            stage: "open",
+            reason: error instanceof Error ? error.message : String(error)
+        };
+    } finally{
+        try {
+            cdp.disconnect();
+        } catch  {}
+    }
+}
 const OVERRIDE_SURFACES = [
     "newtab",
     "history",
@@ -6098,9 +6981,37 @@ async function pollForTarget(port, url, budgetMs, navigatedTargetId) {
         await new Promise((r)=>setTimeout(r, 250));
     }
 }
-function isDisposableTab(tabUrl, destination) {
+async function landedOnErrorPage(port, targetId) {
+    await new Promise((r)=>setTimeout(r, 400));
+    try {
+        const target = (await CDPClient.discoverTargets(port)).find((t)=>String(t.id) === targetId);
+        const url = String(target?.url ?? "");
+        if (/^(chrome|edge)-error:\/\//.test(url)) return {
+            url,
+            title: "string" == typeof target?.title ? target.title : void 0
+        };
+    } catch  {}
+    return null;
+}
+async function browserRunsHeadless(projectPath, browser) {
+    if (!isChromiumFamily(browser)) return false;
+    try {
+        const resolved = await resolveCdpPort(projectPath, browser, {
+            waitMs: 2000
+        });
+        if (!resolved) return false;
+        const product = await CDPClient.discoverBrowserVersion(resolved.port);
+        if ("string" == typeof product && /headless/i.test(product)) return true;
+        const agent = "function" == typeof CDPClient.discoverUserAgent ? await CDPClient.discoverUserAgent(resolved.port) : null;
+        return "string" == typeof agent && /headless/i.test(agent);
+    } catch  {
+        return false;
+    }
+}
+function isDisposableTab(tabUrl, destination, reuse) {
     if (!tabUrl || "about:blank" === tabUrl) return true;
     if (/^chrome:\/\/(newtab|new-tab-page)/.test(tabUrl)) return true;
+    if ("blank" === reuse) return false;
     const origin = destination.match(/^chrome-extension:\/\/[a-p]{32}\//)?.[0];
     return Boolean(origin && tabUrl.startsWith(origin));
 }
@@ -6134,9 +7045,15 @@ async function navigateToUrlViaWebDriver(projectPath, browser, url) {
         });
     }
 }
-async function navigateToUrl(projectPath, browser, url, timeout) {
+async function navigateToUrl(projectPath, browser, url, timeout, options = {}) {
+    const reuse = options.reuse ?? "blank";
+    if (null != options.tab) return navigateToUrlViaBridge(projectPath, browser, url, timeout, open_schema.name, {
+        tab: options.tab
+    });
     if (WEBKIT_FAMILY.has(browser) && readWebDriverSession(projectPath, browser)) return navigateToUrlViaWebDriver(projectPath, browser, url);
-    if (!isChromiumFamily(browser)) return navigateToUrlViaBridge(projectPath, browser, url, timeout);
+    if (!isChromiumFamily(browser)) return navigateToUrlViaBridge(projectPath, browser, url, timeout, open_schema.name, {
+        newTab: true
+    });
     const resolved = await resolveCdpPort(projectPath, browser);
     if (!resolved) return envelope_envelope({
         ok: false,
@@ -6154,7 +7071,7 @@ async function navigateToUrl(projectPath, browser, url, timeout) {
         const pageTargets = targets.filter((t)=>"page" === t.type && !String(t.url || "").startsWith("devtools://"));
         const browserWsUrl = await CDPClient.discoverBrowserWsUrl(resolved.port);
         await cdp.connect(browserWsUrl);
-        const reusable = pageTargets.find((t)=>isDisposableTab(String(t.url ?? ""), url));
+        const reusable = pageTargets.find((t)=>isDisposableTab(String(t.url ?? ""), url, reuse));
         let navigatedTargetId;
         let openedNewTab = false;
         if (reusable) {
@@ -6172,6 +7089,26 @@ async function navigateToUrl(projectPath, browser, url, timeout) {
             openedNewTab = true;
         }
         const settled = await pollForTarget(resolved.port, url, 6000, navigatedTargetId);
+        const blocked = settled ? await landedOnErrorPage(resolved.port, settled.id) : null;
+        if (blocked) return envelope_envelope({
+            ok: false,
+            command: open_schema.name,
+            status: "navigate-blocked",
+            error: {
+                code: "E_NAVIGATE_FAILED",
+                name: "PageBlocked",
+                message: `The browser refused ${url} and shows its own error page instead${blocked.title ? ` ("${blocked.title}")` : ""}.`
+            },
+            value: {
+                navigated: url,
+                target: {
+                    targetId: settled.id,
+                    url: blocked.url,
+                    title: blocked.title
+                }
+            },
+            hint: "Nothing is rendering the requested document. Read the tab title for the browser's reason (Edge, for one, blocks some extension pages with ERR_BLOCKED_BY_CLIENT); try another browser with extension_dev, or a different document of the same extension."
+        });
         if (!settled) {
             const isExtensionPage = url.startsWith("chrome-extension://");
             return envelope_envelope({
@@ -6279,7 +7216,7 @@ function declaredCommands(projectPath, browser) {
 }
 function readDistPath(projectPath, browser) {
     try {
-        const file = bridge_readyContractPath(projectPath, browser);
+        const file = session_paths_readyContractPath(projectPath, browser);
         const contract = JSON.parse(node_fs.readFileSync(file, "utf8"));
         return "string" == typeof contract?.distPath ? contract.distPath : null;
     } catch  {
@@ -6295,7 +7232,7 @@ function surfaceDocument(projectPath, browser, surface) {
             continue;
         }
         const action = manifest.action ?? manifest.browser_action;
-        const ref = "popup" === surface || "action" === surface ? action?.default_popup : "options" === surface ? manifest.options_ui?.page ?? manifest.options_page : "sidebar" === surface ? manifest.side_panel?.default_path ?? manifest.sidebar_action?.default_panel : "newtab" === surface || "history" === surface || "bookmarks" === surface ? manifest.chrome_url_overrides?.[surface] : null;
+        const ref = "popup" === surface || "action" === surface ? action?.default_popup : "options" === surface ? manifest.options_ui?.page ?? manifest.options_page : "sidebar" === surface ? manifest.side_panel?.default_path ?? manifest.sidebar_action?.default_panel : "devtools" === surface ? manifest.devtools_page : "newtab" === surface || "history" === surface || "bookmarks" === surface ? manifest.chrome_url_overrides?.[surface] : null;
         if ("string" == typeof ref && ref) return ref.replace(/^\.?\//, "");
     }
     return null;
@@ -6304,6 +7241,7 @@ const SURFACE_MANIFEST_KEYS = {
     popup: "action.default_popup",
     options: "options_ui.page (or options_page)",
     sidebar: "side_panel.default_path (or sidebar_action.default_panel)",
+    devtools: "devtools_page",
     newtab: "chrome_url_overrides.newtab",
     history: "chrome_url_overrides.history",
     bookmarks: "chrome_url_overrides.bookmarks"
@@ -6435,14 +7373,16 @@ async function openSurfaceAsTab(projectPath, browser, surface) {
             error: {
                 code: "E_NO_EXTENSION_ID",
                 name: "NoExtensionId",
-                message: "Could not resolve the extension's moz-extension:// base URL from the live session (a background eval of runtime.getURL)."
+                message: "Could not resolve the extension's moz-extension:// base URL: the background eval of runtime.getURL did not answer (an extension CSP that forbids eval refuses it) and the profile's extensions.webextensions.uuids pref had no entry for the add-on id the built manifest declares."
             },
-            hint: "Confirm the session is ready (extension_wait) and was started with allowEval: true (extension_dev)."
+            hint: "Confirm the session is ready (extension_wait) and was started with allowEval: true (extension_dev); the profile route needs browser_specific_settings.gecko.id in the built manifest and profilePath in the session contract."
         });
         url = `${base}${doc}`;
         extensionId = base.replace(/^.*:\/\//, "").replace(/\/$/, "");
     }
-    const raw = await navigateToUrl(projectPath, browser, url);
+    const raw = await navigateToUrl(projectPath, browser, url, void 0, {
+        reuse: "surface"
+    });
     try {
         const parsed = JSON.parse(raw);
         if (parsed?.ok) {
@@ -6509,7 +7449,7 @@ async function confirmSurfaceTarget(projectPath, browser, surface, raw) {
 }
 const open_schema = {
     name: "extension_open",
-    description: "Open an extension surface, or replay an event, in a running session. Pass surface:'popup', 'options' or 'sidebar' to open a UI surface, or 'newtab', 'history' or 'bookmarks' to open the matching chrome_url_overrides page in a tab (always a tab, resolved by the server, never sent to the engine). On Chromium, when Chrome refuses the sidebar for lack of a user gesture, the server opens the real panel through a synthetic click on the extension's own page and says so in warnings; if that fails too it renders the sidebar document as a tab. Pass surface:'action' to trigger the toolbar action, which opens its popup or replays chrome.action.onClicked when there is none. Pass surface:'command' with `name` to replay a chrome.commands.onCommand shortcut. Note that action and command replay invoke your listener without a user gesture, so the gesture-derived activeTab grant does not apply; the result reports gesture:false and warns when activeTab is declared. Start the session with allowControl:true (extension_dev).",
+    description: "Open an extension surface, or replay an event, in a running session. Pass surface:'popup', 'options' or 'sidebar' to open a UI surface, or 'newtab', 'history' or 'bookmarks' to open the matching chrome_url_overrides page in a tab (always a tab, resolved by the server, never sent to the engine). On Chromium, when Chrome refuses the sidebar for lack of a user gesture, the server opens the real panel through a synthetic click on the extension's own page and says so in warnings; if that fails too it renders the sidebar document as a tab. Pass surface:'devtools' to open the browser's DevTools on a tab (the one `url` matches, else the first web page) and show the extension's panel there, picked by `panel` title when there are several: Chromium only, over CDP Target.openDevTools, headed or headless; the result names the panel document's url, which extension_eval reads with context 'page' and that url (the panel is no tab, so the tab-based readers do not reach it). Pass surface:'action' to trigger the toolbar action, which opens its popup or replays chrome.action.onClicked when there is none. Pass surface:'command' with `name` to replay a chrome.commands.onCommand shortcut. Note that action and command replay invoke your listener without a user gesture, so the gesture-derived activeTab grant does not apply; the result reports gesture:false and warns when activeTab is declared. Start the session with allowControl:true (extension_dev).",
     inputSchema: {
         type: "object",
         properties: {
@@ -6520,6 +7460,7 @@ const open_schema = {
                     "popup",
                     "options",
                     "sidebar",
+                    "devtools",
                     "newtab",
                     "history",
                     "bookmarks",
@@ -6532,9 +7473,26 @@ const open_schema = {
                 type: "string",
                 description: "For surface 'command': the chrome.commands name to trigger."
             },
+            panel: {
+                type: "string",
+                description: "For surface 'devtools': the title the extension gave chrome.devtools.panels.create, when it registers more than one panel. Omitted, the extension's first panel is shown."
+            },
+            waitMs: {
+                type: "number",
+                description: "For surface 'devtools': how long to wait for the panel to register after DevTools opens (default 15000, up to 120000). Extensions that create their panel on a page event need longer, or `reload`."
+            },
+            reload: {
+                type: "boolean",
+                default: false,
+                description: "For surface 'devtools': reload the inspected tab once DevTools is open, for extensions that create their panel only when the page reports to them on a load that starts with DevTools open (Preact Devtools). Discards the page state under test."
+            },
             url: {
                 type: "string",
-                description: "Navigate a real tab here instead of opening a surface (Firefox needs allowEval: true). Use for content-script test pages, or a surface as a page: chrome-extension://<id>/popup.html."
+                description: "Navigate a real tab here instead of opening a surface, in a NEW tab unless `tab` names one (a blank or new-tab page is reused). An absolute url opens as given; a path with no scheme, such as pages/options.html, is resolved against the extension's own origin. Use for content-script test pages, or a surface as a page."
+            },
+            tab: {
+                type: "number",
+                description: "With `url`: navigate this chrome.tabs id in place instead of opening a new tab (rides the engine's navigate verb, so the session needs allowControl: true). Without it an existing page is never taken over."
             },
             asTab: {
                 type: "boolean",
@@ -6554,9 +7512,51 @@ function sessionIsHeadless() {
     return /(^|\s|=)-{1,2}headless\b/i.test(process.env.EXTENSION_BROWSER_FLAGS ?? "");
 }
 const HEADED_RELAUNCH = "start a headed session: extension_dev with replace: true, and in the environment set EXTENSION_HEADLESS=0 AND clear EXTENSION_BROWSER_FLAGS (it may carry --headless=new, which keeps the window hidden even with EXTENSION_HEADLESS=0)";
+async function resolveExtensionDocumentUrl(projectPath, browser, relative) {
+    const doc = relative.replace(/^\.?\//, "");
+    if (isChromiumFamily(browser)) {
+        const extensionId = await resolveExtensionId(projectPath, browser);
+        if (extensionId) return `chrome-extension://${extensionId}/${doc}`;
+        return {
+            refusal: envelope_envelope({
+                ok: false,
+                command: open_schema.name,
+                status: "no-extension-id",
+                error: {
+                    code: "E_NO_EXTENSION_ID",
+                    name: "NoExtensionId",
+                    message: `"${relative}" has no scheme, so it was read as a document inside the extension, but the extension id could not be resolved from the live session's CDP targets.`
+                },
+                hint: `Confirm the session is ready (extension_wait), or pass the full chrome-extension://<id>/${doc} url. ${CDP_PORT_MISSING_HINT}`
+            })
+        };
+    }
+    const base = await resolveBridgeBaseUrl(projectPath, browser);
+    if (base) return `${base}${doc}`;
+    return {
+        refusal: envelope_envelope({
+            ok: false,
+            command: open_schema.name,
+            status: "no-extension-id",
+            error: {
+                code: "E_NO_EXTENSION_ID",
+                name: "NoExtensionId",
+                message: `"${relative}" has no scheme, so it was read as a document inside the extension, but the extension's moz-extension:// base could not be resolved from the live session.`
+            },
+            hint: `Pass the full moz-extension://<uuid>/${doc} url (extension_list_extensions reports the uuid), or start the session with allowEval: true so the base can be read from the background.`
+        })
+    };
+}
 async function open_handler(args) {
     const { browser } = resolveSessionBrowser(args.projectPath, args.browser);
-    if (args.url) return navigateToUrl(args.projectPath, browser, args.url, args.timeout);
+    if ("devtools" === args.surface) return openDevToolsSurface(args, browser);
+    if (args.url) {
+        const absolute = /^[a-z][a-z0-9+.-]*:/i.test(args.url) ? args.url : await resolveExtensionDocumentUrl(args.projectPath, browser, args.url);
+        if ("string" != typeof absolute) return absolute.refusal;
+        return navigateToUrl(args.projectPath, browser, absolute, args.timeout, {
+            tab: args.tab
+        });
+    }
     const AS_TAB_SURFACES = [
         "popup",
         "options",
@@ -6580,65 +7580,240 @@ async function open_handler(args) {
         if (declared && args.name && !declared.includes(args.name)) return envelope_envelope({
             ok: false,
             command: open_schema.name,
-            status: "unknown-command",
+            status: "unknown-command",
+            error: {
+                code: "E_UNKNOWN_COMMAND",
+                name: "UnknownCommand",
+                message: `"${args.name}" is not declared in the manifest's \`commands\`, so triggering it can only ever be a no-op.`
+            },
+            value: {
+                declaredCommands: declared
+            },
+            hint: declared.length ? `Declared commands are: ${declared.join(", ")}. Check for a typo, or add "${args.name}" to the manifest.` : "This manifest declares no commands at all. Add a `commands` block, rebuild, then retry."
+        });
+    }
+    if ("popup" === args.surface) {
+        const declared = declaredSurfaces(args.projectPath, browser);
+        if (declared && !declared.includes("popup")) return missingSurfaceError(args.projectPath, browser, "popup", "so there is no popup to open");
+    }
+    if ([
+        "popup",
+        "options",
+        "sidebar"
+    ].includes(args.surface) && !sessionIsHeadless() && await browserRunsHeadless(args.projectPath, browser)) {
+        const asTab = await openSurfaceAsTab(args.projectPath, browser, args.surface);
+        try {
+            const parsedTab = JSON.parse(asTab);
+            if (parsedTab?.ok) {
+                addWarning(parsedTab, `The dev browser reports itself headless, and a headless browser closes a popup window before the next call and never shows an options or sidebar window, so the ${args.surface} was rendered as a tab instead (the same document and APIs). For the real window, ${HEADED_RELAUNCH}.`);
+                return actFrameJson(parsedTab);
+            }
+        } catch  {}
+    }
+    const cli = [
+        "open",
+        args.surface,
+        args.projectPath
+    ];
+    if ("command" === args.surface && args.name) cli.push("--name", args.name);
+    cli.push("--browser", browser);
+    if (null != args.timeout) cli.push("--timeout", String(args.timeout));
+    const raw = await runActVerb(cli, args.projectPath, args.timeout, open_schema.name);
+    const refusal = readWindowRefusal(raw, args.surface, browser);
+    if (refusal) {
+        if ("sidebar" === args.surface && isChromiumFamily(browser) && "gesture" === refusal.kind && !sessionIsHeadless() && !await browserRunsHeadless(args.projectPath, browser)) return openSidebarThroughGesture(args.projectPath, browser, refusal.frame);
+        if ("sidebar" === args.surface && isGeckoFamily(browser)) return openGeckoSidebar(args.projectPath, browser, refusal.frame, args.timeout);
+        const fallback = await openSurfaceAsTab(args.projectPath, browser, args.surface);
+        const parsedFallback = tryParseEnvelope(fallback);
+        if (parsedFallback?.ok) {
+            addWarning(parsedFallback, windowRefusalWarning(refusal, args.surface, browser));
+            return actFrameJson(parsedFallback);
+        }
+        addWarning(refusal.frame, `The browser refused the ${args.surface} window and the tab route failed too: ${String(parsedFallback?.error?.message ?? "no answer")}${"string" == typeof parsedFallback?.hint ? ` ${parsedFallback.hint}` : ""}`);
+        if (!refusal.frame.hint) refusal.frame.hint = "gesture" === refusal.kind ? "This surface can only open from a real user gesture, which automation cannot produce. Retry with asTab: true to render the surface document in a tab instead." : `The dev browser has no window for this surface. Retry with asTab: true to render the surface document in a tab, or for the real window, ${HEADED_RELAUNCH}.`;
+        return actFrameJson(refusal.frame);
+    }
+    if (!AS_TAB_SURFACES.includes(args.surface)) return raw;
+    const confirmed = await confirmSurfaceTarget(args.projectPath, browser, args.surface, raw);
+    const parsedConfirmed = tryParseEnvelope(confirmed);
+    if (parsedConfirmed?.status !== "surface-did-not-open") return confirmed;
+    const fallback = await openSurfaceAsTab(args.projectPath, browser, args.surface);
+    const parsedFallback = tryParseEnvelope(fallback);
+    if (parsedFallback?.ok) {
+        addWarning(parsedFallback, `The engine reported the ${args.surface} as opened, but no document for it appeared within 3s (a headless browser never shows an options or popup window), so the ${args.surface} document was rendered in a tab instead (the same document and APIs). For the real window, ${HEADED_RELAUNCH}.`);
+        patchValue(parsedFallback, {
+            engineResult: parsedConfirmed.value?.engineResult ?? null
+        });
+        return actFrameJson(parsedFallback);
+    }
+    return confirmed;
+}
+function tryParseEnvelope(raw) {
+    try {
+        return JSON.parse(raw);
+    } catch  {
+        return null;
+    }
+}
+function readWindowRefusal(raw, surface, browser) {
+    if (![
+        "popup",
+        "action",
+        "sidebar",
+        "options"
+    ].includes(surface)) return null;
+    const gesture = readGestureRefusal(raw);
+    if (gesture) return {
+        kind: "gesture",
+        frame: gesture
+    };
+    const parsed = tryParseEnvelope(raw);
+    if (!parsed || false !== parsed.ok) return null;
+    const code = "string" == typeof parsed.error?.code ? parsed.error.code : "";
+    const message = String(parsed.error?.message ?? "");
+    if ("E_TARGET_NOT_FOUND" === code || /active browser window|no active|headless/i.test(message)) return {
+        kind: "no-window",
+        frame: parsed
+    };
+    if (isGeckoFamily(browser) && "options" !== surface) {
+        const unsupported = readUnsupportedRefusal(raw);
+        if (unsupported || /popup is disabled|not implemented/i.test(message)) return {
+            kind: "unsupported",
+            frame: parsed
+        };
+    }
+    return null;
+}
+function windowRefusalWarning(refusal, surface, browser) {
+    const noun = "sidebar" === surface ? "sidebar" : "options" === surface ? "options page" : "popup";
+    const said = String(refusal.frame.error?.message ?? "").replace(/\s+/g, " ").trim();
+    if (isGeckoFamily(browser)) return "gesture" === refusal.kind ? `${browser} opens the ${noun} only from its toolbar; the engine refused with Chromium's gesture wording because it counts every non-Firefox name as Chromium (extension.js ledger 642). The ${noun} document was rendered in a tab instead: the same document and APIs, without the toolbar anchoring.` : `${browser} cannot open the ${noun} programmatically (${said}), so the ${noun} document was rendered in a tab instead: the same document and APIs, without the toolbar anchoring.`;
+    return "gesture" === refusal.kind ? `Chromium opens the ${noun} only from a real user gesture, which automation cannot produce, so the ${noun} document was rendered in a tab instead (the same document and APIs). For the real window, ${HEADED_RELAUNCH} and click the toolbar icon.` : `The dev browser has no window to show the ${noun} in (${said}); a headless browser never shows one, so the ${noun} document was rendered in a tab instead (the same document and APIs). For the real window, ${HEADED_RELAUNCH}.`;
+}
+const DEVTOOLS_PANEL_BUDGET_MS = 15000;
+const DEVTOOLS_PANEL_BUDGET_MAX_MS = 120000;
+async function openDevToolsSurface(args, browser) {
+    if (!isChromiumFamily(browser)) return envelope_envelope({
+        ok: false,
+        command: open_schema.name,
+        status: "unsupported",
+        error: {
+            code: "E_UNSUPPORTED_BROWSER",
+            name: "NoDevToolsAutomation",
+            message: `${browser} exposes no protocol command that opens its developer tools or an extension panel, so this server cannot open the devtools surface there; Target.openDevTools is Chromium's.`
+        },
+        hint: WEBKIT_FAMILY.has(browser) ? "Open the Web Inspector by hand in the headed Safari window and switch to the panel; extension_logs shows what the devtools page writes." : "Open the developer tools by hand in the headed Firefox window (F12) and switch to the panel, or run the same project on chrome to drive the panel from here; extension_logs (context: ['devtools']) shows what the devtools page writes either way."
+    });
+    const doc = surfaceDocument(args.projectPath, browser, "devtools");
+    if (!doc) return missingSurfaceError(args.projectPath, browser, "devtools", "so there is no DevTools page to register a panel");
+    const resolved = await resolveCdpPort(args.projectPath, browser);
+    if (!resolved) return envelope_envelope({
+        ok: false,
+        command: open_schema.name,
+        status: "no-session",
+        error: {
+            code: "E_NO_SESSION",
+            name: "NoSession",
+            message: `No active dev session / CDP port for ${browser}. Start extension_dev and extension_wait for ready. ${CDP_PORT_MISSING_HINT}`
+        }
+    });
+    const extensionId = await resolveExtensionId(args.projectPath, browser);
+    if (!extensionId) return envelope_envelope({
+        ok: false,
+        command: open_schema.name,
+        status: "no-extension-id",
+        error: {
+            code: "E_NO_EXTENSION_ID",
+            name: "NoExtensionId",
+            message: "Could not resolve the extension id from the live session's CDP targets."
+        },
+        hint: `Confirm the session is ready (extension_wait). ${CDP_PORT_MISSING_HINT}`
+    });
+    const pages = await listPageTargets(resolved.port).catch(()=>[]);
+    const candidates = args.url ? matchTargetsByUrl(pages, args.url) : pages.filter((t)=>/^https?:/i.test(t.url) || !t.url.startsWith("chrome-extension://") && !t.url.startsWith("chrome://") && "about:blank" !== t.url);
+    const inspected = candidates[0] ?? (args.url ? void 0 : pages[0]);
+    if (!inspected) return envelope_envelope({
+        ok: false,
+        command: open_schema.name,
+        status: "no-target",
+        error: {
+            code: "E_NO_TARGET",
+            name: "NoTarget",
+            message: args.url ? `No open tab matches ${args.url}, so there is nothing to open DevTools on.` : "No open tab to inspect: the session has no page target."
+        },
+        hint: "Open the page first with extension_open (url: the address), then open the devtools surface with the same url. extension_dom_snapshot with listTargets: true lists what is open."
+    });
+    const devtoolsPageUrl = `chrome-extension://${extensionId}/${doc}`;
+    const budgetMs = "number" == typeof args.waitMs && args.waitMs > 0 ? Math.min(args.waitMs, DEVTOOLS_PANEL_BUDGET_MAX_MS) : "number" == typeof args.timeout && args.timeout > 0 ? Math.min(args.timeout, DEVTOOLS_PANEL_BUDGET_MS) : DEVTOOLS_PANEL_BUDGET_MS;
+    const outcome = await openDevToolsPanel(resolved.port, {
+        inspectedTargetId: inspected.targetId,
+        extensionId,
+        devtoolsPageUrl,
+        panelTitle: args.panel,
+        budgetMs,
+        reloadInspected: true === args.reload
+    });
+    if (!outcome.opened) {
+        if ("open" === outcome.stage || "frontend" === outcome.stage) return envelope_envelope({
+            ok: false,
+            command: open_schema.name,
+            status: "cdp-failed",
+            error: {
+                code: "E_CDP",
+                name: "CdpError",
+                message: `Target.openDevTools on ${inspected.url} did not open a DevTools frontend: ${outcome.reason}.`
+            },
+            hint: "This browser build's protocol lacks or refused Target.openDevTools (Chrome 151 and Edge 154 honor it, headed or headless). Open DevTools by hand in a headed session, or run the project on a current Chrome; extension_logs (context: ['devtools']) reads the devtools page either way."
+        });
+        const registered = (outcome.panels ?? []).filter((id)=>id.startsWith(`chrome-extension://${extensionId}`));
+        return envelope_envelope({
+            ok: false,
+            command: open_schema.name,
+            status: "surface-did-not-open",
             error: {
-                code: "E_UNKNOWN_COMMAND",
-                name: "UnknownCommand",
-                message: `"${args.name}" is not declared in the manifest's \`commands\`, so triggering it can only ever be a no-op.`
+                code: "E_SURFACE_DID_NOT_OPEN",
+                name: "PanelDidNotRegister",
+                message: "panel" === outcome.stage ? `DevTools opened on ${inspected.url} and ${doc} loaded in it, but ${outcome.reason}.${registered.length ? ` Panels this extension did register: ${registered.map((id)=>id.slice(`chrome-extension://${extensionId}`.length)).join(", ")}.` : ""}` : `DevTools opened on ${inspected.url} and the panel registered, but ${outcome.reason}.`
             },
             value: {
-                declaredCommands: declared
+                inspected: {
+                    targetId: inspected.targetId,
+                    url: inspected.url
+                },
+                devtoolsTargetId: outcome.devtoolsTargetId ?? null,
+                panels: outcome.panels ?? []
             },
-            hint: declared.length ? `Declared commands are: ${declared.join(", ")}. Check for a typo, or add "${args.name}" to the manifest.` : "This manifest declares no commands at all. Add a `commands` block, rebuild, then retry."
+            hint: args.panel && registered.length ? `No panel is titled "${args.panel}"; pass one of the registered titles as \`panel\`, or omit it for the first.` : `The devtools page registers panels with chrome.devtools.panels.create; extension_logs (context: ['devtools']) shows what ${doc} wrote or threw. An extension that creates its panel only when the page reports to it (Preact Devtools does, through its content script) needs the page loaded with DevTools already open: retry with reload: true, and waitMs for a longer wait. DevTools stays open on the tab.`
         });
     }
-    if ("popup" === args.surface) {
-        const declared = declaredSurfaces(args.projectPath, browser);
-        if (declared && !declared.includes("popup")) return missingSurfaceError(args.projectPath, browser, "popup", "so there is no popup to open");
-    }
-    const cli = [
-        "open",
-        args.surface,
-        args.projectPath
-    ];
-    if ("command" === args.surface && args.name) cli.push("--name", args.name);
-    cli.push("--browser", browser);
-    if (null != args.timeout) cli.push("--timeout", String(args.timeout));
-    const raw = await runActVerb(cli, args.projectPath, args.timeout, open_schema.name);
-    const headless = sessionIsHeadless();
-    if (headless && [
-        "popup",
-        "action",
-        "sidebar"
-    ].includes(args.surface)) try {
-        const parsed = JSON.parse(raw);
-        const msg = String(parsed?.error?.message ?? "");
-        const code = "string" == typeof parsed?.error?.code ? parsed.error.code : "";
-        const refusedWindow = "E_TARGET_NOT_FOUND" === code || /active browser window|no active|headless|user gesture/i.test(msg);
-        if (parsed?.ok === false && refusedWindow) {
-            if (AS_TAB_SURFACES.includes(args.surface)) {
-                const fallback = await openSurfaceAsTab(args.projectPath, browser, args.surface);
-                try {
-                    const parsedFallback = JSON.parse(fallback);
-                    if (parsedFallback?.ok) {
-                        addWarning(parsedFallback, `The dev browser is headless, and a real popup/sidebar window can only open in a headed session, so the surface was rendered as a tab instead. For the real window, ${HEADED_RELAUNCH}, then open the surface again without asTab.`);
-                        return actFrameJson(parsedFallback);
-                    }
-                } catch  {}
-            }
-            if (!parsed.hint) parsed.hint = /user gesture/i.test(msg) ? "This surface can only open from a real user gesture, which headless automation cannot produce. Retry with asTab: true to render the surface document in a tab instead." : `The dev browser is running headless, and a popup/sidebar window needs a headed session. Retry with asTab: true to render the surface document in a tab, or for the real window, ${HEADED_RELAUNCH}.`;
-            return actFrameJson(parsed);
-        }
-    } catch  {}
-    if (!headless && "sidebar" === args.surface && isChromiumFamily(browser)) {
-        const refusal = readGestureRefusal(raw);
-        if (refusal) return openSidebarThroughGesture(args.projectPath, browser, refusal);
-    }
-    if ("sidebar" === args.surface && isGeckoFamily(browser)) {
-        const refusal = readUnsupportedRefusal(raw);
-        if (refusal) return openGeckoSidebar(args.projectPath, browser, refusal, args.timeout);
-    }
-    return AS_TAB_SURFACES.includes(args.surface) ? confirmSurfaceTarget(args.projectPath, browser, args.surface, raw) : raw;
+    const panelUrl = outcome.panelTarget?.url ?? null;
+    return envelope_envelope({
+        ok: true,
+        command: open_schema.name,
+        status: "opened",
+        value: {
+            surface: "devtools",
+            inspected: {
+                targetId: inspected.targetId,
+                url: inspected.url,
+                title: inspected.title
+            },
+            devtoolsTargetId: outcome.devtoolsTargetId,
+            panel: {
+                title: outcome.panelTitle,
+                id: outcome.panelId,
+                targetId: outcome.panelTarget?.targetId ?? null,
+                url: panelUrl
+            },
+            panels: outcome.panels,
+            devtoolsPage: devtoolsPageUrl,
+            reloadedInspected: true === args.reload
+        },
+        warnings: outcome.panelTarget ? [] : [
+            "The panel is shown but its document target had not appeared within 3s; call extension_open surface: \"devtools\" again once it loads to get its url."
+        ],
+        hint: panelUrl ? `DevTools is open on ${inspected.url} with the "${outcome.panelTitle}" panel shown. Read the panel with extension_eval context: "page", url: "${panelUrl}" (over CDP, with chrome.devtools available); context: "devtools" reads the devtools page itself (${doc}), the hidden document that registered the panel. The panel is an iframe inside DevTools, not a tab, so extension_dom_snapshot and extension_inspect do not reach it.` : `DevTools is open on ${inspected.url} with the "${outcome.panelTitle}" panel shown. context: "devtools" on extension_eval reads the devtools page itself (${doc}).`
+    });
 }
 const E_USER_GESTURE_REQUIRED = "E_USER_GESTURE_REQUIRED";
 function readGestureRefusal(raw) {
@@ -6759,7 +7934,14 @@ async function openSidebarThroughGesture(projectPath, browser, refusal) {
     refusal.hint = `Chrome opens the side panel only from a user gesture, which the engine's open verb cannot carry, and the server's synthetic click did not open it either (${reason}). ` + (doc && extensionId ? `To read the panel page anyway, call extension_open with url: "chrome-extension://${extensionId}/${doc}" and then extension_dom_snapshot context: 'sidebar' on it. ` : "To read the panel page anyway, open its document by url with extension_open and read it with extension_dom_snapshot context: 'sidebar'. ") + "Opening the real panel needs a toolbar click from a person in the dev browser.";
     return actFrameJson(refusal);
 }
-function resolveToken() {
+function resolveToken(options = {}) {
+    const project = String(options.project ?? "").trim();
+    if (project) {
+        const creds = readValidCredentials(void 0, {
+            project
+        });
+        return creds?.token ? String(creds.token).trim() : "";
+    }
     const fromEnv = String(process.env.EXTENSION_DEV_TOKEN || "").trim();
     if (fromEnv) return fromEnv;
     const creds = readValidCredentials();
@@ -7524,11 +8706,16 @@ function previewOriginOf(previewUrl) {
         return null;
     }
 }
-async function buildShare(projectPath, distDir, manifest, browser, verifyInBrowserTerms) {
+async function buildShare(projectPath, distDir, manifest, browser, verifyInBrowserTerms, project) {
     const result = await uploadPreview({
         distDir,
         manifest,
-        browser
+        browser,
+        ...project ? {
+            token: resolveToken({
+                project
+            })
+        } : {}
     });
     if (!result.ok) {
         const isAuth = "PreviewAuthError" === result.error.name;
@@ -7637,6 +8824,7 @@ const preview_web_schema = {
         type: "object",
         properties: {
             projectPath: PROJECT_PATH,
+            project: PROJECT_TOKEN_INPUT,
             browser: {
                 type: "string",
                 enum: REAL_BROWSERS,
@@ -7804,7 +8992,7 @@ async function preview_web_handler(args) {
         if (true !== opened.ok) previewWarnings.push("Could not open the preview in a browser. This needs a live dev session (run extension_dev, then extension_wait for ready). The deepLink above still works if you open it yourself.");
     }
     if (args.share) {
-        const share = await buildShare(args.projectPath, distDir, manifest, browser, false !== args.probe);
+        const share = await buildShare(args.projectPath, distDir, manifest, browser, false !== args.probe, args.project);
         result.share = share;
         if (true === share.ok && false === share.browserLoadable) {
             const check = share.browserCheck;
@@ -8201,6 +9389,7 @@ const shares_schema = {
     inputSchema: {
         type: "object",
         properties: {
+            project: PROJECT_TOKEN_INPUT,
             action: {
                 type: "string",
                 enum: [
@@ -8334,6 +9523,11 @@ async function listShares(args) {
         } : {},
         ...args.api ? {
             api: args.api
+        } : {},
+        ...args.project ? {
+            token: resolveToken({
+                project: args.project
+            })
         } : {}
     });
     if (!listing.ok) {
@@ -8469,7 +9663,9 @@ async function revokeShare(args) {
             message: supplied ? `The reference is malformed and nothing was sent to the platform: no share id could be read out of ${JSON.stringify(supplied.length > 200 ? `${supplied.slice(0, 200)}...` : supplied)}. A share id is gen_ followed by exactly 64 lowercase hex characters (32 on shares minted before 2026-07-30), and a url revokes only when it contains one whole. Check the ref for a copy-paste cut, or run action:"list" and copy the exact artifactId.` : 'Nothing to revoke. Pass artifactId (a gen_... id) or url (the previewUrl, zipUrl, viewUrl, or revokeUrl of the share). Run action:"list" to see both.'
         }
     });
-    const token = resolveToken();
+    const token = resolveToken({
+        project: args.project
+    });
     if (token) {
         const gate = await evaluateApproval({
             command: "extension_shares",
@@ -8580,6 +9776,9 @@ async function shares_handler(args) {
         } : {},
         ...args.api ? {
             api: args.api
+        } : {},
+        ...args.project ? {
+            project: args.project
         } : {}
     });
     return listShares({
@@ -8594,6 +9793,9 @@ async function shares_handler(args) {
         } : {},
         ...args.api ? {
             api: args.api
+        } : {},
+        ...args.project ? {
+            project: args.project
         } : {}
     });
 }
@@ -8918,7 +10120,7 @@ function makeFilter(args) {
 }
 function readContractForDiagnosis(projectPath, browser) {
     try {
-        const raw = node_fs.readFileSync(bridge_readyContractPath(projectPath, browser), "utf8");
+        const raw = node_fs.readFileSync(session_paths_readyContractPath(projectPath, browser), "utf8");
         return JSON.parse(raw);
     } catch  {
         return null;
@@ -8927,13 +10129,13 @@ function readContractForDiagnosis(projectPath, browser) {
 function sightedContractBrowser(projectPath) {
     let dirs;
     try {
-        dirs = node_fs.readdirSync(sessionArtifactsRootDir(projectPath));
+        dirs = node_fs.readdirSync(session_paths_sessionArtifactsRootDir(projectPath));
     } catch  {
         return null;
     }
     let best = null;
     for (const dir of dirs)try {
-        const stat = node_fs.statSync(bridge_readyContractPath(projectPath, dir));
+        const stat = node_fs.statSync(session_paths_readyContractPath(projectPath, dir));
         if (!best || stat.mtimeMs > best.mtimeMs) best = {
             browser: dir,
             mtimeMs: stat.mtimeMs
@@ -9307,9 +10509,9 @@ function capRecent(events, limit) {
 function emptyReason(projectPath, browser) {
     let contract;
     try {
-        contract = JSON.parse(node_fs.readFileSync(bridge_readyContractPath(projectPath, browser), "utf8"));
+        contract = JSON.parse(node_fs.readFileSync(session_paths_readyContractPath(projectPath, browser), "utf8"));
     } catch  {
-        return `No ready.json for this project/browser: no dev session has produced a build here, so there is nothing to log. Start one with extension_dev. ${sessionPathHint(bridge_readyContractPath(projectPath, browser))}`;
+        return `No ready.json for this project/browser: no dev session has produced a build here, so there is nothing to log. Start one with extension_dev. ${sessionPathHint(session_paths_readyContractPath(projectPath, browser))}`;
     }
     if ("error" === contract.status) {
         const errs = contract.errors;
@@ -9352,7 +10554,7 @@ function summarize(events, source, browser, runId, limit, dropped, projectPath,
 function staleFileNote(projectPath, browser, eventsRunId) {
     let contract;
     try {
-        contract = JSON.parse(node_fs.readFileSync(bridge_readyContractPath(projectPath, browser), "utf8"));
+        contract = JSON.parse(node_fs.readFileSync(session_paths_readyContractPath(projectPath, browser), "utf8"));
     } catch  {
         return "These events survive from a previous session: no ready.json exists for this project/browser now, so nothing current is producing logs.";
     }
@@ -9370,7 +10572,7 @@ function staleFileNote(projectPath, browser, eventsRunId) {
 function readLogRunId(projectPath, browser) {
     let text;
     try {
-        text = node_fs.readFileSync(logsPath(projectPath, browser), "utf8");
+        text = node_fs.readFileSync(session_paths_logsPath(projectPath, browser), "utf8");
     } catch  {
         return "";
     }
@@ -9388,7 +10590,7 @@ function readLogRunId(projectPath, browser) {
     return runId;
 }
 async function readFromFile(args, browser, limit) {
-    const file = logsPath(args.projectPath, browser);
+    const file = session_paths_logsPath(args.projectPath, browser);
     if (!node_fs.existsSync(file)) return envelope_envelope({
         ok: false,
         command: TOOL,
@@ -9454,7 +10656,7 @@ function controlRefusal(closeCode, reason, url, sentVersion) {
     };
 }
 async function readFromStream(args, browser, limit) {
-    const ready = readReadyContract(args.projectPath, browser);
+    const ready = readReadyContract(engineProjectRoot(args.projectPath), browser);
     if (!ready) {
         const running = knownSessionBrowsers(args.projectPath).filter((b)=>b !== browser);
         const retarget = running.length ? `An active session exists for browser(s): ${running.join(", ")}, pass that as \`browser\`. Otherwise run` : "Run";
@@ -9575,13 +10777,13 @@ async function readFromStream(args, browser, limit) {
 async function logs_handler(args) {
     const { browser } = resolveSessionBrowser(args.projectPath, args.browser);
     const limit = args.limit && args.limit > 0 ? args.limit : DEFAULT_LIMIT;
-    if (WEBKIT_FAMILY.has(browser) && !node_fs.existsSync(logsPath(args.projectPath, browser))) return envelope_envelope({
+    if (WEBKIT_FAMILY.has(browser) && !node_fs.existsSync(session_paths_logsPath(args.projectPath, browser))) return envelope_envelope({
         ok: false,
         command: TOOL,
         status: "no-log-file",
         error: {
             code: "E_LOGS_MISSING",
-            message: `No logs found at ${logsPath(args.projectPath, browser)}, and ${browser} has no CDP or RDP to read instead.`
+            message: `No logs found at ${session_paths_logsPath(args.projectPath, browser)}, and ${browser} has no CDP or RDP to read instead.`
         },
         hint: "Safari logs arrive through the extension's bridge to the dev server, with background and content contexts, once the extension is enabled and a dev session from an Extension.js that streams Safari logs (4.1.28 or newer) is running. Start extension_dev --browser=safari, enable the extension in Safari > Settings > Extensions, then read again. The page a content script changes is also readable with extension_eval (context: 'page') or extension_assert content-script-injected."
     });
@@ -9856,7 +11058,7 @@ function truncate(value, max = 200) {
     }
     return text.length > max ? `${text.slice(0, max)}…` : text;
 }
-const WORKER_TARGET_TYPES = new Set([
+const assert_WORKER_TARGET_TYPES = new Set([
     "service_worker",
     "worker",
     "background_page",
@@ -9870,7 +11072,14 @@ async function assertBackgroundWorker(clause, stage) {
     if ("none" === background.kind) return failCheck(id, null, `${read.file} declares no background, so no worker can boot. Nothing about the session is implicated.`, {
         manifestFile: read.file
     });
-    if (!stage.chromium) return stage.notChromium(id, null, "On this browser family the MCP reads the debugger's root actor, which lists installed add-ons and no contexts. Read what the background itself wrote with extension_logs (context: ['background']); a line there is proof it ran.");
+    if (!stage.chromium) {
+        const listed = await listBridgeTabs(stage.projectPath, stage.browser, stage.timeout, "extension_assert");
+        if ("tabs" in listed) return passCheck(id, null, `The ${background.kind} answered a tabs query over the control channel; the bridge executor runs inside the background, so it has booted.`, {
+            backgroundKind: background.kind,
+            tabsSeen: listed.tabs.length
+        });
+        return inconclusiveCheck(id, null, `The control channel did not answer on ${stage.browser}, so the background could not be asked.`, "Start the session with allowControl: true (extension_dev) and extension_wait for ready, then assert again; extension_logs (context: ['background']) shows what the background wrote meanwhile.");
+    }
     const targets = await stage.targets();
     if (null === targets) return stage.noSession(id, null);
     const guest = await verifyGuestLoaded(stage.projectPath, stage.browser);
@@ -9878,7 +11087,7 @@ async function assertBackgroundWorker(clause, stage) {
     if (!guest.loaded) return failCheck(id, null, `The extension is not loaded in the running browser, so its ${background.kind} never started. ${guest.reason}`, {
         guestIds: guest.guestIds
     });
-    const workers = targets.filter((target)=>WORKER_TARGET_TYPES.has(target.type) && guest.guestIds.some((guestId)=>String(target.url ?? "").startsWith(`chrome-extension://${guestId}/`)));
+    const workers = targets.filter((target)=>assert_WORKER_TARGET_TYPES.has(target.type) && guest.guestIds.some((guestId)=>String(target.url ?? "").startsWith(`chrome-extension://${guestId}/`)));
     if (workers.length > 0) return passCheck(id, null, `The browser lists ${workers.length} live ${background.kind} target for this extension (${workers.map((worker)=>worker.url).join(", ")}).`, {
         targets: workers.map((worker)=>({
                 type: worker.type,
@@ -9915,7 +11124,47 @@ async function assertSurfaceRendered(clause, stage) {
     if (!document) return failCheck(id, subject, `This extension declares no ${clause.surface}: nothing sets ${SURFACE_MANIFEST_KEYS[clause.surface] ?? clause.surface} in its manifest, so there is no document to render. Surfaces it does declare: ${declared.length ? declared.join(", ") : "none"}.`, {
         declaredSurfaces: declared
     });
-    if (!stage.chromium) return stage.notChromium(id, subject, `Read the surface over the agent bridge instead: extension_dom_snapshot with context: '${clause.surface}' returns the rendered document on this browser family.`);
+    if (!stage.chromium) {
+        const raw = await runActVerb([
+            "inspect",
+            stage.projectPath,
+            "--context",
+            clause.surface,
+            "--include",
+            "summary",
+            "--browser",
+            stage.browser,
+            ...null != stage.timeout ? [
+                "--timeout",
+                String(stage.timeout)
+            ] : []
+        ], stage.projectPath, stage.timeout, "extension_assert");
+        let parsed = null;
+        try {
+            parsed = JSON.parse(raw);
+        } catch  {}
+        if (parsed?.ok === true) {
+            const summary = parsed.value?.summary ?? {};
+            const children = Number(summary.bodyChildCount ?? 0);
+            if (clause.selector) return inconclusiveCheck(id, subject, `The ${clause.surface} document is open (${parsed.value?.url ?? document}), but a selector cannot be probed through the surface relay on ${stage.browser}.`, `Read it with extension_inspect (url: the document's moz-extension:// address, probe: ['${clause.selector}']) or extension_eval context: '${clause.surface}'.`, {
+                url: parsed.value?.url,
+                summary
+            });
+            if (null != clause.minNodes && children < clause.minNodes) return failCheck(id, subject, `The ${clause.surface} document is open but its body has ${children} child element${1 === children ? "" : "s"}, fewer than the ${clause.minNodes} expected.`, {
+                url: parsed.value?.url,
+                summary
+            });
+            return passCheck(id, subject, `The ${clause.surface} document (${document}) is open and rendering: the surface relay answered with ${children} body child element${1 === children ? "" : "s"}.`, {
+                url: parsed.value?.url,
+                summary
+            });
+        }
+        const message = String(parsed?.error?.message ?? raw);
+        if (/not open|E_TARGET_NOT_FOUND|not found/i.test(message) || parsed?.error?.code === "E_TARGET_NOT_FOUND") return failCheck(id, subject, `The ${clause.surface} is declared (${document}) but nothing is rendering it: the surface relay has no open document to answer from. Open it with extension_open (surface: '${clause.surface}') before asserting.`, {
+            document
+        });
+        return inconclusiveCheck(id, subject, `The surface relay could not be asked on ${stage.browser}: ${message.slice(0, 200)}`, "Start the session with allowControl: true (extension_dev) and extension_wait for ready, then assert again.");
+    }
     const targets = await stage.targets();
     if (null === targets) return stage.noSession(id, subject);
     const extensionId = await stage.extensionId();
@@ -10124,7 +11373,7 @@ async function assertStorageKeyPresent(clause, stage) {
 function assertConsoleErrorsEmpty(clause, stage) {
     const id = CONSOLE;
     const subject = clause.subject;
-    const file = logsPath(stage.projectPath, stage.browser);
+    const file = session_paths_logsPath(stage.projectPath, stage.browser);
     const all = readLogEvents(stage.projectPath, stage.browser, {});
     if (0 === all.length) {
         const reason = emptyReason(stage.projectPath, stage.browser);
@@ -10224,6 +11473,17 @@ async function assert_handler(args) {
     });
 }
 const manifest_validate_COMMAND = "extension_manifest_validate";
+const CHROMIUM_ONLY_KEYS = [
+    "version_name",
+    "minimum_chrome_version",
+    "key",
+    "update_url",
+    "offline_enabled",
+    "side_panel",
+    "declarative_net_request",
+    "cross_origin_embedder_policy",
+    "cross_origin_opener_policy"
+];
 const CHROME_DESKTOP_ONLY_KEYS = [
     "file_browser_handlers",
     "file_system_provider_capabilities",
@@ -10396,6 +11656,19 @@ function collectPathRefs(m) {
     }
     return refs;
 }
+function collectWebAccessibleRefs(m) {
+    const refs = [];
+    const war = m.web_accessible_resources;
+    if (!Array.isArray(war)) return refs;
+    for (const entry of war)if ("string" == typeof entry) refs.push(entry);
+    else if (entry && "object" == typeof entry) {
+        const resources = entry.resources;
+        if (Array.isArray(resources)) {
+            for (const r of resources)if ("string" == typeof r) refs.push(r);
+        }
+    }
+    return refs;
+}
 function fileResolvesSomewhere(ref, roots) {
     if (!ref || ref.includes("*") || /^(https?:|data:)/i.test(ref)) return true;
     const clean = ref.replace(/^\.?\//, "");
@@ -10567,14 +11840,18 @@ async function manifest_validate_handler(args) {
     if (!manifest.name) result.errors.push("Missing required field: name");
     if (!manifest.version) result.warnings.push("Missing field: version (required for store submission)");
     const chromiumManifest = filterKeysForThisBrowser(manifest, "chrome");
+    const projectRoot = "src" === node_path.basename(manifestDir) ? node_path.dirname(manifestDir) : manifestDir;
     const roots = [
         manifestDir,
         node_path.join(manifestDir, "src"),
-        ..."src" === node_path.basename(manifestDir) ? [
-            node_path.dirname(manifestDir)
-        ] : []
+        ...projectRoot !== manifestDir ? [
+            projectRoot
+        ] : [],
+        node_path.join(manifestDir, "public"),
+        node_path.join(projectRoot, "public")
     ];
     for (const ref of new Set(collectPathRefs(chromiumManifest)))if (!fileResolvesSomewhere(ref, roots)) result.errors.push(`Referenced file "${ref}" was not found near the manifest. extension_build fails on this dangling reference.`);
+    for (const ref of new Set(collectWebAccessibleRefs(chromiumManifest)))if (!fileResolvesSomewhere(ref, roots)) result.warnings.push(`web_accessible_resources names "${ref}", which was not found near the manifest. The build ships without it and the browser answers 404 when the extension or a page asks for it.`);
     const defaultLocale = manifest.default_locale;
     if ("string" == typeof defaultLocale && defaultLocale) {
         const hasCatalog = roots.some((root)=>node_fs.existsSync(node_path.resolve(root, "_locales", defaultLocale, "messages.json")));
@@ -10615,6 +11892,17 @@ async function manifest_validate_handler(args) {
         const isFirefox = isGeckoFamily(browser);
         const effective = effectiveByBrowser.get(browser) ?? filterKeysForThisBrowser(manifest, browser);
         const issues = [];
+        if (isFirefox && 2 === effective.manifest_version) {
+            const porting = [];
+            const bg2 = effective.background;
+            if (bg2 && Array.isArray(bg2.scripts)) porting.push("background.scripts to a single chromium:service_worker");
+            if (effective.browser_action) porting.push("browser_action to chromium:action");
+            if (Array.isArray(effective.web_accessible_resources) && effective.web_accessible_resources.some((e)=>"string" == typeof e)) porting.push("web_accessible_resources strings to [{resources, matches}] objects");
+            const perms2 = effective.permissions ?? [];
+            if (perms2.some((p)=>"string" == typeof p && (p.includes("://") || "<all_urls>" === p))) porting.push("host patterns out of permissions into host_permissions");
+            if (perms2.includes("webRequestBlocking")) porting.push("webRequestBlocking to declarativeNetRequest rules");
+            if (porting.length) result.warnings.push(`${browser} stays on Manifest V2 here, and Firefox still runs it. To also target Chromium, which only loads MV3, the keys to port are: ${porting.join("; ")}. Keep both by prefixing the Chromium variants with chromium:.`);
+        }
         if (isChromium) {
             const mv = effective.manifest_version;
             if (mv && mv < 3) issues.push("Manifest V2 is deprecated on Chromium. Use chromium:manifest_version: 3.");
@@ -10633,7 +11921,15 @@ async function manifest_validate_handler(args) {
                 const note = 'content_scripts.world: "MAIN" needs Firefox 128 or later (earlier Firefox runs the script in the isolated world). If you depend on it, set browser_specific_settings.gecko.strict_min_version to "128.0".';
                 if (!result.warnings.includes(note)) result.warnings.push(note);
             }
-            if (chromiumManifest.side_panel && !effective.sidebar_action) issues.push("Chromium side_panel declared but no firefox:sidebar_action. Firefox uses sidebar_action for sidebars.");
+            if (chromiumManifest.side_panel && !effective.sidebar_action) result.warnings.push("Chromium side_panel declared but no firefox:sidebar_action: the Firefox build ships without a sidebar. If you want one there, Firefox uses sidebar_action.");
+            const bss = effective.browser_specific_settings;
+            const geckoId = bss?.gecko?.id;
+            if ("string" != typeof geckoId || !geckoId) result.warnings.push('Firefox: no browser_specific_settings.gecko.id. A temporary add-on without one gets a new internal id on every launch, so storage and the moz-extension:// origin do not survive a relaunch, and a store upload needs the id. Set firefox:browser_specific_settings.gecko.id (any "name@domain" string).');
+            const dataCollection = bss?.gecko?.data_collection_permissions;
+            if (!dataCollection || "object" != typeof dataCollection) result.warnings.push('Firefox: no browser_specific_settings.gecko.data_collection_permissions. AMO requires it for new add-ons and the Firefox build warns on every run; the minimal form is firefox:browser_specific_settings.gecko.data_collection_permissions: {"required": ["none"]}.');
+            for (const key of CHROMIUM_ONLY_KEYS)if (void 0 !== effective[key]) result.warnings.push(`Firefox: manifest key "${key}" is Chromium-only and is ignored or refused by Firefox. Move it under "chromium:${key}".`);
+            const warEntries = effective.web_accessible_resources;
+            if (Array.isArray(warEntries) && warEntries.some((entry)=>entry && "object" == typeof entry && void 0 !== entry.extension_ids)) result.warnings.push('Firefox: web_accessible_resources[].extension_ids is Chromium-only; Firefox accepts only "matches" there.');
             const bg = effective.background;
             if (bg) {
                 if (bg.service_worker && !bg.scripts) issues.push('Background service_worker declared but no firefox:scripts. Firefox uses "scripts" (array) instead of "service_worker".');
@@ -10648,7 +11944,7 @@ async function manifest_validate_handler(args) {
             if (effectivePerms.has(perm)) continue;
             if (!declaredPermSet.has(perm)) continue;
             const ns = isFirefox ? "browser" : "chrome";
-            issues.push(`Code calls ${ns}.${api} but the ${browser} build's permissions do not include "${perm}" (it is declared only under another target's prefixed key, e.g. chromium:permissions). This target crashes at runtime.`);
+            issues.push(`Code calls ${ns}.${api} but the ${browser} build's permissions do not include "${perm}" (it is declared only under another target's prefixed key, e.g. chromium:permissions). An unguarded call crashes this target at runtime. If every call sits behind a feature check (typeof ${ns}.${api} !== "undefined"), the build is sound: pass skipValidation: true to extension_build, or grant "${perm}" to this target too.`);
         }
         result.browserSupport[browser] = {
             supported: 0 === issues.length,
@@ -10658,19 +11954,28 @@ async function manifest_validate_handler(args) {
     }
     const surfaces = [];
     if (chromiumManifest.content_scripts) surfaces.push("content");
-    if (chromiumManifest.side_panel) surfaces.push("sidebar");
+    if (chromiumManifest.side_panel || manifest["firefox:sidebar_action"]) surfaces.push("sidebar");
     if (chromiumManifest.action || manifest["firefox:browser_action"]) surfaces.push("action");
     if (chromiumManifest.chrome_url_overrides?.newtab) surfaces.push("newtab");
+    if (chromiumManifest.devtools_page) surfaces.push("devtools");
+    if (chromiumManifest.options_ui || chromiumManifest.options_page) surfaces.push("options");
     if (chromiumManifest.background) surfaces.push("background");
     const distinctive = surfaces.filter((s)=>"background" !== s);
     const matchOn = distinctive.length ? distinctive : surfaces;
     if (matchOn.length) try {
         const templates = await listTemplates();
-        result.similarTemplates = templates.map((t)=>({
+        result.similarTemplates = templates.map((t)=>{
+            const shared = t.surfaces.filter((s)=>matchOn.includes(s)).length;
+            const union = new Set([
+                ...t.surfaces,
+                ...matchOn
+            ]).size;
+            return {
                 slug: t.slug,
                 surfaces: t.surfaces,
-                score: t.surfaces.filter((s)=>matchOn.includes(s)).length
-            })).filter((t)=>t.score > 0).sort((a, b)=>b.score - a.score).slice(0, 5).map((t)=>({
+                score: union ? shared / union : 0
+            };
+        }).filter((t)=>t.score > 0).sort((a, b)=>b.score - a.score).slice(0, 5).map((t)=>({
                 slug: t.slug,
                 surfaces: t.surfaces
             }));
@@ -12091,6 +13396,7 @@ const EXTENSION_PAGE_CONTEXTS = [
     "popup",
     "options",
     "sidebar",
+    "devtools",
     "newtab",
     "history",
     "bookmarks"
@@ -12138,14 +13444,7 @@ function buildBridgeInspectExpression(opts) {
       } catch (e) {}`);
     if (opts.domSnapshot) parts.push(`try { out.domSnapshot = ${domSnapshotScript(500)}; } catch (e) {}`);
     if (opts.extensionRoots) parts.push(`try { out.extensionRoots = ${EXTENSION_ROOT_META_SCRIPT}; } catch (e) {}`);
-    if (opts.probes.length) parts.push(`out.probes = {};
-      for (const sel of ${JSON.stringify(opts.probes)}) {
-        try {
-          const nodes = document.querySelectorAll(sel);
-          const first = nodes[0];
-          out.probes[sel] = { count: nodes.length, sample: first ? String(first.outerHTML || "").slice(0, 200) : null };
-        } catch (e) { out.probes[sel] = { error: String((e && e.message) || e) }; }
-      }`);
+    if (opts.probes.length) parts.push(`out.probes = ${probeSelectorsScript(opts.probes)};`);
     parts.push("return out;");
     return `(() => { ${parts.join("\n")} })()`;
 }
@@ -12573,7 +13872,7 @@ function list_extensions_unpackedExtensionId(distPath) {
 function readOwnIdentity(projectPath, browser) {
     let contract;
     try {
-        contract = JSON.parse(node_fs.readFileSync(bridge_readyContractPath(projectPath, browser), "utf8"));
+        contract = JSON.parse(node_fs.readFileSync(session_paths_readyContractPath(projectPath, browser), "utf8"));
     } catch  {
         return null;
     }
@@ -12928,28 +14227,96 @@ function chromiumManifestVersion(projectPath, browser) {
     }
     return null;
 }
+function geckoManifestVersion(projectPath, browser) {
+    for (const file of manifestCandidates(projectPath, browser)){
+        let manifest;
+        try {
+            manifest = JSON.parse(node_fs.readFileSync(file, "utf8"));
+        } catch  {
+            continue;
+        }
+        const version = manifest["firefox:manifest_version"] ?? manifest["gecko:manifest_version"] ?? manifest.manifest_version;
+        if (3 === version) return 3;
+        if (2 === version) return 2;
+    }
+    return null;
+}
 function resolveDefaultEvalContext(projectPath, browser) {
     if (!isChromiumFamily(browser)) return "background";
     return 3 === chromiumManifestVersion(projectPath, browser) ? "page" : "background";
 }
 function wantsExtensionPageOverCdp(projectPath, browser, context, url) {
     if (!isChromiumFamily(browser) || !context) return false;
-    if ("page" === context) return "string" == typeof url && /^chrome-extension:\/\//.test(url);
+    if ("background" === context) return true;
+    if ("page" === context) return "string" == typeof url && url.length > 0;
     return EXTENSION_PAGE_CONTEXTS.includes(context) && 3 === chromiumManifestVersion(projectPath, browser);
 }
-async function evaluateOnChromiumExtensionPage(args, browser, context) {
-    const resolved = await resolveCdpPort(args.projectPath, browser);
-    if (!resolved) return envelope_envelope({
-        ok: false,
-        command: eval_schema.name,
-        status: "no-session",
-        error: {
-            code: "E_NO_SESSION",
-            name: "NoSession",
-            message: `No active dev session / CDP port for ${browser}, and an extension page evaluates over CDP. Start extension_dev with allowEval: true and extension_wait for ready. ${CDP_PORT_MISSING_HINT}`
-        }
-    });
+async function evaluateOnChromiumExtensionPage(args, browser, context, resolved) {
     let wanted;
+    if ("background" === context) {
+        const extensionId = await resolveExtensionId(args.projectPath, browser);
+        if (!extensionId) return envelope_envelope({
+            ok: false,
+            command: eval_schema.name,
+            status: "no-extension-id",
+            error: {
+                code: "E_NO_EXTENSION_ID",
+                name: "NoExtensionId",
+                message: "Could not resolve the extension id from the live session's CDP targets."
+            },
+            hint: `Confirm the session is ready (extension_wait). ${CDP_PORT_MISSING_HINT}`
+        });
+        let workers = await findExtensionWorkerTargets(resolved.port, extensionId);
+        const wakeWarnings = [];
+        if (0 === workers.length) {
+            const wake = await wakeExtensionWorker(resolved.port, extensionId);
+            if (!wake.woken) return envelope_envelope({
+                ok: false,
+                command: eval_schema.name,
+                status: "no-target",
+                error: {
+                    code: "E_NO_TARGET",
+                    name: "NoTarget",
+                    message: `No running background for chrome-extension://${extensionId}/: Chrome stops an idle MV3 service worker and lists no target for it, and starting it through ServiceWorker.startWorker did not bring one back: ${wake.reason}.`
+                },
+                hint: "Check the extension declares a background (extension_manifest_validate), then wake it with an event it listens to (extension_reload, open a surface with extension_open, navigate a matching tab) and retry. extension_logs (context: ['background']) holds what it wrote before it idled."
+            });
+            workers = wake.targets;
+            wakeWarnings.push("The background worker was idle (Chrome stops an MV3 service worker after about 30 s without events) and was started through ServiceWorker.startWorker before evaluating; state it held before idling is gone unless it was persisted.");
+        }
+        const target = workers[0];
+        const outcome = await evaluateOnExtensionPage(resolved.port, target.targetId, args.expression);
+        if (!outcome.ok) return envelope_envelope({
+            ok: false,
+            command: eval_schema.name,
+            status: outcome.thrown ? "eval-failed" : "cdp-failed",
+            error: {
+                code: outcome.thrown ? "E_EVAL" : "E_CDP",
+                name: outcome.thrown ? "EvalError" : "CdpError",
+                message: outcome.message
+            },
+            hint: outcome.thrown ? `The expression threw inside the ${target.type} at ${target.url}; it ran over CDP with the extension APIs available and a returned promise awaited.` : "The session's debug port refused the call or the worker went away mid-call. extension_doctor names which."
+        });
+        return envelope_envelope({
+            ok: true,
+            command: eval_schema.name,
+            status: "evaluated",
+            value: outcome.value,
+            warnings: [
+                ...wakeWarnings,
+                ...workers.length > 1 ? [
+                    `${workers.length} background targets match the extension; evaluated in ${target.type} ${target.targetId}.`
+                ] : []
+            ],
+            hint: `Evaluated over CDP in the extension's ${target.type} (${target.url}), the inspector path the extension CSP does not govern; a returned promise is awaited.`
+        });
+    }
+    if ("page" === context && !isExtensionUrl(args.url)) {
+        const url = args.url;
+        const matches = matchTargetsByUrl(await listPageTargets(resolved.port), url);
+        if (0 === matches.length) return RELAY_INSTEAD;
+        return evaluateOnWebTarget(args, matches, url);
+    }
     if ("page" === context) wanted = args.url;
     else {
         const doc = surfaceDocument(args.projectPath, browser, context);
@@ -12981,7 +14348,7 @@ async function evaluateOnChromiumExtensionPage(args, browser, context) {
         });
         wanted = `chrome-extension://${extensionId}/${doc}`;
     }
-    const targets = await findExtensionPageTargets(resolved.port, wanted);
+    const targets = (await findExtensionPageTargets(resolved.port, wanted)).filter((t)=>!isBrowserErrorPage(t.url));
     if (0 === targets.length) return envelope_envelope({
         ok: false,
         command: eval_schema.name,
@@ -13054,6 +14421,50 @@ async function evaluateOnWebKitPage(args, browser, info) {
         });
     }
 }
+const RELAY_INSTEAD = "__relay_instead__";
+function isBrowserErrorPage(url) {
+    return /^(chrome|edge)-error:\/\//.test(url);
+}
+async function evaluateOnWebTarget(args, matches, url) {
+    const resolved = await resolveCdpPort(args.projectPath, args.browser ?? "chrome");
+    if (!resolved) return RELAY_INSTEAD;
+    const live = matches.filter((t)=>!isBrowserErrorPage(t.url));
+    if (0 === live.length) return envelope_envelope({
+        ok: false,
+        command: eval_schema.name,
+        status: "no-target",
+        error: {
+            code: "E_NO_TARGET",
+            name: "NoTarget",
+            message: `The tab matching ${url} shows the browser's own error page (${matches[0].title || matches[0].url}), so there is no document to evaluate in.`
+        },
+        hint: "The page was blocked or failed to load; open it again with extension_open and read the browser's reason in the tab title."
+    });
+    const target = live[0];
+    const outcome = await evaluateOnExtensionPage(resolved.port, target.targetId, args.expression);
+    if (!outcome.ok) return envelope_envelope({
+        ok: false,
+        command: eval_schema.name,
+        status: outcome.thrown ? "eval-failed" : "cdp-failed",
+        error: {
+            code: outcome.thrown ? "E_EVAL" : "E_CDP",
+            name: outcome.thrown ? "EvalError" : "CdpError",
+            message: outcome.message
+        },
+        hint: outcome.thrown ? `The expression threw inside ${target.url}; it ran over CDP in the page's main world.` : "The session's debug port refused the call or the tab went away. extension_doctor names which."
+    });
+    return envelope_envelope({
+        ok: true,
+        command: eval_schema.name,
+        status: "evaluated",
+        value: outcome.value,
+        warnings: live.length > 1 ? [
+            `${live.length} tabs match ${url}; evaluated in ${target.url} (target ${target.targetId}). Narrow the url to pick another.`
+        ] : [],
+        hint: `Evaluated over CDP in ${target.url} (target ${target.targetId}), the page's main world through the inspector, which the site's CSP and Trusted Types do not govern. Pass context: "content" for the extension's isolated world instead.`
+    });
+}
+const TRUSTED_TYPES_REFUSAL = /Trusted Type/i;
 const RELAY_POLL_MS = 300;
 const RELAY_DEFAULT_BUDGET_MS = 30000;
 function tryParseFrame(raw) {
@@ -13126,6 +14537,95 @@ async function evaluateThroughRelay(args, browser, context) {
     if (polls > 0) parsed.hint = `The expression returned a promise; the ${context} page settled it and this call polled ${polls} time${1 === polls ? "" : "s"} for the result. ` + ("string" == typeof parsed.hint ? parsed.hint : "");
     return actFrameJson(parsed);
 }
+const CSP_EVAL_REFUSAL = /blocked by CSP|call to eval|unsafe-eval|Content Security Policy/i;
+function explainCspRefusal(raw, context) {
+    const parsed = tryParseFrame(raw);
+    if (!parsed || false !== parsed.ok) return null;
+    const code = "string" == typeof parsed.error?.code ? parsed.error.code : "";
+    const message = String(parsed.error?.message ?? "");
+    if ("E_EVAL" !== code || !CSP_EVAL_REFUSAL.test(message)) return null;
+    parsed.error.name = "CspBlocksEval";
+    parsed.hint = `The extension's content_security_policy (or the MV3 default) forbids eval in its own ${context ?? "background"} context, so the in-page executor cannot run any expression there; this is the extension's policy, not a fault in the expression. Read the page instead with extension_dom_snapshot or extension_inspect, evaluate a web page with context: \"page\" and a url, or read the extension's console with extension_logs. On a Chromium MV3 session the extension's own pages evaluate over CDP, which the page policy does not govern.`;
+    if ("string" == typeof parsed.error.hint) delete parsed.error.hint;
+    return actFrameJson(parsed);
+}
+const NO_SCRIPTING_API = /scripting is not available/i;
+function pageEvalRefusedByCsp(parsed) {
+    const code = "string" == typeof parsed.error?.code ? parsed.error.code : "";
+    return "E_EVAL" === code && CSP_EVAL_REFUSAL.test(String(parsed.error?.message ?? ""));
+}
+function isSingleExpression(source) {
+    try {
+        new Function(`return (${source}\n)`);
+        return true;
+    } catch  {
+        return false;
+    }
+}
+async function evaluateThroughExecuteScript(args, browser, context, raw) {
+    if ("page" !== context && "content" !== context) return null;
+    if (isChromiumFamily(browser)) return null;
+    const parsed = tryParseFrame(raw);
+    if (!parsed || false !== parsed.ok) return null;
+    const noScriptingApi = NO_SCRIPTING_API.test(String(parsed.error?.message ?? ""));
+    const cspRefused = !noScriptingApi && pageEvalRefusedByCsp(parsed) && 2 === geckoManifestVersion(args.projectPath, browser);
+    if (!noScriptingApi && !cspRefused) return null;
+    const why = cspRefused ? "the page's content security policy refused the in-page eval" : `${browser} MV2 has no scripting API`;
+    const code = isSingleExpression(args.expression) ? `(function () { try { return { __extensionDevExec: 1, ok: true, value: (${args.expression}\n) }; } catch (e) { return { __extensionDevExec: 1, ok: false, name: (e && e.name) || "EvalError", message: (e && e.message) || String(e) }; } })()` : args.expression;
+    const wrapped = await runActVerb([
+        "eval",
+        ...commonFlags({
+            ...args,
+            context: "background",
+            url: void 0,
+            tab: void 0,
+            browser
+        }),
+        "--",
+        executeScriptExpression(args.url, code),
+        args.projectPath
+    ], args.projectPath, args.timeout, eval_schema.name);
+    const frame = tryParseFrame(wrapped);
+    if (!frame || true !== frame.ok) return wrapped ?? raw;
+    const value = frame.value;
+    if (value && "object" == typeof value && "string" == typeof value.error) return envelope_envelope({
+        ok: false,
+        command: eval_schema.name,
+        status: "eval-failed",
+        error: {
+            code: "E_EVAL",
+            name: "EvalError",
+            message: value.error
+        },
+        hint: `Because ${why}, the expression went through tabs.executeScript from the background and that call failed. The tab must be a web page the extension holds host permissions for; extension pages cannot be injected into.`
+    });
+    const first = Array.isArray(value?.frames) ? value.frames[0] : void 0;
+    const result = first && "object" == typeof first && 1 === first.__extensionDevExec ? first : {
+        ok: true,
+        value: void 0 === first ? null : first
+    };
+    if (false === result.ok) return envelope_envelope({
+        ok: false,
+        command: eval_schema.name,
+        status: "eval-failed",
+        error: {
+            code: "E_EVAL",
+            name: result.name || "EvalError",
+            message: result.message || "the expression threw"
+        },
+        hint: "The expression threw inside the tab (run through tabs.executeScript in the content world)."
+    });
+    return envelope_envelope({
+        ok: true,
+        command: eval_schema.name,
+        status: "evaluated",
+        value: void 0 === result.value ? null : result.value,
+        warnings: [
+            `Because ${why}, this ran through tabs.executeScript from the background: the content script world of the tab, not the page's MAIN world, so globals the page defines are not visible${"page" === context ? ' even though context: "page" was asked' : ""}. An empty string or null here is the content world's reading at call time; if the element renders late, wait and retry.`
+        ],
+        hint: "Pass url to pick the tab; the extension needs host permissions for it."
+    });
+}
 async function eval_handler(args) {
     const { browser } = resolveSessionBrowser(args.projectPath, args.browser);
     if (WEBKIT_FAMILY.has(browser) && "page" === args.context) {
@@ -13134,7 +14634,13 @@ async function eval_handler(args) {
     }
     const defaulted = !args.context && "page" === resolveDefaultEvalContext(args.projectPath, browser);
     const context = defaulted ? "page" : args.context;
-    if (wantsExtensionPageOverCdp(args.projectPath, browser, context, args.url)) return evaluateOnChromiumExtensionPage(args, browser, context);
+    if (wantsExtensionPageOverCdp(args.projectPath, browser, context, args.url)) {
+        const resolved = await resolveCdpPort(args.projectPath, browser);
+        if (resolved) {
+            const overCdp = await evaluateOnChromiumExtensionPage(args, browser, context, resolved);
+            if (overCdp !== RELAY_INSTEAD) return overCdp;
+        }
+    }
     if ("page" === context && isExtensionUrl(args.url)) {
         const surface = surfaceForExtensionUrl(args.projectPath, browser, args.url);
         if (surface) {
@@ -13175,6 +14681,15 @@ async function eval_handler(args) {
         args.expression,
         args.projectPath
     ], args.projectPath, args.timeout, eval_schema.name);
+    const mv2Fallback = await evaluateThroughExecuteScript(args, browser, context, raw);
+    if (null !== mv2Fallback) return mv2Fallback;
+    const cspRefusal = explainCspRefusal(raw, context);
+    if (null !== cspRefusal) return cspRefusal;
+    const trustedTypes = tryParseFrame(raw);
+    if (trustedTypes?.ok === false && TRUSTED_TYPES_REFUSAL.test(String(trustedTypes.error?.message ?? ""))) {
+        trustedTypes.hint = "This site enforces Trusted Types, which refuse a string evaluated inside the page. Pass url so the tab is evaluated over CDP (the inspector path the policy does not govern), or use context: \"content\" for a DOM read from the extension's isolated world.";
+        return actFrameJson(trustedTypes);
+    }
     if ("content" === args.context) try {
         const parsed = JSON.parse(raw);
         if (parsed?.ok === true && (null === parsed.value || void 0 === parsed.value)) {
@@ -13663,10 +15178,11 @@ async function dom_snapshot_handler(args) {
 }
 const publish_schema = {
     name: "extension_publish",
-    description: "Publish the project your stored token is scoped to (extension_auth, or EXTENSION_DEV_TOKEN) to extension.dev, and return its shareable URL. This is what \"deploy\" or \"ship\" an extension usually means; extension_submit is the separate store-review path. The target is the token's project: there is no projectPath, and no local file is uploaded. For a public project the URL is the canonical public page and ttlHours does not apply. For a private one it is a fresh time-limited share link (?share=) whose lifetime is ttlHours.",
+    description: "Publish the project your stored token is scoped to (extension_auth, or EXTENSION_DEV_TOKEN) to extension.dev, and return its shareable URL. This is what \"deploy\" or \"ship\" an extension usually means; extension_submit is the separate store-review path. The target is the token's project: there is no projectPath, and no local file is uploaded. With several logins stored, pass `project` ('<workspace>/<project>') to pick which one; it outranks EXTENSION_DEV_TOKEN. For a public project the URL is the canonical public page and ttlHours does not apply. For a private one it is a fresh time-limited share link (?share=) whose lifetime is ttlHours.",
     inputSchema: {
         type: "object",
         properties: {
+            project: PROJECT_TOKEN_INPUT,
             ttlHours: {
                 type: "number",
                 description: "Private-project share-link lifetime in hours, 1-168 (default 24). Ignored for public projects."
@@ -13680,6 +15196,13 @@ const publish_schema = {
         required: []
     }
 };
+function previewCommandsOf(value) {
+    if (!value || "object" != typeof value) return [];
+    return Object.entries(value).filter(([browser, command])=>"string" == typeof browser && "" !== browser.trim() && "string" == typeof command && command.startsWith("npx -y extension@latest preview ")).map(([browser, command])=>[
+            browser,
+            command
+        ]);
+}
 function publish_fail(name, message, status, code) {
     return envelope_envelope({
         ok: false,
@@ -13693,7 +15216,10 @@ function publish_fail(name, message, status, code) {
     });
 }
 async function publish_handler(args) {
-    const token = resolveToken();
+    const token = resolveToken({
+        project: args.project
+    });
+    if (!token && args.project) return publish_fail("PublishAuthError", noStoredLoginHint(args.project), "auth-required", "E_AUTH_REQUIRED");
     if (!token) return publish_fail("PublishAuthError", "No token. Run extension_auth (action: login), or set EXTENSION_DEV_TOKEN (create one in the extension.dev dashboard).", "auth-required", "E_AUTH_REQUIRED");
     if (null != args.ttlHours) {
         const t = Number(args.ttlHours);
@@ -13762,7 +15288,7 @@ async function publish_handler(args) {
                     buildNote = `buildSha ${args.buildSha} is pinned but was not found in the project's registry build index, so builtAt/version/channel are not filled in from another build. The URL still serves the pinned build the platform accepted.`;
                 }
             } else {
-                const newestSuccess = items.filter((item)=>"success" === item.status).sort((a, b)=>String(b.timestamp ?? "").localeCompare(String(a.timestamp ?? "")))[0];
+                const newestSuccess = items.filter(isSuccessfulBuild).sort((a, b)=>String(b.timestamp ?? "").localeCompare(String(a.timestamp ?? "")))[0];
                 if (newestSuccess) {
                     if (null == data.buildSha) data.buildSha = newestSuccess.sha;
                     if (null == data.builtAt && newestSuccess.timestamp) data.builtAt = newestSuccess.timestamp;
@@ -13779,6 +15305,8 @@ async function publish_handler(args) {
         body: data,
         api: args.api
     });
+    const previewCommands = previewCommandsOf(data.previewCommands);
+    const previewHint = previewCommands.length > 0 ? `Run the extension without opening the share page: ${previewCommands.map(([browser, command])=>`${browser}: ${command}`).join(" | ")}. Each command carries the same share token as the URL and expires with it.` : null;
     return envelope_envelope({
         ok: true,
         command: "extension_publish",
@@ -13787,15 +15315,19 @@ async function publish_handler(args) {
         warnings: [
             note,
             buildNote
-        ]
+        ],
+        ...previewHint ? {
+            hint: previewHint
+        } : {}
     });
 }
 const release_promote_schema = {
     name: "extension_release_promote",
-    description: "Promote a built extension to a release channel (stable, preview, beta, …) on extension.dev, headless. This WRITES: it is the only verb that changes what a channel points at. It is auth-gated by your stored login (extension_auth) or a release token in EXTENSION_DEV_TOKEN, minted and revoked under project settings, Access tokens. Tokens live at most 7 days, so CI must re-mint before expiry. The project comes from the token. Call extension_release_status to find a valid buildId. Cutting a version-bump PR is not available headlessly, because it writes to your source repo and needs an interactive login.",
+    description: "Promote a built extension to a release channel (stable, preview, beta, …) on extension.dev, headless. This WRITES: it is the only verb that changes what a channel points at. It is auth-gated by your stored login (extension_auth) or a release token in EXTENSION_DEV_TOKEN, minted and revoked under project settings, Access tokens. Tokens live at most 7 days, so CI must re-mint before expiry. The project comes from the token; with several logins stored, `project` picks which one. Call extension_release_status to find a valid buildId. Cutting a version-bump PR is not available headlessly, because it writes to your source repo and needs an interactive login.",
     inputSchema: {
         type: "object",
         properties: {
+            project: PROJECT_TOKEN_INPUT,
             buildId: {
                 type: "string",
                 description: "Build commit SHA to promote (a 7-char short SHA is fine)"
@@ -13848,7 +15380,10 @@ function release_promote_fail(name, message, status, code) {
     });
 }
 async function release_promote_handler(args) {
-    const token = resolveToken();
+    const token = resolveToken({
+        project: args.project
+    });
+    if (!token && args.project) return release_promote_fail("PromoteAuthError", noStoredLoginHint(args.project), "auth-required", "E_AUTH_REQUIRED");
     if (!token) return release_promote_fail("ReleaseAuthError", "No token. Set EXTENSION_DEV_TOKEN to a release token (create one in the extension.dev dashboard under project settings -> Access tokens; tokens live at most 7 days, so CI must re-mint before expiry), or run extension_auth (action: login).", "auth-required", "E_AUTH_REQUIRED");
     const buildId = String(args.buildId || "").trim();
     const channel = String(args.channel || "").trim();
@@ -14082,7 +15617,7 @@ async function readReleases(args) {
                 publicProjectUrl
             } : {}
         },
-        hint: promotable.length > 0 || recentBuilds.length > 0 ? `Promotable shas: channels currently pin ${promotable.length > 0 ? promotable.join(", ") : "none"}; recent builds add ${recentBuilds.filter((b)=>"success" === b.status).map((b)=>b.sha).join(", ") || "none"}. Use one of these as buildId/buildSha for promote/deploy/publish.` : `No channels or builds are recorded on the registry yet for ${ref.workspace}/${ref.project}. Push a commit to produce a build, then check ${buildsPageUrl}.`,
+        hint: promotable.length > 0 || recentBuilds.length > 0 ? `Promotable shas: channels currently pin ${promotable.length > 0 ? promotable.join(", ") : "none"}; recent builds add ${recentBuilds.filter(isSuccessfulBuild).map((b)=>b.sha).join(", ") || "none"}. Use one of these as buildId/buildSha for promote/deploy/publish.` : `No channels or builds are recorded on the registry yet for ${ref.workspace}/${ref.project}. Push a commit to produce a build, then check ${buildsPageUrl}.`,
         warnings: [
             publicUrlNote,
             channelsUnavailable,
@@ -14470,10 +16005,11 @@ function storeMdWarnings(browsers, cwd) {
 }
 const submit_schema = {
     name: "extension_submit",
-    description: "Submit a built extension for store REVIEW through extension.dev, which holds your store credentials and dispatches from your project's mirror CI: the Chrome Web Store, Firefox AMO, Edge Add-ons and the App Store (Safari). This is store review only. It does not push a build to the extension.dev platform, and it does not make a shareable link: that is extension_publish, which is what \"deploy\" or \"ship\" an extension almost always means. Reach for this only when the ask is explicitly a store submission. It defaults to a dry run that dispatches nothing: the platform verifies auth, project, build and store workflow, and this tool adds each store's credential-health verdict. Trust those per-store rows over the platform's bare preflight line, which does not check store health. Pass dryRun:false to actually submit, which is irreversible and enters store review. The project comes from your token (extension_auth or EXTENSION_DEV_TOKEN; tokens live at most 7 days, so CI must re-mint from the console's Access tokens page). Store credentials are never arguments, and no local file is uploaded. Call extension_release_status for valid shas, and, after a real submission, for the recorded outcome and review state.",
+    description: "Submit a built extension for store REVIEW through extension.dev, which holds your store credentials and dispatches from your project's mirror CI: the Chrome Web Store, Firefox AMO, Edge Add-ons and the App Store (Safari). This is store review only. It does not push a build to the extension.dev platform, and it does not make a shareable link: that is extension_publish, which is what \"deploy\" or \"ship\" an extension almost always means. Reach for this only when the ask is explicitly a store submission. It defaults to a dry run that dispatches nothing: the platform verifies auth, project, build and store workflow, and this tool adds each store's credential-health verdict. Trust those per-store rows over the platform's bare preflight line, which does not check store health. Pass dryRun:false to actually submit, which is irreversible and enters store review. The project comes from your token (extension_auth or EXTENSION_DEV_TOKEN; tokens live at most 7 days, so CI must re-mint from the console's Access tokens page); with several logins stored, `project` picks which one. Store credentials are never arguments, and no local file is uploaded. Call extension_release_status for valid shas, and, after a real submission, for the recorded outcome and review state.",
     inputSchema: {
         type: "object",
         properties: {
+            project: PROJECT_TOKEN_INPUT,
             browsers: {
                 type: "array",
                 items: {
@@ -14533,7 +16069,10 @@ function submit_fail(name, message, status, code) {
     });
 }
 async function submit_handler(args) {
-    const token = resolveToken();
+    const token = resolveToken({
+        project: args.project
+    });
+    if (!token && args.project) return submit_fail("SubmitAuthError", noStoredLoginHint(args.project), "auth-required", "E_AUTH_REQUIRED");
     if (!token) return submit_fail("SubmitAuthError", "No token. Run extension_auth (action: login), or set EXTENSION_DEV_TOKEN (create one in the extension.dev dashboard under project settings -> Access tokens; tokens live at most 7 days, so CI must re-mint before expiry).", "auth-required", "E_AUTH_REQUIRED");
     const browsers = (Array.isArray(args.browsers) ? args.browsers : []).map((b)=>String(b).trim().toLowerCase()).filter(Boolean);
     if (0 === browsers.length) return submit_fail("SubmitInputError", 'browsers is required (e.g. ["chrome","firefox","edge","safari"]).', "bad-request", "E_BAD_REQUEST");
@@ -14764,7 +16303,7 @@ async function wait_handler(args) {
     const requested = args.timeoutMs ?? args.timeout ?? DEFAULT_TIMEOUT_MS;
     const budgetMs = Math.min(Math.max(requested, MIN_TIMEOUT_MS), SAFE_CEILING_MS);
     const clamped = requested > SAFE_CEILING_MS;
-    const readyPath = bridge_readyContractPath(args.projectPath, browser);
+    const readyPath = session_paths_readyContractPath(args.projectPath, browser);
     const buildOnly = findSessionInfo(args.projectPath, browser)?.noBrowser === true;
     const since = sessionSinceMs(args.projectPath, browser);
     const start = Date.now();
@@ -14772,6 +16311,7 @@ async function wait_handler(args) {
     let sawCompiledButUnattached = false;
     let lastContractStatus = null;
     let staleContractNote = null;
+    const clampNote = clamped ? `requested ${requested}ms was clamped to ${SAFE_CEILING_MS}ms to stay under the MCP client request timeout` : null;
     while(Date.now() - start < budgetMs){
         try {
             const stat = node_fs.statSync(readyPath);
@@ -14823,6 +16363,26 @@ async function wait_handler(args) {
                     },
                     hint: "Build-only session (noBrowser): the extension compiled and the dev server is live, but no browser was launched, so browserAttached will never become true. Do not call extension_wait again to wait for a browser. The control verbs (storage/reload/open/dom_snapshot/eval) need a live browser and will not work against this session."
                 });
+                if (!attached && "start" === contract.command) return envelope_envelope({
+                    ok: true,
+                    command: wait_schema.name,
+                    status: "launched",
+                    value: {
+                        compiled: true,
+                        browserAttached: false,
+                        sessionCommand: "start",
+                        browser: contract.browser,
+                        pid: contract.pid,
+                        readyPath,
+                        budgetMs,
+                        elapsedMs: Date.now() - start
+                    },
+                    warnings: [
+                        clampNote,
+                        staleContractNote
+                    ],
+                    hint: "This is an extension_start session: the production build is loaded in the browser, and a production build carries no dev bridge, so browserAttached stays false for good and extension_eval, extension_storage, extension_reload, extension_open and extension_dom_snapshot cannot drive it. Do not call extension_wait again. To drive or read the extension, run it with extension_dev; to check the production artifact, extension_build reports its summary and extension_preview_web renders the built dist."
+                });
                 if (!attached) {
                     await new Promise((r)=>setTimeout(r, pollInterval));
                     sawCompiledButUnattached = true;
@@ -14903,6 +16463,10 @@ async function wait_handler(args) {
             budgetMs,
             elapsedMs: Date.now() - start
         },
+        warnings: [
+            clampNote,
+            staleContractNote
+        ],
         hint: "This is usually transient: call extension_wait again. If it persists, stop and restart the session with extension_dev (a restart reliably reattaches); extension_doctor reports the executor leg."
     });
     return envelope_envelope({
@@ -14921,7 +16485,7 @@ async function wait_handler(args) {
             elapsedMs: Date.now() - start
         },
         warnings: [
-            clamped ? `requested ${requested}ms was clamped to ${SAFE_CEILING_MS}ms to stay under the MCP client request timeout` : null,
+            clampNote,
             staleContractNote
         ],
         hint: "Still building, call extension_wait again to keep waiting (it resumes polling the same contract). If it never readies, check the dev process with extension_doctor."
@@ -14990,11 +16554,11 @@ const FEATURE_TEMPLATE_MAP = {
         preact: "action"
     },
     newtab: {
-        react: "new-react",
-        vue: "new-vue",
-        svelte: "new-svelte",
-        preact: "new-preact",
-        vanilla: "new"
+        react: "newtab-react",
+        vue: "newtab-vue",
+        svelte: "newtab-svelte",
+        preact: "newtab-preact",
+        vanilla: "newtab"
     },
     background: {
         react: "javascript",
@@ -15447,12 +17011,20 @@ async function readIdentity(deps) {
     const identityNote = expired ? "The stored token has expired. Run extension_auth (action: login) to refresh it." : `Logged in as ${creds.workspaceSlug}/${creds.projectSlug}, per the token extension_auth stored on this machine. That token is what scopes the identity: it does not follow the current working directory or project folder.`;
     const apiDivergesNote = apiDiverges ? `This login was minted via ${recordedApi}: access grants for private registry reads use that recorded base when no api argument is given, while other authenticated tools target ${effectiveDefaultApi} unless given one.` : null;
     const envTokenNote = envTokenSet ? "EXTENSION_DEV_TOKEN is set and takes precedence over this stored login for authenticated tools; this report describes only the stored login." : null;
+    const logins = listCredentials().map((entry)=>({
+            project: `${entry.workspaceSlug}/${entry.projectSlug}`,
+            active: entry.active,
+            expiresAt: entry.expiresAt ? new Date(1000 * entry.expiresAt).toISOString() : null,
+            expired: Boolean(entry.expiresAt && entry.expiresAt <= now)
+        }));
+    const loginsNote = logins.length > 1 ? `${logins.length} logins are stored on this machine (${logins.map((l)=>l.project).join(", ")}); the active one above is the default for token-scoped tools, and each of them takes \`project\` to use another.` : null;
     const message = [
         identityNote,
         server.note,
         server.warning,
         apiDivergesNote,
-        envTokenNote
+        envTokenNote,
+        loginsNote
     ].filter(Boolean).join(" ");
     return envelope_envelope({
         ok: true,
@@ -15469,7 +17041,8 @@ async function readIdentity(deps) {
             expiresAt: creds.expiresAt ? new Date(1000 * creds.expiresAt).toISOString() : null,
             expiresInSeconds: creds.expiresAt ? creds.expiresAt - now : null,
             expired,
-            server: server.value
+            server: server.value,
+            logins
         },
         hint: message,
         warnings: [
@@ -15480,27 +17053,35 @@ async function readIdentity(deps) {
         ]
     });
 }
-async function clearLocalCredentials() {
-    const creds = readCredentials();
+async function clearLocalCredentials(project) {
+    const wanted = String(project ?? "").trim();
+    const creds = readCredentials(wanted ? {
+        project: wanted
+    } : void 0);
     const revokeUrl = creds?.workspaceSlug && creds?.projectSlug ? consoleProjectUrl({
         workspace: creds.workspaceSlug,
         project: creds.projectSlug
     }, "settings/access-tokens") : null;
-    const result = clearCredentials();
+    const result = clearCredentials(wanted ? {
+        project: wanted
+    } : void 0);
+    const scope = wanted ? `the login for ${creds ? `${creds.workspaceSlug}/${creds.projectSlug}` : wanted}` : result.removed.length > 1 ? `all ${result.removed.length} stored logins` : "the stored login";
     return envelope_envelope({
         ok: true,
         command: "extension_auth",
         status: result.cleared ? "logged-out" : "nothing-to-clear",
         value: {
             cleared: result.cleared,
+            removed: result.removed,
+            remaining: result.remaining,
             revokeUrl: result.cleared && revokeUrl ? revokeUrl : null
         },
-        hint: result.cleared ? revokeUrl ? `Local credentials removed. The token stays valid server-side until it expires; revoke it now at ${revokeUrl} (takes about a minute to propagate).` : "Local credentials removed. The token stays valid server-side until it expires; revoke it from the project's access-tokens page if needed." : "No stored credentials to remove."
+        hint: result.cleared ? `Removed ${scope} from this machine${result.remaining.length ? `; ${result.remaining.length} other login${1 === result.remaining.length ? "" : "s"} stay (${result.remaining.join(", ")})` : ""}. The token stays valid server-side until it expires; ${revokeUrl ? `revoke it now at ${revokeUrl} (takes about a minute to propagate)` : "revoke it from the project's access-tokens page if needed"}.` : wanted ? `No stored login matches ${wanted}. extension_auth (action: status) lists the logins on this machine.` : "No stored credentials to remove."
     });
 }
 const auth_schema = {
     name: "extension_auth",
-    description: "Sign this machine in to extension.dev, report that login, or clear it. Pass action:'status' (the default) to name the workspace and project the stored token is scoped to and when it expires, never the token itself; that identity comes from the stored token alone, and does not change with the current working directory or whichever project folder you are in. Status also asks the platform's whoami endpoint whether that credential actually resolves there: the answer is reported as confirmed, refused-by-server, or unverified when the server cannot be reached, so a local file claiming a login the server would refuse is never reported as simply logged in. Pass action:'login' for a two-phase flow: call with `project` to get a code plus a URL the user authorizes at extension.dev/device, then call again with the returned `deviceCode`. GitHub federation happens server-side, so no GitHub token lands on this machine. Minted tokens live at most 7 days, server-enforced, so CI must re-mint before expiry on the console's project settings, Access tokens page. Pass action:'logout' to delete the local credentials only; the token stays valid server-side until it is revoked at the URL the response returns.",
+    description: "Sign this machine in to extension.dev, report that login, or clear it. Pass action:'status' (the default) to name the workspace and project the stored token is scoped to and when it expires, never the token itself; that identity comes from the stored token alone, and does not change with the current working directory or whichever project folder you are in. Status also asks the platform's whoami endpoint whether that credential actually resolves there: the answer is reported as confirmed, refused-by-server, or unverified when the server cannot be reached, so a local file claiming a login the server would refuse is never reported as simply logged in. Pass action:'login' for a two-phase flow: call with `project` to get a code plus a URL the user authorizes at extension.dev/device, then call again with the returned `deviceCode`. GitHub federation happens server-side, so no GitHub token lands on this machine. Minted tokens live at most 7 days, server-enforced, so CI must re-mint before expiry on the console's project settings, Access tokens page. Pass action:'logout' to delete the local credentials only (with `project`, just that project's login); the token stays valid server-side until it is revoked at the URL the response returns. Several logins live side by side on one machine, one per workspace/project, and status lists them all under `logins`.",
     inputSchema: {
         type: "object",
         properties: {
@@ -15515,7 +17096,7 @@ const auth_schema = {
             },
             project: {
                 type: "string",
-                description: "login: target project as '<workspace>/<project>'; the token is scoped to it. The slug pair is the console address bar: an existing project's page is console.extension.dev/<workspace>/<project>. Create one at extension.dev/new if none exists yet."
+                description: "login: target project as '<workspace>/<project>'; the token is scoped to it. The slug pair is the console address bar: an existing project's page is console.extension.dev/<workspace>/<project>. Create one at extension.dev/new if none exists yet. Logins to several projects are all kept, the latest is the default; token-scoped tools take `project` to pick another. logout: remove only this project's login (omitted, every stored login goes)."
             },
             deviceCode: {
                 type: "string",
@@ -15528,7 +17109,7 @@ const auth_schema = {
 };
 async function auth_handler(args) {
     const action = args.action ?? "status";
-    if ("logout" === action) return clearLocalCredentials();
+    if ("logout" === action) return clearLocalCredentials(args.project);
     if ("login" === action) return loginToProject({
         project: String(args.project ?? ""),
         deviceCode: args.deviceCode,
@@ -15548,6 +17129,8 @@ const ALL_BROWSERS = [
     "firefox",
     "waterfox",
     "librewolf",
+    "zen",
+    "floorp",
     "safari"
 ];
 const MANAGED_INSTALLABLE = new Set([
@@ -15598,6 +17181,14 @@ const SYSTEM_PATHS = {
             "/Applications/LibreWolf.app/Contents/MacOS/librewolf",
             `${process.env.HOME}/Applications/LibreWolf.app/Contents/MacOS/librewolf`
         ],
+        zen: [
+            "/Applications/Zen.app/Contents/MacOS/zen",
+            `${process.env.HOME}/Applications/Zen.app/Contents/MacOS/zen`
+        ],
+        floorp: [
+            "/Applications/Floorp.app/Contents/MacOS/floorp",
+            `${process.env.HOME}/Applications/Floorp.app/Contents/MacOS/floorp`
+        ],
         safari: [
             "/Applications/Safari.app/Contents/MacOS/Safari"
         ]
@@ -15647,6 +17238,16 @@ const SYSTEM_PATHS = {
         librewolf: [
             "/usr/bin/librewolf",
             "/opt/librewolf/librewolf"
+        ],
+        zen: [
+            "/usr/bin/zen",
+            "/usr/bin/zen-browser",
+            "/opt/zen/zen",
+            "/opt/zen-browser/zen"
+        ],
+        floorp: [
+            "/usr/bin/floorp",
+            "/opt/floorp/floorp"
         ]
     },
     win32: {
@@ -15688,6 +17289,14 @@ const SYSTEM_PATHS = {
         librewolf: [
             "C:\\Program Files\\LibreWolf\\librewolf.exe",
             "C:\\Program Files (x86)\\LibreWolf\\librewolf.exe"
+        ],
+        zen: [
+            "C:\\Program Files\\Zen Browser\\zen.exe",
+            `${process.env.LOCALAPPDATA || ""}\\Zen Browser\\zen.exe`
+        ],
+        floorp: [
+            "C:\\Program Files\\Floorp\\floorp.exe",
+            "C:\\Program Files (x86)\\Floorp\\floorp.exe"
         ]
     }
 };
@@ -15749,16 +17358,29 @@ function executableInsideBundle(bundle, names) {
     } catch  {}
     return null;
 }
+function compareVersionNames(a, b) {
+    const nums = (name)=>(name.match(/\d+/g) ?? []).map((n)=>Number(n));
+    const left = nums(a);
+    const right = nums(b);
+    for(let i = 0; i < Math.max(left.length, right.length); i += 1){
+        const diff = (left[i] ?? -1) - (right[i] ?? -1);
+        if (0 !== diff) return diff;
+    }
+    return a.localeCompare(b);
+}
 function findManagedBinary(browser, cacheRoot = resolveCacheRoot()) {
-    const browserDir = node_path.join(cacheRoot, browser);
+    return findManagedBinaryIn(node_path.join(cacheRoot, browser), browser);
+}
+function findManagedBinaryIn(browserDir, browser) {
     if (!node_fs.existsSync(browserDir)) return null;
     const names = MANAGED_EXEC_NAMES[browser] ?? [];
     function search(dir, depth) {
         if (depth > MANAGED_SEARCH_DEPTH) return null;
         try {
-            for (const entry of node_fs.readdirSync(dir, {
+            const entries = node_fs.readdirSync(dir, {
                 withFileTypes: true
-            })){
+            }).sort((a, b)=>compareVersionNames(b.name, a.name));
+            for (const entry of entries){
                 const full = node_path.join(dir, entry.name);
                 if (entry.isFile() && names.includes(entry.name)) return full;
                 if (entry.isDirectory() && entry.name.endsWith(".app")) {
@@ -15921,7 +17543,8 @@ async function installManagedBrowser(browser) {
     const start = Date.now();
     try {
         await extensionInstall({
-            browser
+            browser,
+            locateInstalledBinary: (destination, target)=>findManagedBinaryIn(destination, target)
         });
         return envelope_envelope({
             ok: true,
@@ -16249,6 +17872,7 @@ const tools = [
     add_feature_namespaceObject,
     auth_namespaceObject,
     project_create_namespaceObject,
+    workspace_create_namespaceObject,
     browsers_namespaceObject,
     doctor_namespaceObject
 ];