Weekly Update #1

Weekly #1 - About extension-create, a CLI tool to help you create modern cross-browser extensions with no build configuration

Hello there! Happy new year! Mine was good, lots of work done, and plans to get more done in 2021. Hope you’re doing well and safe.

To the updates!

In the next email, I'll get deeper into the development process behind extension-create, the current status, and what to expect next. Good stuff!

See you,

As a reminder, in the last post, I mentioned two of my current side-projects: a book about browser extensions and the creation of a CLI tool to help developers create new extensions.

The extension-create project

extension-create is all about being easy. Inspired by acclaimed CLI tools such as Deno.js, homebrew, Yeoman, create-react-app, next.js, and web-ext, all tools created to speed up the development process while offering a great experience, I wanted a tool to do the same with browser extensions, but without losing the benefits of the modern web I’m used to. These are the task I’d like the tool to help me with:

  • create - an extension, from a template if I want

  • start - an extension within a browser, loaded, without any extra step

  • build - an extension package, so I can see what users see before deploy

  • lint - an extension, listing common mistakes and cross-browser bugs

  • test - an extension, with built-in mocks, stubs, and cross-browser libraries

  • publish - an extension store, with an as minimal setup as possible

You can get an overall sense of what I want in the project Wiki page called this initiative.

create

As I dive more into writing the book, I realized the importance of a creation/automation tool when it comes to software education. A tool that can generate new samples on the fly is invaluable to keep the reader focused. I don’t need to point to download links or give instructions on how to install what just downloaded. As I wrote the book, the question “how (much) can I share the code I need the user to know before learning?”, how can I present users the boilerplate code? Type down everything in the text body? GitHub links?

With that in mind, I started the project with the `create` option.

npx extension-create <project-name>

Which generates an extension based on a pre-existing template.

Now you have your extension bootstrapped!

I also added an option to add it from a template via `—template` flag, as a future way to support JavaScript frameworks, TypeScript, or any other tool users feel best to use.

The `create` part was challenging because I had to figure many things at once, including the project structure, how each part would glue together, my expectations around the project, how would I keep up with the book now that I decided to stop and create the tool. A great learning experience, but challenging.

I ended up modularizing everything. Each “core” bullet would be a separate module. `create`, `start`, `build`, `lint`, `test`, `publish`. Each one would store its own logic to do its own work. Think of each of them as an npm package, which is their end-goal anyway.

This method allows me in the future to decouple (or “eject”) from the core app and allow users to take full control over their extensions.

It’s working well so far along with a one-line shell script that iterates over modules and performs an `npm install`.

start

In the next issue, I’ll talk a bit about the `start` command.

In a nutshell, you will be able to run any extension stored on GitHub in your browser with one click command and default auto-reload support. Powerful!

If you’re curious, you can track the development (and the start command btw!) of extension-create at its internet space, https://github.com/cezaraugusto/extension-create.

Everything else

All good, thinking a lot about extension-create, running to get into a state where I can reliably prototype extensions in Chrome., trying to figure out Substack, getting closer to like-minded people on Twitter, surviving the pandemic (going strong!), and excited to share another round of personal updates and news to you in the next post!

Stay well, have a good week!