Manifest

CRXJS parses the manifest file to discover the entry files used by your extension.

Manifest Configuration

CRXJS exports a helper function called defineManifest. It's similar to Vite's defineConfig and supports autocompletion and dynamic or asynchronous definitions.

Basic Usage

manifest.config.ts
import { defineManifest } from '@crxjs/vite-plugin'

export default defineManifest({
  manifest_version: 3,
  name: 'CRXJS from scratch',
  version: '1.0.0',
  action: {
    default_popup: 'index.html',
  },
})

Path Resolution Rules

1. Base Definition

All manifest resource configuration paths are resolved relative to the Vite project root directory (i.e., the directory where vite.config.ts is located).

2. Correct Configuration Example

manifest.json
{
  "options_page": "options.html",
  "devtools_page": "pages/devtools.html"
}

Features:

  • Uses simple relative paths (no ./ prefix required)
  • Supports multi-level directory nesting

3. Common Error Patterns

manifest.json
{
  "options_page": "./src/options.html",
  "devtools_page": "/Users/project/pages/devtools.html"
}

Prohibited behaviors:

  • Using path modifiers like ./ or ../
  • Hardcoding operating system-level absolute paths
Edit this page
Packaging
Packaging your CRXJS project for distribution.
Pages
The manifest can declare the most common pages, such as the action popup and the options page, but not every extension page has a place in the manifest.