JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 193
  • Score
    100M100P100Q32349F
  • License MIT

Create a Chrome extension boilerplate with Vite + React, Vue, or Vanilla JavaScript

Package Exports

  • create-flexex
  • create-flexex/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (create-flexex) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

FlexEx 🚀

FlexEx is a modern and flexible boilerplate for building Chrome extensions. It provides seamless support for React, Vue, and plain JavaScript templates, all powered by Vite for fast and efficient development.

Key Features

  • Multiple Templates: Start your Chrome extension with React, Vue, or plain JavaScript templates.
  • Vite-Powered: Fast build tool that ensures efficient and quick development cycles.
  • Hot Reloading: Enjoy live reloading during development for a smoother experience.
  • Minimal Configuration: Get started in minutes with an easy setup and minimal configuration required.

Installation & Setup

Follow these simple steps to get started with FlexEx:

1. Create a New Project

Run the following command to create a new project:

npm create flexex@latest

2. Navigate to Your Project

Change to the project directory:

cd your-project-name

3. Install Dependencies

Install required dependencies:

npm install

Usage

Once the setup is complete, here’s how you can start building your extension:

4. Generate the Build

Run the following command to build your project:

npm run build

This will generate a production-ready build inside the dist folder.

5. Load Your Extension in Chrome

To test your extension, load it in Chrome:

  1. Open Chrome and navigate to chrome://extensions/.
  2. Enable Developer Mode (top right).
  3. Click Load unpacked.
  4. Select the dist folder inside your project directory.

Your Chrome extension is now ready for development! 🎉

Additional Features & Improvements in v2.0.0

  • CLI Tool: FlexEx now includes a CLI tool to quickly scaffold new projects.
  • Customizable Templates: Easily extend or modify templates to fit your needs.
  • Package Improvements: Cleaned up dependencies and optimized for better performance.

Documentation

For in-depth documentation, including advanced configurations and examples, visit our official docs.

Contributing

We welcome contributions from the community! If you have any suggestions, bug fixes, or improvements, feel free to open an issue or submit a pull request.

How to Contribute

  1. Fork the repository.
  2. Create a new branch for your feature/bugfix.
  3. Submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.