Documentation Index
Fetch the complete documentation index at: https://extension.js.org/llms.txt
Use this file to discover all available pages before exploring further.
Browser extensions use JavaScript, TypeScript, HTML, CSS, and a manifest.json to define behavior, UI, permissions, and browser integration. This page covers the file extensions you will see in a browser extension project and which ones land where.
If you are looking for “extension” as in a software add-on for Chrome or Firefox, start at What is a browser extension? instead.
JavaScript file extensions: .js and .mjs
Browser extensions accept the same JavaScript file extensions the rest of the web platform uses:
| File extension | What it means |
|---|
.js | Plain JavaScript. Treated as ES module or classic script depending on how it is loaded. |
.mjs | ES module. Useful when you want to force module semantics, especially in service workers. |
.cjs | CommonJS. Rare in extension source code; sometimes appears in extension.config.cjs. |
service_worker runs as a module when manifest.json includes "type": "module" in the background block. See Manifest V3 troubleshooting for the details.
TypeScript file extensions: .ts and .tsx
TypeScript works as a first-class source language in Extension.js:
| File extension | What it means |
|---|
.ts | TypeScript without JSX. |
.tsx | TypeScript with JSX (React, Preact). |
.d.ts | Type declaration file. Not emitted to the build output. |
tsconfig.json from scratch. Extension.js ships sensible defaults. Types for chrome.*, browser.*, import.meta.env, and the public env keys come from @types/chrome and Extension.js’s own ambient types. See TypeScript.
React file extensions: .jsx and .tsx
React in a browser extension uses the standard JSX file extensions:
| File extension | What it means |
|---|
.jsx | JavaScript with JSX. |
.tsx | TypeScript with JSX. |
Browser extension files: manifest.json, background, content scripts, pages
Beyond JavaScript and TypeScript source, a browser extension folder usually contains:
| File or folder | Purpose |
|---|
manifest.json | Declares name, version, permissions, entry points, and metadata. |
| Background entry | Long-lived event handler. Manifest V3 service worker on Chromium. |
| Content scripts | Code injected into web pages matching a URL pattern. |
| Extension pages | Popup, options, side panel, or new-tab HTML. |
| Locales | _locales/<lang>/messages.json for translated strings. |
| Icons and assets | Toolbar icons, web-accessible resources, fonts, images. |
.ts, .tsx, .jsx, .vue, .svelte, .css, .less, .scss, and .module.* source down to that on-disk layout. It produces a separate folder per browser target (dist/chrome, dist/firefox, dist/edge).
How Extension.js compiles JavaScript and TypeScript extensions
When you run extension dev or extension build, Extension.js:
- Reads
manifest.json and finds every entry point (background, content scripts, popup, options, side panel, new-tab, web-accessible HTML).
- Resolves source files referenced from those entries, including imports across
.ts, .tsx, .jsx, .vue, .svelte, and stylesheet types.
- Compiles through Rspack with extension-aware defaults: code splitting where it helps, no chunking where the browser refuses it (service workers, content scripts).
- Emits the result into
dist/<browser> with a manifest filtered for that target.
You write source in any of the file extensions above. Extension.js handles the bundling, polyfills, reload-on-save loop, and per-browser packaging.
Next steps
