CRXJS parses the manifest to discover what entry files your extension uses.Because we import the manifest into the Vite config, you can use JSON,JavaScript, or TypeScript.
TypeScriptCRXJS exports a helper function called defineManifest. It's similar to Vite'sdefineConfig and supports autocompletion and dynamic or async definitions.
Did you know?Chrome Extensions don't use Semver. Read more about the Chrome Extension versionformat in theGoogle Developer Docs.
The following example uses the version from package.json and dynamically setsthe name depending on Vite's mode.
manifest.config.tsimport { defineManifest } from '@crxjs/vite-plugin'import packageJson from './package.json'const { version } = packageJson// Convert from Semver (example: 0.1.0-beta6)const [major, minor, patch, label = '0'] = version // can only contain digits, dots, or dash .replace(/[^\d.-]+/g, '') // split into version parts .split(/[.-]/)export default defineManifest(async (env) => ({ manifest_version: 3, name:env.mode === 'staging' ? '[INTERNAL] CRXJS Power Tools' : 'CRXJS Power Tools', // up to four numbers separated by dots version: `${major}.${minor}.${patch}.${label}`, // semver is OK in "version_name" version_name: version,}))Manifest PathsPaths inside the manifest are relative to theVite project root, sothe location of the manifest file doesn't matter.
Use paths that start with a lettermanifest.json{ "options_page": "options.html", "devtools_page": "pages/devtools.html"}Don't use relative or absolute pathsmanifest.json{ "options_page": "./options.html", "devtools_page": "/root/user/.../devtools.html"}JSON SchemaIf you're using a JSON file, consider using a schema like the one atJSON Schema Store to takeadvantage of autocompletion and validation.
You can configure VSCode to use a JSON schema by adding this to your settingsfile:
settings.json{ "json.schemas": [{ "fileMatch": ["manifest.json"], "url": "https://json.schemastore.org/chrome-manifest.json"} ]}