Skip to main content
The CrxOptions interface defines configuration options for customizing the behavior of the CRXJS Vite Plugin.

​
Import

import type { CrxOptions } from '@crxjs/vite-plugin'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

const options: CrxOptions = {
  browser: 'chrome',
  contentScripts: {
    hmrTimeout: 5000
  }
}

export default defineConfig({
  plugins: [crx({ manifest, ...options })]
})

​
Options

​
browser
Browser
Target browser for the extension. Can be "chrome" or "firefox". Default is "chrome".This affects how the manifest is processed and which browser-specific features are enabled.
type Browser = 'firefox' | 'chrome'
​
contentScripts
ContentScriptsOptions
Configuration options for content script behavior during development.
​
fastGlobOptions
FastGlobOptions
Options passed to fast-glob when resolving file patterns in the manifest.Useful for customizing how files are matched (e.g., ignore patterns, follow symlinks, etc.).

​
ContentScriptsOptions

​
contentScripts.preambleCode
string | false
Custom code to inject at the beginning of every content script during development.Set to false to disable the default preamble code that CRXJS injects for HMR support.
{
  contentScripts: {
    preambleCode: 'console.log("Content script loaded");'
  }
}
​
contentScripts.hmrTimeout
number
Timeout in milliseconds for HMR (Hot Module Replacement) connections in content scripts.Default is 3000 (3 seconds). Increase this if you experience HMR connection timeouts.
{
  contentScripts: {
    hmrTimeout: 5000  // 5 seconds
  }
}
​
contentScripts.injectCss
boolean
Whether to automatically inject CSS imports into content scripts.When true, CSS imported in content scripts will be injected into the page. When false, CSS must be manually injected.Default behavior is determined by the plugin.

​
Examples

​
Basic Configuration

import { defineConfig } from 'vite'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
  plugins: [
    crx({ 
      manifest,
      browser: 'chrome'
    })
  ]
})

​
Firefox Extension

import { defineConfig } from 'vite'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
  plugins: [
    crx({ 
      manifest,
      browser: 'firefox'
    })
  ]
})

​
Custom Content Script Configuration

import { defineConfig } from 'vite'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
  plugins: [
    crx({ 
      manifest,
      contentScripts: {
        // Increase HMR timeout for slower networks
        hmrTimeout: 10000,
        
        // Add custom initialization code
        preambleCode: `
          console.log('[CRX] Content script initializing...');
          window.__CRX_DEV__ = true;
        `,
        
        // Enable CSS injection
        injectCss: true
      }
    })
  ]
})

​
Custom File Globbing

import { defineConfig } from 'vite'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
  plugins: [
    crx({ 
      manifest,
      fastGlobOptions: {
        // Follow symbolic links
        followSymbolicLinks: true,
        
        // Ignore patterns
        ignore: ['**/node_modules/**', '**/.git/**'],
        
        // Case-insensitive matching
        caseSensitiveMatch: false
      }
    })
  ]
})

​
Disable Content Script Preamble

import { defineConfig } from 'vite'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
  plugins: [
    crx({ 
      manifest,
      contentScripts: {
        // Disable the default preamble code
        preambleCode: false
      }
    })
  ]
})

​
Type Definitions

export interface CrxOptions {
  contentScripts?: {
    preambleCode?: string | false
    hmrTimeout?: number
    injectCss?: boolean
  }
  fastGlobOptions?: FastGlobOptions
  browser?: Browser
}

export type Browser = 'firefox' | 'chrome'

​
Notes

The browser option only affects plugin behavior. You still need to ensure your manifest and code are compatible with the target browser.
Setting preambleCode to false will disable HMR functionality in content scripts during development.
If you’re experiencing HMR connection issues in content scripts, try increasing the hmrTimeout value.

Build docs developers (and LLMs) love

Get started for freeTalk to us