extension-create 4.1.18 → 4.1.20

package/README.md

@@ -47,7 +47,7 @@ Creates a new extension project with the specified configuration.
 
 - `projectName` (string, required) - The name of your extension project
 - `options` (object) - Configuration options
-  - `template` (string, optional) - Template name or URL. Defaults to `'javascript'` (`init` is an alias)
+  - `template` (string, optional) - Template name or URL. Defaults to `'javascript'` (`init` is an alias). A URL must use `https://`. A plain `http://` URL, and an `http://` value in `EXTENSION_CREATE_TEMPLATE_URL`, fails unless `EXTENSION_ALLOW_HTTP_TEMPLATE=true` is set
   - `install` (boolean, optional) - Whether to install dependencies after scaffolding. Defaults to `false` so project creation is fast and users see the familiar `npm install` output on their own.
   - `cliVersion` (string, optional) - CLI version for package.json
 

package/dist/lib/messages.d.ts

@@ -11,6 +11,7 @@ export declare function writingTypeDefinitionsError(error: unknown): string;
 export declare function installingFromTemplate(projectName: string, templateName: string): string;
 export declare function usingTemplate(templateName: string, source: string): string;
 export declare function installingFromTemplateError(template: string, error: unknown): string;
+export declare function templateUrlNotHttps(url: string): string;
 export declare function templateFetchTimedOut(templateName: string, ms: number): string;
 export declare function templateNotFoundInCatalog(templateName: string, error?: unknown): string;
 export declare function templateDownloadFailed(templateName: string, error: unknown): string;

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

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

package/dist/module.cjs

@@ -252,6 +252,9 @@ function usingTemplate(templateName, source) {
 function installingFromTemplateError(template, error) {
     return `${prefix('error')} Couldn't find the template ${external_pintor_default().blue(template)}.\n${fmt.label('REASON')} ${fmt.val(fmt.truncate(String(error)))}\n${external_pintor_default().red('Choose a template name from')} ${external_pintor_default().blue('extension create --help')}${external_pintor_default().red(', or pass a GitHub URL.')}`;
 }
+function templateUrlNotHttps(url) {
+    return `${prefix('error')} Can't download a template over plain HTTP.\n${fmt.label('GOT')} ${fmt.val(fmt.truncate(url, 120))}\n${external_pintor_default().red('- Use the')} ${external_pintor_default().blue('https://')} ${external_pintor_default().red('address of the template.')}\n${external_pintor_default().red('- Set')} ${external_pintor_default().blue('EXTENSION_ALLOW_HTTP_TEMPLATE=true')} ${external_pintor_default().red('to allow plain HTTP.')}`;
+}
 function templateFetchTimedOut(templateName, ms) {
     return `${prefix('error')} Couldn't fetch the template ${external_pintor_default().blue(templateName)} within ${Math.round(ms / 1000)}s.\n${external_pintor_default().red('- Check your network connection.')}\n${external_pintor_default().red('- Set')} ${external_pintor_default().blue('EXTENSION_CREATE_TIMEOUT_MS')} ${external_pintor_default().red('to allow more time.')}`;
 }
@@ -355,6 +358,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, {
@@ -606,7 +612,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 = '39448a235ea1b02516e6d555bcae409db2258b7f';
 const BUNDLED_TEMPLATES = [
     "javascript"
 ];
@@ -655,6 +661,29 @@ class TemplateNotFoundError extends Error {
         if (cause) this.cause = cause;
     }
 }
+class InsecureTemplateUrlError extends Error {
+    constructor(url){
+        super(`template URL is not https: ${url}`), _define_property(this, "url", void 0);
+        this.name = 'InsecureTemplateUrlError';
+        this.url = url;
+    }
+}
+function isRefusedHttpTemplateUrl(url) {
+    if ('true' === process.env.EXTENSION_ALLOW_HTTP_TEMPLATE) return false;
+    return /^http:\/\//i.test(url);
+}
+function refuseHttpRedirect(options) {
+    const target = String(options.href || `${options.protocol || ''}//`);
+    if (isRefusedHttpTemplateUrl(target)) throw new InsecureTemplateUrlError(target);
+}
+function findInsecureTemplateUrlError(error) {
+    let current = error;
+    for(let depth = 0; current && depth < 4; depth++){
+        if (current instanceof InsecureTemplateUrlError) return current;
+        current = current.cause;
+    }
+    return null;
+}
 class TemplateDownloadError extends Error {
     constructor(templateName, cause){
         const msg = cause?.message ?? String(cause);
@@ -674,11 +703,13 @@ async function downloadArchive(url, timeoutMs, attempts = 2) {
             timeout: timeoutMs,
             headers: {
                 'User-Agent': 'extension-create'
-            }
+            },
+            beforeRedirect: refuseHttpRedirect
         });
         return Buffer.from(data);
     } catch (error) {
         lastError = error;
+        if (findInsecureTemplateUrlError(error)) break;
         const status = error?.response?.status;
         const retriable = void 0 === status || 429 === status || status >= 500;
         if (attempt >= attempts || !retriable) break;
@@ -712,6 +743,7 @@ async function extractExamplesTemplateFromZip(zipBuffer, templateName, projectPa
 async function importFromExamplesCatalog(templateName, projectPath) {
     const ref = process.env.EXTENSION_CREATE_TEMPLATE_REF || DEFAULT_TEMPLATES_REF;
     const overrideUrl = process.env.EXTENSION_CREATE_TEMPLATE_URL || void 0;
+    if (overrideUrl && isRefusedHttpTemplateUrl(overrideUrl)) throw new InsecureTemplateUrlError(overrideUrl);
     const urls = resolveCatalogUrls(ref, overrideUrl);
     let buffer;
     let source;
@@ -721,6 +753,8 @@ async function importFromExamplesCatalog(templateName, projectPath) {
         source = candidate;
         break;
     } catch (error) {
+        const insecure = findInsecureTemplateUrlError(error);
+        if (insecure) throw insecure;
         lastError = error;
     }
     if (!buffer || !source) throw new TemplateDownloadError(templateName, lastError);
@@ -884,6 +918,7 @@ async function importExternalTemplate(projectPath, projectName, template, logger
     } catch  {}
     const ownerGitignore = dirExistedBeforeImport ? await readOwnerGitignore(projectPath) : null;
     try {
+        if (isRefusedHttpTemplateUrl(template)) throw new InsecureTemplateUrlError(template);
         await promises_namespaceObject.mkdir(projectPath, {
             recursive: true
         });
@@ -931,7 +966,8 @@ async function importExternalTemplate(projectPath, projectName, template, logger
             const { data, headers } = await external_axios_default().get(template, {
                 responseType: 'arraybuffer',
                 maxRedirects: 5,
-                timeout: NETWORK_TIMEOUT_MS
+                timeout: NETWORK_TIMEOUT_MS,
+                beforeRedirect: refuseHttpRedirect
             });
             const contentType = String(headers?.['content-type'] || '');
             const looksZip = /zip|octet-stream/i.test(contentType) || template.toLowerCase().endsWith('.zip');
@@ -974,7 +1010,9 @@ async function importExternalTemplate(projectPath, projectName, template, logger
                 return fallback;
             }
         }
-        if (error instanceof TemplateNotFoundError) logger.error(templateNotFoundInCatalog(templateName, error.cause));
+        const insecureUrl = findInsecureTemplateUrlError(error);
+        if (insecureUrl) logger.error(templateUrlNotHttps(insecureUrl.url));
+        else if (error instanceof TemplateNotFoundError) logger.error(templateNotFoundInCatalog(templateName, error.cause));
         else if (error instanceof TemplateDownloadError) logger.error(templateDownloadFailed(templateName, error));
         else logger.error(installingFromTemplateError(templateName, error));
         await cleanupFailedImport(projectPath, ownsProjectDir, preExistingEntries);
@@ -2100,7 +2138,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 = "39448a235ea1b02516e6d555bcae409db2258b7f";
 export declare const BUNDLED_TEMPLATES: readonly string[];
 export declare const DEFAULT_TEMPLATE_NAME = "typescript";
 export declare const OFFLINE_FALLBACK_TEMPLATE = "javascript";
@@ -14,6 +14,15 @@ export declare class TemplateNotFoundError extends Error {
     readonly templateName: string;
     constructor(templateName: string, cause?: unknown);
 }
+export declare class InsecureTemplateUrlError extends Error {
+    readonly url: string;
+    constructor(url: string);
+}
+export declare function isRefusedHttpTemplateUrl(url: string): boolean;
+export declare function refuseHttpRedirect(options: {
+    protocol?: string;
+    href?: string;
+}): void;
 export declare class TemplateDownloadError extends Error {
     readonly templateName: string;
     constructor(templateName: string, cause: unknown);

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.17",
+  "createdWith": "extension-create@4.1.19",
   "template": "typescript",
-  "source": "https://codeload.github.com/extension-js/examples/zip/e552f6db6f2862093ba9d7026e0d376f002d95cc",
-  "ref": "e552f6db6f2862093ba9d7026e0d376f002d95cc"
+  "source": "https://codeload.github.com/extension-js/examples/zip/39448a235ea1b02516e6d555bcae409db2258b7f",
+  "ref": "39448a235ea1b02516e6d555bcae409db2258b7f"
 }

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-14
+Last updated: 2026-09-16
 
 ## 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.17"
+    "extension": "^4.1.19"
   },
   "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/sidebar/styles.css

@@ -11,7 +11,9 @@
 body {
   background-color: var(--sidebar-bg);
   color: var(--sidebar-text);
-  height: 100vh;
+  /* 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,7 +28,7 @@ body {
   align-items: center;
   padding: 0 1rem;
   text-align: center;
-  max-height: 100vh;
+  max-height: 100%;
   overflow-y: auto;
 }
 
@@ -39,8 +41,8 @@ body {
   font-size: 1.85em;
   line-height: 1.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;
   font-weight: 700;
   margin: 0;
   text-align: center;

package/package.json

@@ -25,7 +25,7 @@
     "templates"
   ],
   "name": "extension-create",
-  "version": "4.1.18",
+  "version": "4.1.20",
   "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/sidebar/styles.css

@@ -11,7 +11,9 @@
 body {
   background-color: var(--sidebar-bg);
   color: var(--sidebar-text);
-  height: 100vh;
+  /* 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,7 +28,7 @@ body {
   align-items: center;
   padding: 0 1rem;
   text-align: center;
-  max-height: 100vh;
+  max-height: 100%;
   overflow-y: auto;
 }
 
@@ -39,8 +41,8 @@ body {
   font-size: 1.85em;
   line-height: 1.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;
   font-weight: 700;
   margin: 0;
   text-align: center;