A CLI tool to generate Chrome extension projects with TypeScript and Manifest V3
npm install create-chrome-ext-tsA modern CLI tool to generate Chrome extension projects with TypeScript, using Manifest V3.
Generate a new Chrome extension project using npx:
``bash`
npx create-chrome-ext-ts
Example:
`bash`
npx create-chrome-ext-ts my-awesome-extension
Check the version:
`bash`
npx create-chrome-ext-ts -vor
npx create-chrome-ext-ts --version
This will:
- Create a new directory with your project name in the current directory
- Copy all template files
- Update package.json and manifest.json with your project name
- Install npm dependencies automatically
- ✅ TypeScript support
- ✅ Webpack bundling
- ✅ Manifest V3
- ✅ Background service worker
- ✅ Content script
- ✅ Popup UI
- ✅ Options page
- ✅ Chrome Storage API integration
- ✅ Message passing between components
`
.
├── src/
│ ├── background.ts # Background service worker
│ ├── content.ts # Content script (runs on web pages)
│ ├── popup.ts # Popup script
│ ├── popup.html # Popup HTML
│ ├── options.ts # Options page script
│ └── options.html # Options page HTML
├── icons/ # Extension icons (create these)
├── manifest.json # Extension manifest
├── webpack.config.js # Webpack configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies
`
If you've cloned this repository, you can also use the local generate script:
`bash`
npm run generate
1. Install dependencies:
`bash`
npm install
2. Build the extension:
`bash`
npm run build
For development with watch mode:
`bash`
npm run dev
3. Load the extension in Chrome:
- Open Chrome and navigate to chrome://extensions/dist
- Enable "Developer mode" (toggle in top right)
- Click "Load unpacked"
- Select the folder
- Build: npm run build - Creates production build in dist/npm run dev
- Dev: - Watches for changes and rebuilds automaticallynpm run clean
- Clean: - Removes the dist foldernpm run generate
- Generate: - Creates a new project from this template
1. Add entry point in webpack.config.js:
`js`
entry: {
// ... existing entries
newScript: "./src/newScript.ts";
}
2. Create the TypeScript file in src/
3. Reference it in manifest.json if needed
Edit the permissions array in manifest.json. Common permissions:
- storage - For chrome.storage APIactiveTab
- - Access to active tabtabs
- - Full tabs API accessscripting
- - For injecting scriptshost_permissions
- - For specific domains
- Background scripts are now service workers (no DOM access)
- Use chrome.storage instead of chrome.storage.local for sync
- Content Security Policy is stricter
- Message passing is async (use promises or callbacks)
- Chrome Extension Documentation
- Manifest V3 Migration Guide
- Chrome Extension APIs
To publish this package to npm:
1. Update the version in package.jsonnpm login
2. Login to npm: npm publish
3. Publish:
After publishing, users can generate projects with:
`bash``
npx create-chrome-ext-ts
MIT