The CrxPlugin type extends Vite’s VitePlugin interface with additional hooks specific to Chrome extension development.
Import
import type { CrxPlugin } from '@crxjs/vite-plugin'
Type Definition
interface CrxPlugin extends VitePlugin {
/**
* Runs during the transform hook for the manifest. Filenames use input
* filenames.
*/
transformCrxManifest?: (
this: PluginContext,
manifest: ManifestV3,
) => Promise<ManifestV3 | null | undefined> | ManifestV3 | null | undefined
/**
* Runs during generateBundle, before manifest output. Filenames use output
* filenames.
*/
renderCrxManifest?: (
this: PluginContext,
manifest: ManifestV3,
bundle: OutputBundle,
) => Promise<ManifestV3 | null | undefined> | ManifestV3 | null | undefined
/**
* Runs in the file writer on content scripts during development. `script.id`
* is Vite URL format.
*/
renderCrxDevScript?: (
code: string,
script: CrxDevScriptId,
) => Promise<string | null | undefined> | string | null | undefined
}
Hooks
Transform the manifest during the Vite transform phase.
Rollup plugin context providing access to plugin utilities and state
The manifest object with input filenames (before bundling)
return
Promise<ManifestV3 | null | undefined> | ManifestV3 | null | undefined
Return the transformed manifest, or null/undefined to skip
renderCrxManifest
Render the final manifest with output filenames during bundle generation.
Rollup plugin context providing access to plugin utilities and state
The manifest object with output filenames (after bundling)
Rollup’s output bundle containing all generated files
return
Promise<ManifestV3 | null | undefined> | ManifestV3 | null | undefined
Return the transformed manifest, or null/undefined to skip
renderCrxDevScript
Transform script code during development before writing to disk.
The transformed script code from Vite
Script metadata with id (Vite URL) and type ('module' or 'iife')
return
Promise<string | null | undefined> | string | null | undefined
Return the transformed code, or null/undefined to skip
CrxDevScriptId
type CrxDevScriptId = {
id: string // Script identifier in Vite URL format
type: 'module' | 'iife' // Output format
}
CrxDevAssetId
type CrxDevAssetId = {
id: string // Asset identifier
type: 'asset' // Asset type
source?: string | Uint8Array // Optional asset source
}
Usage Example
import type { CrxPlugin } from '@crxjs/vite-plugin'
const myPlugin: CrxPlugin = {
name: 'my-crx-plugin',
transformCrxManifest(manifest) {
// Add permissions during transform phase
return {
...manifest,
permissions: [
...(manifest.permissions || []),
'storage'
]
}
},
renderCrxManifest(manifest, bundle) {
// Final modifications with output filenames
const cssFiles = Object.keys(bundle)
.filter(file => file.endsWith('.css'))
return {
...manifest,
web_accessible_resources: [
{
resources: cssFiles,
matches: ['<all_urls>']
}
]
}
},
renderCrxDevScript(code, script) {
// Inject code into development scripts
if (script.type === 'module') {
return `console.log('Loading: ${script.id}');\n${code}`
}
return code
}
}
export default myPlugin
See Also
CrxPlugin Interface
Detailed documentation on CrxPlugin hooks and usage
ManifestV3
Complete TypeScript interface for Manifest V3
CrxOptions
Configuration options for the CRXJS plugin