create-browser-extension-cli
v1.0.2
Published
A cli tool to create browser extensions. Create a boilerplate project with common codebase and HMR for Chrome and firefox browsers.
Downloads
22
Readme
🚀 create-browser-extension-cli
A simple CLI tool to quickly scaffold boilerplate for Chrome and Firefox extensions, similar to create-react-app
. Get a head start with an un-opinionated project structure and prebuilt templates for cross-browser support.
✨ Features
- ⚡ Generate boilerplate code for Chrome and Firefox extensions
- 🔄 Hot Module Replacement (HMR) for Chrome extensions, ensuring smooth development
- 🖥️ Single codebase for multiple browsers
- 📦 Preconfigured Webpack setup for both development and production environments
- 🛠️ Extendable and flexible project structure
📥 Installation
To install the CLI globally, run:
npm install -g create-browser-extension-cli
🛠️ Usage
To create a new browser extension project, run the following command:
create-browser-extension <project-name>
You will be prompted to choose the browsers you wish to support (Chrome, Firefox, or both).
Example
create-browser-extension my-extension
This will generate a project in the my-extension
folder.
🗂️ Project Structure
Once generated, your project will have the following structure:
<project-name>/
├── config/
│ ├── manifest-chrome.json # Chrome-specific manifest file
│ └── manifest-firefox.json # Firefox-specific manifest file
├── src/
│ ├── background.js # Background script for the extension
│ └── popup/
│ └── popup.js # Popup script
├── webpack/
│ ├── webpack.common.js # Shared Webpack configuration
│ ├── webpack.dev.js # Development-specific Webpack configuration
│ └── webpack.prod.js # Production-specific Webpack configuration
├── package.json
└── README.md # Project documentation
📜 Available Scripts
The following scripts are preconfigured in the generated package.json
:
dev:chrome
: Starts the development server with HMR for Chrome 🔄build:chrome
: Builds the extension for Chrome 🏗️build:firefox
: Builds the extension for Firefox 🦊
Running Scripts
To run the available scripts, navigate to your project directory and use npm run
followed by the script name. For example, to start the development server for Chrome:
cd my-extension
npm run dev:chrome
🛠️ Development
During development, you can use the following command to start the development server with Hot Module Replacement (HMR) for Chrome:
npm run dev:chrome
This uses the configuration from webpack/webpack.dev.js
to enable rapid development by automatically reloading code changes without manually refreshing the extension.
🏗️ Building
To create production-ready builds, use the following commands:
Build for Chrome:
npm run build:chrome
Build for Firefox:
npm run build:firefox
These commands will use the configuration from webpack/webpack.prod.js
to create optimized builds for the respective browsers.
🌐 Browser Compatibility
The CLI supports both Chrome and Firefox, and the generated project structure allows you to share a common codebase for both browsers. You can still customize specific features by modifying the respective manifest-chrome.json
and manifest-firefox.json
files.
🤝 Contributing
Contributions are welcome! If you'd like to improve this CLI or fix any issues, feel free to submit a pull request or open an issue. Let's build together! 💪
📄 License
This project is licensed under the MIT License. See the LICENSE file for more details.
Happy coding! 🚀🎉