extension-create 3.17.0 → 3.18.0

package/dist/lib/messages.d.ts

@@ -11,10 +11,9 @@ export declare function writingTypeDefinitions(projectName: string): string;
 export declare function writingTypeDefinitionsError(error: any): string;
 export declare function installingFromTemplate(projectName: string, templateName: string): string;
 export declare function installingFromTemplateError(projectName: string, template: string, error: any): string;
+export declare function templateFetchTimedOut(templateName: string, ms: number): string;
 export declare function initializingGitForRepository(projectName: string): string;
-export declare function initializingGitForRepositoryFailed(gitCommand: string, gitArgs: string[], code: number | null): string;
-export declare function initializingGitForRepositoryProcessError(projectName: string, error: any): string;
-export declare function initializingGitForRepositoryError(projectName: string, error: any): string;
+export declare function initializingGitSkipped(projectName: string, reason: string): string;
 export declare function installingDependencies(): string;
 export declare function foundSpecializedDependencies(count: number): string;
 export declare function installingProjectIntegrations(integrations: string[]): string;

package/dist/lib/package-manager.d.ts

@@ -1,4 +1,4 @@
-type PackageManagerName = 'pnpm' | 'yarn' | 'npm';
+type PackageManagerName = 'pnpm' | 'yarn' | 'bun' | 'npm';
 export declare function detectPackageManagerFromEnv(): PackageManagerName;
 export declare function getPackageManagerSpecFromEnv(): string | null;
 export {};

package/dist/lib/utils.d.ts

@@ -1,6 +1,6 @@
 export declare function copyDirectoryWithSymlinks(source: string, destination: string): Promise<void>;
 export declare function moveDirectoryContents(source: string, destination: string): Promise<void>;
-export declare function getInstallCommand(): Promise<"pnpm" | "yarn" | "npm">;
+export declare function getInstallCommand(): Promise<"pnpm" | "yarn" | "bun" | "npm">;
 export declare function isDirectoryWriteable(directory: string, projectName: string, logger: {
     log(...args: any[]): void;
     error(...args: any[]): void;

package/dist/module.cjs

@@ -42,15 +42,17 @@ const external_path_namespaceObject = require("path");
 const external_fs_namespaceObject = require("fs");
 const external_pintor_namespaceObject = require("pintor");
 var external_pintor_default = /*#__PURE__*/ __webpack_require__.n(external_pintor_namespaceObject);
-const userAgentPattern = /(pnpm|yarn|npm)\/([0-9]+\.[0-9]+\.[0-9]+[^ ]*)/i;
+const userAgentPattern = /(pnpm|yarn|bun|npm)\/([0-9]+\.[0-9]+\.[0-9]+[^ ]*)/i;
 function detectPackageManagerFromEnv() {
-    const userAgent = process.env.npm_config_user_agent || '';
+    const userAgent = (process.env.npm_config_user_agent || '').toLowerCase();
     if (userAgent.includes('pnpm')) return 'pnpm';
     if (userAgent.includes('yarn')) return 'yarn';
+    if (userAgent.includes('bun')) return 'bun';
     if (userAgent.includes('npm')) return 'npm';
-    const execPath = process.env.npm_execpath || process.env.NPM_EXEC_PATH || '';
+    const execPath = (process.env.npm_execpath || process.env.NPM_EXEC_PATH || process.env.BUN_INSTALL || '').toLowerCase();
     if (execPath.includes('pnpm')) return 'pnpm';
     if (execPath.includes('yarn')) return 'yarn';
+    if (execPath.includes('bun')) return 'bun';
     execPath.includes('npm');
     return 'npm';
 }
@@ -131,17 +133,14 @@ function installingFromTemplate(projectName, templateName) {
 function installingFromTemplateError(projectName, template, error) {
     return `${external_pintor_default().red('Error')} Couldn't find template ${external_pintor_default().yellow(template)} for ${external_pintor_default().blue(projectName)}.\n${external_pintor_default().red(String(error))}\n${external_pintor_default().red('Next step: choose a valid template name or URL.')}`;
 }
+function templateFetchTimedOut(templateName, ms) {
+    return `${external_pintor_default().red('Error')} Timed out after ${external_pintor_default().yellow(`${Math.round(ms / 1000)}s`)} fetching template ${external_pintor_default().yellow(templateName)}.\n${external_pintor_default().red('Next step: check your network, or set EXTENSION_CREATE_TIMEOUT_MS to allow more time.')}`;
+}
 function initializingGitForRepository(projectName) {
     return `${statusPrefix} Initializing git repository for ${external_pintor_default().blue(projectName)}...`;
 }
-function initializingGitForRepositoryFailed(gitCommand, gitArgs, code) {
-    return `${external_pintor_default().red('Error')} Command ${external_pintor_default().yellow(gitCommand)} ${external_pintor_default().yellow(gitArgs.join(' '))} failed.\n${external_pintor_default().red(`Exit code: ${external_pintor_default().yellow(String(code))}`)}\n${external_pintor_default().red('Next step: run the command manually to inspect the error.')}`;
-}
-function initializingGitForRepositoryProcessError(projectName, error) {
-    return `${external_pintor_default().red('Error')} Child process failed while initializing ${external_pintor_default().yellow('git')} for ${external_pintor_default().blue(projectName)}.\n${external_pintor_default().red(String(error?.message || error))}\n${external_pintor_default().red('Next step: retry initialization or create the repository manually.')}`;
-}
-function initializingGitForRepositoryError(projectName, error) {
-    return `${external_pintor_default().red('Error')} Couldn't initialize ${external_pintor_default().yellow('git')} for ${external_pintor_default().blue(projectName)}.\n${external_pintor_default().red(String(error?.message || error))}\n${external_pintor_default().red('Next step: retry initialization or create the repository manually.')}`;
+function initializingGitSkipped(projectName, reason) {
+    return `${statusPrefix} Skipped git init for ${external_pintor_default().blue(projectName)} (${external_pintor_default().yellow(reason)}). Run ${external_pintor_default().yellow('git init')} yourself if you want version control.`;
 }
 function installingDependencies() {
     return `${statusPrefix} Installing project-specific dependencies... ${external_pintor_default().gray('(This may take a moment)')}`;
@@ -199,6 +198,31 @@ function cantSetupBuiltInTests(projectName, error) {
     return `${external_pintor_default().red('Error')} Couldn't set up built-in tests for ${external_pintor_default().yellow(projectName)}.\n${external_pintor_default().red(String(error))}\n${external_pintor_default().red('Next step: run the setup step again or skip tests.')}`;
 }
 const promises_namespaceObject = require("fs/promises");
+async function copyDirectoryWithSymlinks(source, destination) {
+    const entries = await promises_namespaceObject.readdir(source, {
+        withFileTypes: true
+    });
+    await promises_namespaceObject.mkdir(destination, {
+        recursive: true
+    });
+    for (const entry of entries){
+        const sourcePath = external_path_namespaceObject.join(source, entry.name);
+        const destPath = external_path_namespaceObject.join(destination, entry.name);
+        if (entry.isDirectory()) await copyDirectoryWithSymlinks(sourcePath, destPath);
+        else if (entry.isSymbolicLink()) try {
+            const target = await promises_namespaceObject.readlink(sourcePath);
+            await promises_namespaceObject.symlink(target, destPath);
+        } catch (err) {
+            if (err?.code === 'EPERM' || err?.code === 'ENOTSUP') {
+                const real = await promises_namespaceObject.realpath(sourcePath);
+                await promises_namespaceObject.cp(real, destPath, {
+                    recursive: true
+                });
+            } else throw err;
+        }
+        else await promises_namespaceObject.copyFile(sourcePath, destPath);
+    }
+}
 async function moveDirectoryContents(source, destination) {
     await promises_namespaceObject.mkdir(destination, {
         recursive: true
@@ -289,7 +313,29 @@ const external_adm_zip_namespaceObject = require("adm-zip");
 var external_adm_zip_default = /*#__PURE__*/ __webpack_require__.n(external_adm_zip_namespaceObject);
 const external_go_git_it_namespaceObject = require("go-git-it");
 var external_go_git_it_default = /*#__PURE__*/ __webpack_require__.n(external_go_git_it_namespaceObject);
+const NETWORK_TIMEOUT_MS = (()=>{
+    const raw = parseInt(String(process.env.EXTENSION_CREATE_TIMEOUT_MS || ''), 10);
+    return Number.isFinite(raw) && raw > 0 ? raw : 60000;
+})();
+function isAuthorOrDevMode() {
+    return 'development' === process.env.EXTENSION_ENV || 'true' === process.env.EXTENSION_AUTHOR_MODE;
+}
+async function withTimeout(task, ms, onTimeout) {
+    let timer;
+    const timeout = new Promise((_, reject)=>{
+        timer = setTimeout(()=>reject(onTimeout()), ms);
+    });
+    try {
+        return await Promise.race([
+            task,
+            timeout
+        ]);
+    } finally{
+        if (timer) clearTimeout(timer);
+    }
+}
 async function withSuppressedOutput(task) {
+    if (isAuthorOrDevMode()) return task();
     const originalStdoutWrite = process.stdout.write.bind(process.stdout);
     const originalStderrWrite = process.stderr.write.bind(process.stderr);
     process.stdout.write = ()=>true;
@@ -301,6 +347,9 @@ async function withSuppressedOutput(task) {
         process.stderr.write = originalStderrWrite;
     }
 }
+function bundledTemplateDir(templateName) {
+    return external_path_namespaceObject.join(__dirname, '..', 'templates', templateName);
+}
 function getArchiveBaseName(url) {
     const withoutQuery = url.split('?')[0];
     const fileName = external_path_namespaceObject.basename(withoutQuery);
@@ -329,19 +378,23 @@ async function importExternalTemplate(projectPath, projectName, template, logger
     const resolvedTemplate = 'init' === templateName ? "javascript" : template;
     const resolvedTemplateName = 'init' === templateName ? "javascript" : templateName;
     const templateUrl = `${examplesUrl}/${resolvedTemplate}`;
+    const isHttp = /^https?:\/\//i.test(template);
+    const isGithub = /^https?:\/\/github\.com\//i.test(template);
     try {
         await promises_namespaceObject.mkdir(projectPath, {
             recursive: true
         });
+        if (!isHttp && !isGithub && "javascript" === resolvedTemplate) {
+            const localTemplate = bundledTemplateDir("javascript");
+            if ((0, external_fs_namespaceObject.existsSync)(localTemplate)) return void await copyDirectoryWithSymlinks(localTemplate, projectPath);
+        }
         const tempRoot = await promises_namespaceObject.mkdtemp(external_path_namespaceObject.join(external_os_namespaceObject.tmpdir(), 'extension-js-create-'));
         const tempPath = external_path_namespaceObject.join(tempRoot, projectName + '-temp');
         await promises_namespaceObject.mkdir(tempPath, {
             recursive: true
         });
-        const isHttp = /^https?:\/\//i.test(template);
-        const isGithub = /^https?:\/\/github.com\//i.test(template);
         const runGoGitIt = async (templatePath, destination)=>{
-            await withSuppressedOutput(async ()=>external_go_git_it_default()(templatePath, destination, installingFromTemplate(projectName, templateName)));
+            await withTimeout(withSuppressedOutput(async ()=>external_go_git_it_default()(templatePath, destination, installingFromTemplate(projectName, templateName))), NETWORK_TIMEOUT_MS, ()=>new Error(templateFetchTimedOut(templateName, NETWORK_TIMEOUT_MS)));
         };
         if (isGithub) {
             await runGoGitIt(template, tempPath);
@@ -354,7 +407,8 @@ async function importExternalTemplate(projectPath, projectName, template, logger
         } else if (isHttp) {
             const { data, headers } = await external_axios_default().get(template, {
                 responseType: 'arraybuffer',
-                maxRedirects: 5
+                maxRedirects: 5,
+                timeout: NETWORK_TIMEOUT_MS
             });
             const contentType = String(headers?.['content-type'] || '');
             const looksZip = /zip|octet-stream/i.test(contentType) || template.toLowerCase().endsWith('.zip');
@@ -463,7 +517,7 @@ async function overridePackageJson(projectPath, projectName, { template = "javas
     };
     try {
         logger.log(writingPackageJsonMetadata());
-        await promises_namespaceObject.writeFile(external_path_namespaceObject.join(projectPath, 'package.json'), JSON.stringify(packageMetadata, null, 2));
+        await promises_namespaceObject.writeFile(external_path_namespaceObject.join(projectPath, 'package.json'), JSON.stringify(packageMetadata, null, 2) + '\n');
     } catch (error) {
         logger.error(writingPackageJsonMetadataError(projectName, error));
         throw error;
@@ -510,7 +564,10 @@ async function runInstall(command, args, opts) {
         });
     });
 }
-function getInstallArgs() {
+function getInstallArgs(packageManager) {
+    if ('bun' === packageManager) return [
+        'install'
+    ];
     return [
         'install',
         '--silent'
@@ -567,7 +624,7 @@ async function installDependencies(projectPath, projectName, logger) {
     const shouldInstall = await hasDependenciesToInstall(projectPath);
     if (!shouldInstall) return;
     const command = await getInstallCommand();
-    const dependenciesArgs = getInstallArgs();
+    const dependenciesArgs = getInstallArgs(command);
     const installMessage = installingDependencies();
     logger.log(installMessage);
     try {
@@ -781,26 +838,22 @@ async function initializeGitRepository(projectPath, projectName, logger) {
         '--quiet'
     ];
     logger.log(initializingGitForRepository(projectName));
-    try {
-        const stdio = 'development' === process.env.EXTENSION_ENV ? 'inherit' : 'ignore';
-        const child = (0, external_cross_spawn_namespaceObject.spawn)(gitCommand, gitArgs, {
-            stdio,
-            cwd: projectPath
+    const stdio = 'development' === process.env.EXTENSION_ENV ? 'inherit' : 'ignore';
+    const child = (0, external_cross_spawn_namespaceObject.spawn)(gitCommand, gitArgs, {
+        stdio,
+        cwd: projectPath
+    });
+    await new Promise((resolve)=>{
+        child.on('close', (code)=>{
+            if (0 !== code) logger.log(initializingGitSkipped(projectName, `git exited with ${code}`));
+            resolve();
         });
-        await new Promise((resolve, reject)=>{
-            child.on('close', (code)=>{
-                if (0 !== code) reject(new Error(initializingGitForRepositoryFailed(gitCommand, gitArgs, code)));
-                else resolve();
-            });
-            child.on('error', (error)=>{
-                logger.error(initializingGitForRepositoryProcessError(projectName, error));
-                reject(error);
-            });
+        child.on('error', (error)=>{
+            const reason = error?.code === 'ENOENT' ? 'git not found' : String(error?.message || error);
+            logger.log(initializingGitSkipped(projectName, reason));
+            resolve();
         });
-    } catch (error) {
-        logger.error(initializingGitForRepositoryError(projectName, error));
-        throw error;
-    }
+    });
 }
 async function setupBuiltInTests(projectPath, projectName, logger) {
     try {
@@ -1024,34 +1077,30 @@ async function extensionCreate(projectNameInput, { cliVersion, template = "javas
     if (projectNameInput.startsWith('http')) throw new Error(noUrlAllowed());
     const projectPath = external_path_namespaceObject.isAbsolute(projectNameInput) ? projectNameInput : external_path_namespaceObject.join(process.cwd(), projectNameInput);
     const projectName = external_path_namespaceObject.basename(projectPath);
-    try {
-        await createDirectory(projectPath, projectName, logger);
-        await importExternalTemplate(projectPath, projectName, template, logger);
-        await overridePackageJson(projectPath, projectName, {
-            template,
-            cliVersion
-        }, logger);
-        if (install) {
-            await installDependencies(projectPath, projectName, logger);
-            await installInternalDependencies(projectPath, logger);
-        }
-        await writeReadmeFile(projectPath, projectName, logger);
-        await writeManifestJson(projectPath, projectName, logger);
-        await initializeGitRepository(projectPath, projectName, logger);
-        await writeGitignore(projectPath, logger);
-        await setupBuiltInTests(projectPath, projectName, logger);
-        if (isTypeScriptTemplate(template)) await generateExtensionTypes(projectPath, projectName, logger);
-        const successfulInstall = await successfullInstall(projectPath, projectName, Boolean(install));
-        logger.log(successfulInstall);
-        return {
-            projectPath,
-            projectName,
-            template,
-            depsInstalled: install
-        };
-    } catch (error) {
-        throw error;
+    await createDirectory(projectPath, projectName, logger);
+    await importExternalTemplate(projectPath, projectName, template, logger);
+    await overridePackageJson(projectPath, projectName, {
+        template,
+        cliVersion
+    }, logger);
+    if (install) {
+        await installDependencies(projectPath, projectName, logger);
+        await installInternalDependencies(projectPath, logger);
     }
+    await writeReadmeFile(projectPath, projectName, logger);
+    await writeManifestJson(projectPath, projectName, logger);
+    await initializeGitRepository(projectPath, projectName, logger);
+    await writeGitignore(projectPath, logger);
+    await setupBuiltInTests(projectPath, projectName, logger);
+    if (isTypeScriptTemplate(template)) await generateExtensionTypes(projectPath, projectName, logger);
+    const successfulInstall = await successfullInstall(projectPath, projectName, Boolean(install));
+    logger.log(successfulInstall);
+    return {
+        projectPath,
+        projectName,
+        template,
+        depsInstalled: install
+    };
 }
 exports.extensionCreate = __webpack_exports__.extensionCreate;
 for(var __rspack_i in __webpack_exports__)if (-1 === [

package/package.json

@@ -21,10 +21,11 @@
   "main": "./dist/module.cjs",
   "types": "./dist/module.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "templates"
   ],
   "name": "extension-create",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "The standalone extension creation engine for Extension.js",
   "author": {
     "name": "Cezar Augusto",

package/templates/javascript/README.md

@@ -0,0 +1,87 @@
+[powered-image]: https://img.shields.io/badge/Powered%20by-Extension.js-0971fe
+[powered-url]: https://extension.js.org
+
+![Powered by Extension.js][powered-image]
+
+# JavaScript Starter Extension
+
+> JavaScript-based extension with a sidebar panel. Adds a sidebar with a simple page.
+
+![screenshot](./public/screenshot.png)
+
+**What you'll see**: A small UI injected into any web page, isolated in a Shadow DOM so site styles don't bleed through.
+
+**How it works**: A content script mounts a JavaScript UI inside a Shadow DOM and applies scoped styles so the host page can't bleed through.
+
+Plain JavaScript starter. Useful as a baseline when you want to add framework or tooling support yourself, layer by layer.
+
+## Try it locally
+
+```bash
+npx extension@latest create my-javascript --template javascript
+cd my-javascript
+npm install
+npm run dev
+```
+
+A fresh browser window opens with the extension already loaded.
+
+## Project layout
+
+```
+src/
+├── content/
+│   ├── ContentApp.js
+│   ├── scripts.js
+│   └── styles.css
+├── images/
+│   └── icon.png
+├── sidebar/
+│   ├── index.html
+│   ├── scripts.js
+│   ├── SidebarApp.js
+│   └── styles.css
+├── background.js
+└── manifest.json
+```
+
+## Commands
+
+### dev
+
+Run the extension in development mode. Target a browser with `--browser`:
+
+```bash
+npm run dev                 # Chromium (default)
+npm run dev -- --browser=chrome
+npm run dev -- --browser=edge
+npm run dev -- --browser=firefox
+```
+
+### build
+
+Build for production. Convenience scripts cover each browser:
+
+```bash
+npm run build           # Chrome (default)
+npm run build:firefox
+npm run build:edge
+```
+
+### preview
+
+Preview the production build with the bundled browser:
+
+```bash
+npm run preview
+```
+
+## Tests
+
+This template ships an end-to-end check (`template.spec.ts`) validated by the examples-repo CI on every commit.
+
+## Learn more
+
+- [Extension.js docs](https://extension.js.org)
+- [Templates index](https://extension.js.org/docs/getting-started/templates)
+- [GitHub: extension-js/extension.js](https://github.com/extension-js/extension.js)

package/templates/javascript/extension.config.js

@@ -0,0 +1,19 @@
+/** @type {import('extension').FileConfig} */
+// Extension.js uses a fresh profile on every run.
+// Prefer that default? Remove the profile config below.
+const profile = (name) => `./dist/extension-profile-${name}`
+const ciFlags = process.env.CI ? ['--no-sandbox', '--disable-gpu'] : []
+
+export default {
+  browser: {
+    chrome: {profile: profile('chrome'), browserFlags: ciFlags},
+    chromium: {profile: profile('chromium'), browserFlags: ciFlags},
+    edge: {profile: profile('edge'), browserFlags: ciFlags},
+    firefox: {profile: profile('firefox')},
+    'chromium-based': {
+      profile: profile('chromium-based'),
+      browserFlags: ciFlags
+    },
+    'gecko-based': {profile: profile('gecko-based')}
+  }
+}

package/templates/javascript/package.json

@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "javascript",
+  "description": "JavaScript-based extension with a sidebar panel. Adds a sidebar with a simple page.",
+  "version": "1.0.0",
+  "license": "MIT",
+  "type": "module",
+  "author": {
+    "name": "Cezar Augusto",
+    "email": "boss@cezaraugusto.net",
+    "url": "https://cezaraugusto.com"
+  }
+}

package/templates/javascript/src/background.js

@@ -0,0 +1,44 @@
+console.log(
+  '[From the background context] Hello from the background worker/script!'
+)
+
+const isFirefoxLike =
+  import.meta.env.EXTENSION_PUBLIC_BROWSER === 'firefox' ||
+  import.meta.env.EXTENSION_PUBLIC_BROWSER === 'gecko-based'
+
+if (isFirefoxLike) {
+  browser.browserAction.onClicked.addListener(() => {
+    browser.sidebarAction.open()
+  })
+
+  browser.runtime.onMessage.addListener((message) => {
+    if (!message || message.type !== 'openSidebar') return
+
+    browser.sidebarAction.open()
+  })
+}
+
+if (!isFirefoxLike) {
+  chrome.action.onClicked.addListener(() => {
+    chrome.sidePanel.setPanelBehavior({openPanelOnActionClick: true})
+  })
+}
+
+chrome.runtime.onMessage.addListener((message) => {
+  if (!message || message.type !== 'openSidebar') return
+
+  chrome.sidePanel.setPanelBehavior({openPanelOnActionClick: true})
+
+  if (!chrome.sidePanel.open) return
+
+  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
+    const activeTabId = tabs && tabs[0] && tabs[0].id
+    if (!activeTabId) return
+
+    try {
+      chrome.sidePanel.open({tabId: activeTabId})
+    } catch (error) {
+      console.error(error)
+    }
+  })
+})

package/templates/javascript/src/content/ContentApp.js

@@ -0,0 +1,42 @@
+import iconUrl from '../images/icon.png'
+const logo = iconUrl
+
+export default function createContentApp() {
+  const container = document.createElement('div')
+  container.className = 'content_script'
+
+  const pill = document.createElement('button')
+  pill.type = 'button'
+  pill.className = 'content_pill'
+  pill.setAttribute('aria-label', 'Open sidebar')
+  pill.addEventListener('click', () => {
+    try {
+      if (
+        import.meta.env.EXTENSION_PUBLIC_BROWSER === 'firefox' ||
+        import.meta.env.EXTENSION_PUBLIC_BROWSER === 'gecko-based'
+      ) {
+        browser.runtime.sendMessage({type: 'openSidebar'})
+      } else {
+        chrome.runtime.sendMessage({type: 'openSidebar'})
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  })
+
+  const img = document.createElement('img')
+  img.className = 'content_pill_logo'
+  img.src = logo
+  img.alt = ''
+  img.setAttribute('aria-hidden', 'true')
+
+  const text = document.createElement('span')
+  text.className = 'content_pill_text'
+  text.textContent = 'Open sidebar'
+
+  pill.appendChild(img)
+  pill.appendChild(text)
+  container.appendChild(pill)
+
+  return container
+}

package/templates/javascript/src/content/scripts.js

@@ -0,0 +1,38 @@
+console.log('[From the page context] Hello from content_scripts!')
+import createContentApp from './ContentApp.js'
+import './styles.css'
+
+/**
+ * Extension.js content_script entrypoint. The framework calls this on
+ * injection and calls the returned function on HMR/teardown to clean up.
+ * Do not invoke it yourself.
+ */
+export default function initial() {
+  const rootDiv = document.createElement('div')
+  rootDiv.setAttribute('data-extension-root', 'true')
+  document.body.appendChild(rootDiv)
+
+  // Injecting content_scripts inside a shadow dom
+  // prevents conflicts with the host page's styles.
+  // This way, styles from the extension won't leak into the host page.
+  const shadowRoot = rootDiv.attachShadow({mode: 'open'})
+
+  const styleElement = document.createElement('style')
+  shadowRoot.appendChild(styleElement)
+  fetchCSS().then((response) => (styleElement.textContent = response))
+
+  // Render ContentApp inside shadow root
+  const container = createContentApp()
+  shadowRoot.appendChild(container)
+
+  return () => {
+    rootDiv.remove()
+  }
+}
+
+async function fetchCSS() {
+  const cssUrl = new URL('./styles.css', import.meta.url)
+  const response = await fetch(cssUrl)
+  const text = await response.text()
+  return response.ok ? text : Promise.reject(text)
+}

package/templates/javascript/src/content/styles.css

@@ -0,0 +1,45 @@
+.content_script {
+  position: absolute;
+  right: 0.75rem;
+  bottom: 0.75rem;
+  z-index: 9999;
+}
+
+.content_pill {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  appearance: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: var(--sidebar-bg, #0a0c10);
+  color: var(--sidebar-text, #c9c9c9);
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
+  border-radius: 9999px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+}
+
+.content_pill:hover {
+  background: #11151c;
+}
+
+.content_pill_logo {
+  height: 1.5rem;
+  border-radius: 9999px;
+  background: rgba(255, 255, 255, 0.08);
+  object-fit: contain;
+  aspect-ratio: 1 / 1;
+  padding: 0.125rem;
+}
+
+.content_pill_text {
+  font-size: 0.85rem;
+  font-weight: 600;
+  line-height: 1;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, "Noto Sans", sans-serif;
+}

package/templates/javascript/src/manifest.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "https://json.schemastore.org/chrome-manifest.json",
+  "chromium:manifest_version": 3,
+  "firefox:manifest_version": 2,
+  "version": "1.0.0",
+  "name": "JavaScript Sidebar Example",
+  "description": "JavaScript-based extension with a sidebar panel. Adds a sidebar with a simple page.",
+  "icons": {
+    "16": "images/icon.png",
+    "32": "images/icon.png",
+    "48": "images/icon.png",
+    "64": "images/icon.png",
+    "128": "images/icon.png"
+  },
+  "chromium:action": {
+    "default_icon": {
+      "16": "images/icon.png",
+      "32": "images/icon.png",
+      "48": "images/icon.png",
+      "64": "images/icon.png",
+      "128": "images/icon.png"
+    },
+    "default_title": "Open Side Panel"
+  },
+  "firefox:browser_action": {
+    "default_icon": {
+      "16": "images/icon.png",
+      "32": "images/icon.png",
+      "48": "images/icon.png",
+      "64": "images/icon.png",
+      "128": "images/icon.png"
+    },
+    "default_title": "Open Side Panel"
+  },
+  "chromium:side_panel": {
+    "default_path": "sidebar/index.html",
+    "default_title": "Side Panel Content"
+  },
+  "firefox:sidebar_action": {
+    "default_panel": "sidebar/index.html",
+    "default_title": "Side Panel Content"
+  },
+  "chromium:permissions": ["sidePanel"],
+  "background": {
+    "chromium:service_worker": "background.js",
+    "firefox:scripts": ["background.js"]
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content/scripts.js"]
+    }
+  ]
+}

package/templates/javascript/src/sidebar/SidebarApp.js

@@ -0,0 +1,30 @@
+import './styles.css'
+import iconUrl from '../images/icon.png'
+
+const javascriptLogo = iconUrl
+
+function SidebarApp() {
+  const root = document.getElementById('root')
+  if (!root) return
+
+  root.innerHTML = `
+    <div class="sidebar_app">
+      <img
+        class="sidebar_logo"
+        src="${javascriptLogo}"
+        alt="The JavaScript logo"
+      />
+      <h1 class="sidebar_title">Sidebar Panel</h1>
+      <p class="sidebar_description">
+        Learn more in the
+        <a
+          href="https://extension.js.org"
+          target="_blank" rel="noopener noreferrer"
+        >Extension.js docs</a>
+        .
+      </p>
+    </div>
+  `
+}
+
+SidebarApp()

package/templates/javascript/src/sidebar/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>JavaScript Sidebar</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this extension.</noscript>
+    <div id="root"></div>
+  </body>
+  <script src="./scripts.js"></script>
+</html> 

package/templates/javascript/src/sidebar/scripts.js

@@ -0,0 +1,3 @@
+console.log('[From the sidebar page context] Hello regular page!')
+import './SidebarApp.js'
+import './styles.css'

package/templates/javascript/src/sidebar/styles.css

@@ -0,0 +1,60 @@
+/* @import 'sakura.css'; */
+
+:root {
+  --sidebar-margin: 1rem;
+  --sidebar-bg: #0a0c10;
+  --sidebar-text: #c9c9c9;
+  --sidebar-link: #e5e7eb;
+  --sidebar-border: #c9c9c9;
+}
+
+body {
+  background-color: var(--sidebar-bg);
+  color: var(--sidebar-text);
+  height: 100vh;
+  margin: var(--sidebar-margin);
+  border-radius: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.sidebar_app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 1rem;
+  text-align: center;
+  max-height: 100vh;
+  overflow-y: auto;
+}
+
+.sidebar_logo {
+  width: 72px;
+  margin: 0 auto 1rem;
+}
+
+.sidebar_title {
+  font-size: 1.85em;
+  line-height: 1.1;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, "Noto Sans", sans-serif;
+  font-weight: 700;
+  margin: 0;
+  text-align: center;
+}
+
+.sidebar_description {
+  font-size: small;
+  margin: 0.5rem 0 0;
+  text-align: center;
+}
+
+.sidebar_description a {
+  text-decoration: none;
+  border-bottom: 2px solid var(--sidebar-border);
+  color: var(--sidebar-link);
+  margin: 0;
+}

package/dist/lib/progress.d.ts

@@ -1,12 +0,0 @@
-type ProgressOptions = {
-    enabled?: boolean;
-    intervalMs?: number;
-    width?: number;
-    persistLabel?: boolean;
-};
-type ProgressHandle = {
-    stop: () => void;
-};
-export declare function shouldShowProgress(): boolean;
-export declare function startProgressBar(label: string, options?: ProgressOptions): ProgressHandle;
-export {};