Starting out with browser extensions can often be a pain in the back.
A while back, I was looking for a template I could use to build Epubespiar. Most of the ones I tried had the same problem: I couldn’t get them started and running. Since this was my first time building an extension, that was really frustrating.
The instructions would say something like: clone the project, pnpm install, then pnpm run dev. After that, Chrome would suddenly open and... voilà. A blank tab, staring at you as if asking, "what are you doing, bruv?" And if you didn't have Chrome installed and wanted to check the template UI in Firefox, hell broke loose. :P
So you'd end up back in a 500+ line codebase, trying to figure out what was actually breaking and that can be demoralizing, yeah. Imagine signing up to a social platform and, on first impression... not being able to create posts or publish content the way you would on other apps. Sucks, right?
After a few trials, I decided to build Epubespiar from the ground up with Vue.js. Since then, life has been good.
Recently, that experience stuck with me, so I built a browser extension template to help developers get their extensions up much quicker.
All you need is the repo in your dev environment, then:
pnpm install thereafter, pnpm run dev:all
What you see next should feel familiar, and if you're a web developer, it's even easier, because it follows the same flow you already use day to day. The UI runs on localhost which you can open in any browser, be it Chromium-based or Gecko/Firefox for testing.
Try it here: https://github.com/rezzcode/vuejs-extensions.git and tell me what you think.