Show IH: Browser extension starter kit for only $4

Hello IndieHackers!

Recently I have found myself building the same template over and over again for each browser extension I want to work on. I love browser extensions because they are small, they are quick to operate, mostly work offline and they are a breeze to develop; the biggest issue was always setting up the libraries and tools to get started, and every time I do that I found things to be slightly different which caused me a lot of issues.

I built this quick template with some default libraries:

Vue, with Vue Router for making a multi-page extension and Vuex for state management
Tailwind for CSS
Webpack to build for development and production
PurgeCSS for removing unused CSS and optimizing the build
Automatically building ZIP file, ready to be distributed to the stores
Included a simple README with development and build instructions

I have built multiple extensions before and was desperately in need of this, that's why I wanted to move forward and build a quick template. It is not a one-size-fits-all solution, but it should really cover the basics to get started.

Also, it is not something you cannot build by yourself as well, it is just something that is probably much cheaper than your time, for only $4 you will save yourself 1-2 hours at least.

Here is the link to the pack: https://gumroad.com/l/XUPxA

Any feedback is appreciated, and feel free to reach out for any questions.

Cheers!

Burak Karakan

posted to

Developers

on February 24, 2020

Say something nice to karakanb…

Post Comment

3
I've got a few questions/feedback:
1. Like the idea and would probably use it, it looks like a steal.
2. Could you provide a demo extension so buyers can see what they are getting?
3. Are the bundled libraries minified? (Tailwind etc.) This is relevant as non-minified code gets approved faster.
br

·
4 years ago
·
Reply
1. 1
  Hey, let me walk by point by point:
  
  Thanks!
  
  I was thinking of doing that, but it is a bit tricky, I'll either give a archive to download, extract and load as unpacked, or I'll distribute it through the stores which I am not sure if it'd be accepted. Though I'll definitely give this a try.
  
  Yes, they are minified and optimize. In my previous experiences, Chrome Store was very straightforward with optimized resources but Mozilla had this requirement to have a fully reproducible build and submit the source code as well, I haven't added that option yet, thanks for reminding me.
  
  Thanks for the feedback!
  karakanb
  
  ·
  4 years ago
  ·
  Reply
2. 0
  
  This comment was deleted 3 years ago.
  
  DeletedUser
  
  ·
  4 years ago
  1. 1
    
    What? I don't understand what you mean.
    
    br
    
    ·
    4 years ago
    ·
    Reply
2

This actually aligns nicely with a problem space that I'm exploring: things that are easy for the experienced but substantially more difficult for the non-initiated. As a newcomer to the browser extension space, it might take me much more than 1 or 2 hours to get the basics working. At a $4 price point, an experienced developer might but it just for the simple time savings; a new developer might save substantially more time (and avoid more pitfalls) by seeing an example of how it's done.

It's a great product idea! I hope it's successful for you.

FunctionFocus

·
4 years ago
·
Reply
1. 1
  
  Hey, thanks a lot for the response!
  
  I agree with you, even for an experienced developer, building a similar setup 3 months after doing it is still time consuming; a lot of libraries change, usages change, and you find yourself spending time on details.
  
  I hope people will find it useful.
  
  Thanks again, and let me know if you have any suggestions!
  
  karakanb
  
  ·
  4 years ago
  ·
  Reply
2

That's great, thank you! I will definitely use it in a month or two when it's turn for my extension to be programmed.

kioleanu

·
4 years ago
·
Reply
1. 1
  
  Thank you! Let me know if you need any help with getting started.
  
  Cheers!
  
  karakanb
  
  ·
  4 years ago
  ·
  Reply
2

Hi Burak,

I like that your tool does not only save time but also help developers to be more organised. It really helps to keep everything under control within the project, very relieving especially for control freaks like me :)

Fantastic effort!

coaltunbey

·
4 years ago
·
Reply
1. 1
  
  Thanks buddy, let me know if you need help with setting it up!
  
  karakanb
  
  ·
  4 years ago
  ·
  Reply
2

Seems very cool, totally saves time.
Great job!

buraksayin

·
4 years ago
·
Reply
2

I really like that kind of projects. They accelerate your project for the MVP. So that, you don't have to think about the small details.
Nice work!

sabrikaragonen

·
4 years ago
·
Reply
1
There's a lot of positivity in the comments and that's great! Below are some thoughts of mine:
- As a developer I've never paid for anything I couldn't build myself. Even if I know it'll save me time. I wonder how many other devs have that mindset?
- There are a number of extension scaffolding repos on Github devs can fork. I imagine Yeoman as some too. Yours might be better, I don't know. I just know that your competition is potentially describable as "free and good enough"
- When I do clone repos, it's typically easy to incorporate updates. Folks are just purchasing a zip of source with documentation, so this doesn't seem possible. I suppose if you're positioning it as a starter pack, you're not beholden to update your customers, but that's still something that'd be on my mind.
In general, go for it! Good luck!
hbrdshr

·
4 years ago
·
Reply
1. 1
  Hey, thanks a lot for the comments.
  
  I had a similar mindset until last year I saw that a non-developer friend of mine managed to develop a fairly complex dashboard application on top of a ready-made template and a backend that he bought for ~$100, and he got the whole thing going in around a week. If it was for me, I would have started from scratch and lost a great amount of time trying to get there; that specific event had actually changed my mind.
  
  There are some free alternatives, though I haven't ran into any that combined Vue + Tailwind in a single setup, and that was one of the tricky parts in my experience. Also, that's the primary reason that I offer it so cheap, so that it is actually a viable alternative because I believe our time is worth more than $4/hour.
  
  I might be slightly disagreeing with this; for any template or scaffold that you clone as a whole, not like an external package, and build stuff on top, you will have a hard time incorporating updates into your built application. Versions will change directory structure, move files and directories around, split things, change things in the core files you built your logic in, so it will be never super straightforward to upgrade, at least that was my experience up until now. That's why I wanted to focus on kickstarting things rather than trying to give a package-like experience with easy upgrades; this is supposed to be something shaped by the maker, not by the scaffold.
  
  I hope these answer some of the questions at least a little bit. Glad to hear feedback, thanks again for taking the time to walk through these points!
  karakanb
  
  ·
  4 years ago
  ·
  Reply
2. 1
  
  This speaks to my first question: https://www.indiehackers.com/post/ive-reached-out-to-over-5k-developers-without-success-is-it-time-to-pivot-7dd141048f
  
  hbrdshr
  
  ·
  4 years ago
  ·
  Reply
1

Sounds great. Was recently looking for something like it as I thought of using vue in a extension. Found https://github.com/Kocal/vue-web-extension so far and now yours. What's ylurs doing differently?

azarai

·
4 years ago
·
Reply
1. 1
  
  Hey, thanks for the feedback.
  
  Kocal's work was an inspiration for me as well, in fact that was my starting point for another extension of mine. However, I found the documentation a bit outdated, and the issues were not very helpful; I tried adding Tailwind to it and already had a very hard time. So, instead, I wanted to have a simple template that "just works" out of the box, and it'd be focused on a subset of the functionality just working out of the box; you can think of it as a fork.
  
  To answer your question, Kocal's template and mine share the same basis essentially, you can consider mine just like a fork that is specialized to simplify everything for a subset of needs, including most up-to-date packages, Tailwind integration with PurgeCSS and a direct way of getting started with simply uploading the ZIP.
  
  Let me know if you have any questions regarding them. If you have the time, definitely check out Kocal's work too, great stuff!
  
  karakanb
  
  ·
  4 years ago
  ·
  Reply
  1. 1
    
    Thanks. Good to know. I assumed it would be easy to add Tailwind or any other CSS frameworks. The answers you gave me, should be on your sales page and making it clear how it saves time for me. Also, if I can easily add other dependencies.
    
    For the price, add the + sign on GumRoad so people have the option to pay more. You can also set a minimum and suggested price there. You could set the minimum to 4$ and a suggested price of 15$ and devs could still pay more.
    
    Good luck :-)
    
    azarai
    
    ·
    4 years ago
    ·
    Reply
    1. 1
      
      Ah, I didn't know Gumroad had such features, thanks a lot for the suggestions! I'll also update the copy around the page. Thanks!
      
      karakanb
      
      ·
      4 years ago
      ·
      Reply