Streamlining Chrome Extension Development with Bun
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.
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.
To get started with CExtUp, simply run the following command:
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.
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:
- Start the development server and watch for changes:
Alternatively, to build the extension without starting the server:
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.
Go follow me if you want to see what else I'm making!