extension-create 4.1.19 → 4.1.21

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

@@ -3,6 +3,7 @@ declare const NODE_PACKAGE_MANAGERS: readonly ['pnpm', 'yarn', 'bun', 'npm'];
 type NodePackageManager = (typeof NODE_PACKAGE_MANAGERS)[number];
 export declare function detectPackageManagerFromEnv(): NodePackageManager;
 export declare function isDenoRuntime(): boolean;
+export declare function isBunRuntime(): boolean;
 export type ScaffoldPackageManager = 'npm' | 'yarn' | 'pnpm' | 'bun' | 'deno';
 export declare function resolveScaffoldPackageManager(): ScaffoldPackageManager;
 export declare function resolveProjectPackageManager(projectPath: string): ScaffoldPackageManager;

package/dist/lib/project-name.d.ts

@@ -0,0 +1 @@
+export declare function isUrlProjectName(projectNameInput: string): boolean;

package/dist/module.cjs

@@ -136,8 +136,12 @@ function detectPackageManagerFromEnv() {
 function isDenoRuntime() {
     return void 0 !== globalThis.Deno || Boolean(process.versions?.deno);
 }
+function isBunRuntime() {
+    return void 0 !== globalThis.Bun || Boolean(process.versions?.bun);
+}
 function resolveScaffoldPackageManager() {
     if (isDenoRuntime()) return 'deno';
+    if (isBunRuntime()) return 'bun';
     return detectPackageManagerFromEnv();
 }
 function resolveProjectPackageManager(projectPath) {
@@ -145,6 +149,7 @@ function resolveProjectPackageManager(projectPath) {
     const pinned = readPinnedPackageManager(projectPath);
     if (pinned) return pinned;
     if (external_node_fs_namespaceObject.existsSync(external_node_path_namespaceObject.join(projectPath, 'pnpm-workspace.yaml'))) return 'pnpm';
+    if (isBunRuntime()) return 'bun';
     return detectPackageManagerFromEnv();
 }
 function readPinnedPackageManager(projectPath) {
@@ -358,6 +363,9 @@ function keepingExistingGitignore(projectName) {
 function existingRepositoryKept(projectName) {
     return `${prefix('info')} ${external_pintor_default().blue(projectName)} is already a git repository with history.\nLeft it uncommitted. Review the scaffold and run ${external_pintor_default().blue('git add -A && git commit')} yourself.`;
 }
+function isUrlProjectName(projectNameInput) {
+    return /^https?:\/\//i.test(projectNameInput.trim());
+}
 const promises_namespaceObject = require("node:fs/promises");
 async function copyDirectoryWithSymlinks(source, destination) {
     const entries = await promises_namespaceObject.readdir(source, {
@@ -609,7 +617,7 @@ const NETWORK_TIMEOUT_MS = (()=>{
     return Number.isFinite(raw) && raw > 0 ? raw : 60000;
 })();
 const CODELOAD_BASE = 'https://codeload.github.com/extension-js/examples/zip';
-const DEFAULT_TEMPLATES_REF = 'e552f6db6f2862093ba9d7026e0d376f002d95cc';
+const DEFAULT_TEMPLATES_REF = '06d33e35894516a460409dca06d1614e291e6252';
 const BUNDLED_TEMPLATES = [
     "javascript"
 ];
@@ -2135,7 +2143,7 @@ async function extensionCreate(projectNameInput, { cliVersion, template, install
     if (!projectNameInput) throw new Error(noProjectName());
     const templateWasOmitted = null == template || '' === String(template).trim();
     const effectiveTemplate = templateWasOmitted ? DEFAULT_TEMPLATE_NAME : String(template);
-    if (projectNameInput.startsWith('http')) throw new Error(noUrlAllowed());
+    if (isUrlProjectName(projectNameInput)) throw new Error(noUrlAllowed());
     const projectPath = external_node_path_namespaceObject.isAbsolute(projectNameInput) ? projectNameInput : external_node_path_namespaceObject.join(process.cwd(), projectNameInput);
     const projectName = external_node_path_namespaceObject.basename(projectPath);
     const updateSuffix = process.env.EXTENSION_CLI_UPDATE_SUFFIX || '';

package/dist/steps/import-external-template.d.ts

@@ -1,4 +1,4 @@
-export declare const DEFAULT_TEMPLATES_REF = "e552f6db6f2862093ba9d7026e0d376f002d95cc";
+export declare const DEFAULT_TEMPLATES_REF = "06d33e35894516a460409dca06d1614e291e6252";
 export declare const BUNDLED_TEMPLATES: readonly string[];
 export declare const DEFAULT_TEMPLATE_NAME = "typescript";
 export declare const OFFLINE_FALLBACK_TEMPLATE = "javascript";

package/dist/steps/write-package-json.d.ts

@@ -2,10 +2,8 @@ import { type ScaffoldPackageManager } from '../lib/package-manager.js';
 export declare function resolveExtensionBinary(): Promise<string>;
 export declare function getTemplateAwareScripts(template: string, extensionBinary: string): Record<string, string>;
 interface OverridePackageJsonOptions {
-    /** Defaults to `javascript` when omitted (same as `extensionCreate`). */
     template?: string;
     cliVersion?: string;
-    /** The one manager the project uses; resolved from the scaffold when omitted. */
     packageManager?: ScaffoldPackageManager;
 }
 export declare function resolveExtensionDevDependencyVersion(cliVersion?: string): string;

package/dist/test-template-javascript/.extension-create.json

@@ -1,6 +1,6 @@
 {
-  "createdWith": "extension-create@4.1.18",
+  "createdWith": "extension-create@4.1.20",
   "template": "typescript",
-  "source": "https://codeload.github.com/extension-js/examples/zip/e552f6db6f2862093ba9d7026e0d376f002d95cc",
-  "ref": "e552f6db6f2862093ba9d7026e0d376f002d95cc"
+  "source": "https://codeload.github.com/extension-js/examples/zip/06d33e35894516a460409dca06d1614e291e6252",
+  "ref": "06d33e35894516a460409dca06d1614e291e6252"
 }

package/dist/test-template-javascript/STORE.md

@@ -9,7 +9,7 @@ Packaging your extension is local and free. Submitting the result to a
 store is what [extension.dev](https://docs.extension.dev/publish/overview?utm_source=store-md)
 does, and it sponsors Extension.js.
 
-Last updated: 2026-09-15
+Last updated: 2026-09-17
 
 ## Listing
 

package/dist/test-template-javascript/package.json

@@ -8,7 +8,7 @@
   "devDependencies": {
     "@types/chrome": "^0.0.287",
     "typescript": "7.0.2",
-    "extension": "^4.1.18"
+    "extension": "^4.1.20"
   },
   "scripts": {
     "dev": "extension dev",

package/dist/test-template-javascript/src/background.ts

@@ -6,22 +6,61 @@ const isFirefoxLike =
   import.meta.env.EXTENSION_PUBLIC_BROWSER === 'firefox' ||
   import.meta.env.EXTENSION_PUBLIC_BROWSER === 'gecko-based'
 
+const isSafariLike =
+  import.meta.env.EXTENSION_PUBLIC_BROWSER === 'safari' ||
+  import.meta.env.EXTENSION_PUBLIC_BROWSER === 'webkit-based'
+
+// Safari has no side panel surface, so the sidebar page opens in a tab.
+let sidebarTabId: number | undefined
+
+function openSidebarTab() {
+  const url = chrome.runtime.getURL('sidebar/index.html')
+
+  const openNewTab = () => {
+    chrome.tabs.create({url}, (tab) => {
+      sidebarTabId = tab?.id
+    })
+  }
+
+  // A repeat click focuses the tab already opened instead of a new copy.
+  const knownTabId = sidebarTabId
+
+  if (knownTabId === undefined) {
+    openNewTab()
+
+    return
+  }
+
+  chrome.tabs.update(knownTabId, {active: true}, () => {
+    if (chrome.runtime.lastError) openNewTab()
+  })
+}
+
 if (isFirefoxLike) {
+  // Firefox refuses sidebarAction.open() outside a user input handler, and a
+  // message listener is not one, so the toolbar click is the only route.
   browser.browserAction.onClicked.addListener(() => {
     browser.sidebarAction.open()
   })
+}
 
-  browser.runtime.onMessage.addListener((message: any) => {
+if (isSafariLike) {
+  // Safari never had setPanelBehavior, so the toolbar click needs a listener.
+  chrome.action?.onClicked.addListener(() => {
+    openSidebarTab()
+  })
+
+  chrome.runtime.onMessage.addListener((message) => {
     if (!message || message.type !== 'openSidebar') return
 
-    browser.sidebarAction.open()
+    openSidebarTab()
   })
 }
 
-if (!isFirefoxLike) {
+if (!isFirefoxLike && !isSafariLike) {
   // setPanelBehavior only affects FUTURE action clicks, registering it
   // inside onClicked would swallow the first toolbar click.
-  chrome.sidePanel.setPanelBehavior({openPanelOnActionClick: true})
+  chrome.sidePanel?.setPanelBehavior({openPanelOnActionClick: true})
 
   // The side panel API only exists in Chromium. Firefox opens the sidebar in
   // the listener above, so this listener is compiled out of gecko builds.
@@ -32,13 +71,13 @@ if (!isFirefoxLike) {
     // allowed inside the user gesture that the content-script click carries, and
     // a tabs.query callback outlives it: the panel then silently refuses to open.
     // sender.tab is the tab the click came from, so no lookup is needed at all.
-    chrome.sidePanel.setPanelBehavior({openPanelOnActionClick: true})
+    chrome.sidePanel?.setPanelBehavior({openPanelOnActionClick: true})
 
     const tabId = sender.tab?.id
-    if (!chrome.sidePanel.open || tabId === undefined) return
+    if (!chrome.sidePanel?.open || tabId === undefined) return
 
     try {
-      chrome.sidePanel.open({tabId})
+      chrome.sidePanel?.open({tabId})
     } catch (error) {
       console.error(error)
     }

package/dist/test-template-javascript/src/content/ContentApp.ts

@@ -1,20 +1,27 @@
 import logo from '../images/icon.png'
 
+const isFirefoxLike =
+  import.meta.env.EXTENSION_PUBLIC_BROWSER === 'firefox' ||
+  import.meta.env.EXTENSION_PUBLIC_BROWSER === 'gecko-based'
+
 export default function createContentApp(): HTMLDivElement {
   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', () => {
-    if (import.meta.env.EXTENSION_PUBLIC_BROWSER === 'firefox') {
-      browser.runtime.sendMessage({type: 'openSidebar'})
-    } else {
+  // Firefox cannot open a sidebar from a message listener, so the gecko build
+  // renders a hint naming the toolbar action instead of a dead control.
+  const pill = document.createElement(isFirefoxLike ? 'div' : 'button')
+  pill.className = isFirefoxLike
+    ? 'content_pill content_pill_static'
+    : 'content_pill'
+
+  if (!isFirefoxLike) {
+    ;(pill as HTMLButtonElement).type = 'button'
+    pill.setAttribute('aria-label', 'Open sidebar')
+    pill.addEventListener('click', () => {
       chrome.runtime.sendMessage({type: 'openSidebar'})
-    }
-  })
+    })
+  }
 
   const img = document.createElement('img')
   img.className = 'content_pill_logo'
@@ -26,7 +33,9 @@ export default function createContentApp(): HTMLDivElement {
 
   const text = document.createElement('span')
   text.className = 'content_pill_text'
-  text.textContent = 'Open sidebar'
+  text.textContent = isFirefoxLike
+    ? 'Use the toolbar icon to open the sidebar'
+    : 'Open sidebar'
 
   pill.appendChild(img)
   pill.appendChild(text)

package/dist/test-template-javascript/src/content/scripts.ts

@@ -40,5 +40,6 @@ 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/dist/test-template-javascript/src/content/styles.css

@@ -22,7 +22,7 @@
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
 }
 
-.content_pill:hover {
+.content_pill:not(.content_pill_static):hover {
   background: #11151c;
 }
 
@@ -40,6 +40,12 @@
   font-weight: 600;
   line-height: 1;
   font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, "Noto Sans", sans-serif;
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, 'Noto Sans', sans-serif;
+}
+
+/* The gecko build renders this hint in place of the pill, so it must not read
+   as a control: no pointer cursor and no hover response. */
+.content_pill_static {
+  cursor: default;
 }

package/dist/test-template-javascript/src/manifest.json

@@ -48,7 +48,8 @@
   },
   "firefox:sidebar_action": {
     "default_panel": "sidebar/index.html",
-    "default_title": "Side Panel Content"
+    "default_title": "Side Panel Content",
+    "browser_style": false
   },
   "chromium:permissions": [
     "sidePanel"

package/dist/test-template-javascript/src/sidebar/styles.css

@@ -11,7 +11,12 @@
 body {
   background-color: var(--sidebar-bg);
   color: var(--sidebar-text);
-  height: 100vh;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, 'Noto Sans', sans-serif;
+  /* The margin insets the panel, so a full-viewport height would push the
+     content below centre and overflow the panel by twice the margin. */
+  height: calc(100vh - 2 * var(--sidebar-margin));
   margin: var(--sidebar-margin);
   border-radius: 6px;
   display: flex;
@@ -26,11 +31,12 @@ body {
   align-items: center;
   padding: 0 1rem;
   text-align: center;
-  max-height: 100vh;
+  max-height: 100%;
   overflow-y: auto;
 }
 
 .sidebar_logo {
+  display: block;
   width: 72px;
   margin: 0 auto 1rem;
 }
@@ -38,9 +44,6 @@ body {
 .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;

package/package.json

@@ -25,7 +25,7 @@
     "templates"
   ],
   "name": "extension-create",
-  "version": "4.1.19",
+  "version": "4.1.21",
   "description": "The standalone extension creation engine for Extension.js",
   "author": {
     "name": "Cezar Augusto",
@@ -45,7 +45,7 @@
     "watch": "rslib build --watch",
     "compile": "rslib build",
     "format": "biome format --write .",
-    "lint": "biome lint .",
+    "lint": "biome lint . && eslint .",
     "pretest:create": "pnpm compile",
     "pretest": "pnpm compile",
     "test": "vitest run",

package/templates/javascript/src/background.js

@@ -6,22 +6,61 @@ const isFirefoxLike =
   import.meta.env.EXTENSION_PUBLIC_BROWSER === 'firefox' ||
   import.meta.env.EXTENSION_PUBLIC_BROWSER === 'gecko-based'
 
+const isSafariLike =
+  import.meta.env.EXTENSION_PUBLIC_BROWSER === 'safari' ||
+  import.meta.env.EXTENSION_PUBLIC_BROWSER === 'webkit-based'
+
+// Safari has no side panel surface, so the sidebar page opens in a tab.
+let sidebarTabId
+
+function openSidebarTab() {
+  const url = chrome.runtime.getURL('sidebar/index.html')
+
+  const openNewTab = () => {
+    chrome.tabs.create({url}, (tab) => {
+      sidebarTabId = tab?.id
+    })
+  }
+
+  // A repeat click focuses the tab already opened instead of a new copy.
+  const knownTabId = sidebarTabId
+
+  if (knownTabId === undefined) {
+    openNewTab()
+
+    return
+  }
+
+  chrome.tabs.update(knownTabId, {active: true}, () => {
+    if (chrome.runtime.lastError) openNewTab()
+  })
+}
+
 if (isFirefoxLike) {
+  // Firefox refuses sidebarAction.open() outside a user input handler, and a
+  // message listener is not one, so the toolbar click is the only route.
   browser.browserAction.onClicked.addListener(() => {
     browser.sidebarAction.open()
   })
+}
 
-  browser.runtime.onMessage.addListener((message) => {
+if (isSafariLike) {
+  // Safari never had setPanelBehavior, so the toolbar click needs a listener.
+  chrome.action?.onClicked.addListener(() => {
+    openSidebarTab()
+  })
+
+  chrome.runtime.onMessage.addListener((message) => {
     if (!message || message.type !== 'openSidebar') return
 
-    browser.sidebarAction.open()
+    openSidebarTab()
   })
 }
 
-if (!isFirefoxLike) {
+if (!isFirefoxLike && !isSafariLike) {
   // setPanelBehavior only affects FUTURE action clicks, registering it
   // inside onClicked would swallow the first toolbar click.
-  chrome.sidePanel.setPanelBehavior({openPanelOnActionClick: true})
+  chrome.sidePanel?.setPanelBehavior({openPanelOnActionClick: true})
 
   // The side panel API only exists in Chromium. Firefox opens the sidebar in
   // the listener above, so this listener is compiled out of gecko builds.
@@ -32,13 +71,13 @@ if (!isFirefoxLike) {
     // allowed inside the user gesture that the content-script click carries, and
     // a tabs.query callback outlives it: the panel then silently refuses to open.
     // sender.tab is the tab the click came from, so no lookup is needed at all.
-    chrome.sidePanel.setPanelBehavior({openPanelOnActionClick: true})
+    chrome.sidePanel?.setPanelBehavior({openPanelOnActionClick: true})
 
     const tabId = sender.tab?.id
-    if (!chrome.sidePanel.open || tabId === undefined) return
+    if (!chrome.sidePanel?.open || tabId === undefined) return
 
     try {
-      chrome.sidePanel.open({tabId})
+      chrome.sidePanel?.open({tabId})
     } catch (error) {
       console.error(error)
     }

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

@@ -1,27 +1,31 @@
 import logo from '../images/icon.png'
 
+const isFirefoxLike =
+  import.meta.env.EXTENSION_PUBLIC_BROWSER === 'firefox' ||
+  import.meta.env.EXTENSION_PUBLIC_BROWSER === 'gecko-based'
+
 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 {
+  // Firefox cannot open a sidebar from a message listener, so the gecko build
+  // renders a hint naming the toolbar action instead of a dead control.
+  const pill = document.createElement(isFirefoxLike ? 'div' : 'button')
+  pill.className = isFirefoxLike
+    ? 'content_pill content_pill_static'
+    : 'content_pill'
+
+  if (!isFirefoxLike) {
+    pill.type = 'button'
+    pill.setAttribute('aria-label', 'Open sidebar')
+    pill.addEventListener('click', () => {
+      try {
         chrome.runtime.sendMessage({type: 'openSidebar'})
+      } catch (error) {
+        console.error(error)
       }
-    } catch (error) {
-      console.error(error)
-    }
-  })
+    })
+  }
 
   const img = document.createElement('img')
   img.className = 'content_pill_logo'
@@ -31,7 +35,9 @@ export default function createContentApp() {
 
   const text = document.createElement('span')
   text.className = 'content_pill_text'
-  text.textContent = 'Open sidebar'
+  text.textContent = isFirefoxLike
+    ? 'Use the toolbar icon to open the sidebar'
+    : 'Open sidebar'
 
   pill.appendChild(img)
   pill.appendChild(text)

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

@@ -40,5 +40,6 @@ 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

@@ -22,7 +22,7 @@
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
 }
 
-.content_pill:hover {
+.content_pill:not(.content_pill_static):hover {
   background: #11151c;
 }
 
@@ -40,6 +40,12 @@
   font-weight: 600;
   line-height: 1;
   font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, "Noto Sans", sans-serif;
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, 'Noto Sans', sans-serif;
+}
+
+/* The gecko build renders this hint in place of the pill, so it must not read
+   as a control: no pointer cursor and no hover response. */
+.content_pill_static {
+  cursor: default;
 }

package/templates/javascript/src/manifest.json

@@ -46,7 +46,8 @@
   },
   "firefox:sidebar_action": {
     "default_panel": "sidebar/index.html",
-    "default_title": "Side Panel Content"
+    "default_title": "Side Panel Content",
+    "browser_style": false
   },
   "chromium:permissions": ["sidePanel"],
   "background": {

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

@@ -11,7 +11,12 @@
 body {
   background-color: var(--sidebar-bg);
   color: var(--sidebar-text);
-  height: 100vh;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, 'Noto Sans', sans-serif;
+  /* The margin insets the panel, so a full-viewport height would push the
+     content below centre and overflow the panel by twice the margin. */
+  height: calc(100vh - 2 * var(--sidebar-margin));
   margin: var(--sidebar-margin);
   border-radius: 6px;
   display: flex;
@@ -26,11 +31,12 @@ body {
   align-items: center;
   padding: 0 1rem;
   text-align: center;
-  max-height: 100vh;
+  max-height: 100%;
   overflow-y: auto;
 }
 
 .sidebar_logo {
+  display: block;
   width: 72px;
   margin: 0 auto 1rem;
 }
@@ -38,9 +44,6 @@ body {
 .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;