extension-create 4.0.0 → 4.0.1

package/dist/module.cjs

@@ -332,6 +332,16 @@ async function withSuppressedOutput(task) {
 function bundledTemplateDir(templateName) {
     return external_path_namespaceObject.join(__dirname, '..', 'templates', templateName);
 }
+const TEMPLATE_SCAFFOLDING_FILES = [
+    'template.meta.json',
+    'template.spec.ts',
+    'screenshot.png'
+];
+async function removeTemplateScaffoldingFiles(projectPath) {
+    await Promise.all(TEMPLATE_SCAFFOLDING_FILES.map((name)=>promises_namespaceObject.rm(external_path_namespaceObject.join(projectPath, name), {
+            force: true
+        })));
+}
 function getArchiveBaseName(url) {
     const withoutQuery = url.split('?')[0];
     const fileName = external_path_namespaceObject.basename(withoutQuery);
@@ -368,7 +378,11 @@ async function importExternalTemplate(projectPath, projectName, template, logger
         });
         if (!isHttp && !isGithub && "javascript" === resolvedTemplate) {
             const localTemplate = bundledTemplateDir("javascript");
-            if ((0, external_fs_namespaceObject.existsSync)(localTemplate)) return void await copyDirectoryWithSymlinks(localTemplate, projectPath);
+            if ((0, external_fs_namespaceObject.existsSync)(localTemplate)) {
+                await copyDirectoryWithSymlinks(localTemplate, projectPath);
+                await removeTemplateScaffoldingFiles(projectPath);
+                return;
+            }
         }
         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');
@@ -404,6 +418,7 @@ async function importExternalTemplate(projectPath, projectName, template, logger
             const srcPath = external_path_namespaceObject.join(tempPath, resolvedTemplateName);
             await moveDirectoryContents(srcPath, projectPath);
         }
+        await removeTemplateScaffoldingFiles(projectPath);
         await promises_namespaceObject.rm(tempRoot, {
             recursive: true,
             force: true

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

@@ -1,3 +1,5 @@
+export declare const TEMPLATE_SCAFFOLDING_FILES: string[];
+export declare function removeTemplateScaffoldingFiles(projectPath: string): Promise<void>;
 export declare function importExternalTemplate(projectPath: string, projectName: string, template: string, logger: {
     log(...args: any[]): void;
     error(...args: any[]): void;

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

@@ -0,0 +1,41 @@
+<a href="https://extension.js.org" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/Powered%20by%20%7C%20Extension.js-0971fe" alt="Powered by Extension.js" align="right" /></a>
+
+# test-template-javascript
+
+> JavaScript-based extension with a sidebar panel. Adds a sidebar with a simple page.
+
+
+![screenshot](./public/screenshot.png)
+## Commands
+
+### dev
+
+Run the extension in development mode. Target a browser with `--browser`:
+
+```bash
+pnpm run dev
+pnpm run dev -- --browser=firefox
+pnpm run dev -- --browser=edge
+```
+
+### build
+
+Build for production. Convenience scripts target each browser:
+
+```bash
+pnpm run build           # Chrome (default)
+pnpm run build:firefox
+pnpm run build:edge
+```
+
+### preview
+
+Preview the production build in the browser:
+
+```bash
+pnpm run preview
+```
+
+## Learn more
+
+[Extension.js docs](https://extension.js.org).

package/dist/test-template-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/dist/test-template-javascript/package.json

@@ -0,0 +1,27 @@
+{
+  "private": true,
+  "name": "test-template-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": "Your Name",
+    "email": "your@email.com",
+    "url": "https://yourwebsite.com"
+  },
+  "scripts": {
+    "dev": "extension dev",
+    "start": "extension start",
+    "build": "extension build",
+    "preview": "extension preview",
+    "build:chrome": "extension build --browser chrome",
+    "build:firefox": "extension build --browser firefox",
+    "build:edge": "extension build --browser edge"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "extension": "latest"
+  },
+  "packageManager": "pnpm@10.28.0"
+}

package/dist/test-template-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/dist/test-template-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/dist/test-template-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/dist/test-template-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/dist/test-template-javascript/src/manifest.json

@@ -0,0 +1,63 @@
+{
+  "$schema": "https://json.schemastore.org/chrome-manifest.json",
+  "chromium:manifest_version": 3,
+  "firefox:manifest_version": 2,
+  "version": "1.0.0",
+  "name": "test-template-javascript",
+  "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"
+      ]
+    }
+  ],
+  "author": "Your Name"
+}

package/dist/test-template-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/dist/test-template-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/dist/test-template-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/dist/test-template-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/package.json

@@ -25,7 +25,7 @@
     "templates"
   ],
   "name": "extension-create",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "The standalone extension creation engine for Extension.js",
   "author": {
     "name": "Cezar Augusto",
@@ -47,6 +47,8 @@
     "format": "biome format --write .",
     "lint": "biome lint .",
     "pretest:create": "pnpm compile",
+    "pretest": "pnpm compile",
+    "test": "vitest run",
     "test:create": "vitest run",
     "test:coverage": "vitest run --coverage"
   },
@@ -87,7 +89,7 @@
     "@types/adm-zip": "^0.5.7",
     "@types/chrome": "^0.1.33",
     "@types/cross-spawn": "^6.0.6",
-    "@types/node": "^22",
+    "@types/node": "^26",
     "@types/webextension-polyfill": "0.12.4",
     "@vitest/coverage-v8": "^4.1.9",
     "tsconfig": "*",

package/templates/README.md

@@ -0,0 +1,3 @@
+# Extension.js templates
+
+For more templates, check the [examples repo](https://github.com/extension-js/examples/tree/main/examples).