Search for a command to run...
i'm trav
i've also been known to make music
No comments yet. Be the first to comment.
This is going to be a "quick" little guide to customizing the tmux status bar to include a scrolling Spotify “Now Playing” widget. I’m going to be doing this on macOS, but you should be able to adapt it to Linux and I'll try to assist where I can. If...
Go From Freelancer to Corporate Sellout In 43 Easy Steps
An overview of one of the most popular and loved programming languages.
The Importance of Mental Health as a Developer
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.
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.
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:
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.
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:
curl -fsSL https://bun.sh/install | bash
cd your-extension-name
bun i
bun start
Alternatively, to build the extension without starting the server:
bun ./scripts/build.ts
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!