I've always been intrigued by browser extensions and their ability to do crazy things and make the web cooler + get rid of ads. That said, going from concept to a working Chrome extension can be super annoying with repetitive setup tasks, configuration, and a slow iteration cycle. To remedy this, I created CExtUp: a scaffolding tool designed to make Chrome extension development less painful and more enjoyable. It started with me trying out Bun for the build step and it was so fast and easy that I thought others might appreciate it as well.
Why CExtUp?
CExtUp was born out of my desire to simplify the initial setup process and provide a modern development environment for Chrome extensions. By using Bun—a modern JavaScript runtime, bundler, and package manager—instead of Node.js, CExtUp offers an insanely fast and efficient development experience that is actually pleasant to use.
Key Features
Quick Scaffolding: CExtUp automates the creation of a new Chrome extension project, setting up a basic structure and all necessary files with just one command.
Bun-Powered: The integration with Bun ensures that builds are quick and the development server is responsive, allowing for rapid prototyping and testing.
TypeScript Ready: With out-of-the-box support for TypeScript, developers can write safer and more maintainable code from the get-go.
Serverless Edge Functions: For those who need backend logic, CExtUp is pre-configured to use Vercel Serverless Edge Functions, though it's flexible enough to work with other serverless platforms, or even with a self-hosted solution.
Getting Started
To get started with CExtUp, simply run the following command:
bunx cextup
# or
npx cextup
This interactive CLI will guide you through naming your new extension and create a directory with that name, populated with a well-organized set of files and folders for your project.
A Thoughtful Project Structure
CExtUp generates a project with a clear and logical structure:
src/: Contains the source files for your Chrome extension, including background scripts, content scripts, and the manifest file.types/: Houses TypeScript type definitions to ensure type safety.api/: If you opt for serverless functions, this is where they'll live.scripts/: Includes build and serve scripts to facilitate development.
Development Workflow
Once you've scaffolded your project with CExtUp, the development workflow is straightforward:
- Install Bun if you haven't already:
curl -fsSL https://bun.sh/install | bash
- Install dependencies:
cd your-extension-name
bun i
- Start the development server and watch for changes:
bun start
Alternatively, to build the extension without starting the server:
bun ./scripts/build.ts
Loading Your Extension
To test your extension in Chrome, navigate to chrome://extensions, enable Developer Mode, and click Load unpacked. Select the extension directory from your project. Remember to reload the extension after making changes to see them reflected in the browser.
Let me know if you try out CExtUp and if you find it useful. Contributions, feedback, and discussions are welcome—feel free to reach out through GitHub issues or pull requests.
Go follow me if you want to see what else I'm making!