91
94 Comments

I made over $100,000 with a browser extension (CSS Scan), AMA!

Hi! I’m Guilherme Rizzo.

I’m 22 years old, from Brazil, now living in Taiwan.

I built CSS Scan because I always wanted to know what border-radius, box-shadow, or font-family an element I see has. So, inspired by WhatFont? I decided to create a tool that wherever you point your mouse over, you get the computed CSS of the element. That was the initial idea.

If you always catch yourself using Inspect Element to understand the CSS of some website you're seeing, this is like a Goodbye to "Inspect Element". You can check the CSS of any element you hover over, instantly, and copy its entire rules with a single click. It's the fastest and easiest way to check, copy and edit CSS.

It took me 50 hours to create the first version, here's the speed video (inspired by @levelsio):
https://www.youtube.com/watch?v=OtsNNXpXcYs

To “validate” it, I reached out to some Brazilian Developers Facebook groups, asking if they would pay $1 for this extension, and the result was good enough, so I started coding.

After the 50 hours of work, which took like a month, I launched it on Product Hunt and it was a success (compared to my previous launches).

In the beginning, the pricing model was Pay What You Want (but with a minimum of $1.99). After seeing some people paying $5, $10, $25, I slowly raised the price. Until one day it was already $10, so I made it fixed pricing. Then my wife suggested that I add packages of licenses (2 licenses, 5 licenses, 10 licenses) and we kept raising the price. Now the extension costs $80 for a lifetime license.

Today, more than 7,000 people from 116 different countries use it, and it has made more than USD $100,000 in revenue.

I’m also trying subscription models with extensions (CSS Scan Pro, $20/month, $120/year) and have made another extension for web development: toast.log.

This year, I also launched beachguide.co: a crowdsourced database of the best beaches in the world.

I’m here to help you with bootstrapped business, extensions revenue models, launch, or anything you want to ask 🙌

AMA!

  1. 12

    Congrats on your effort and rewards. What is been your best referral channel for traffic and sales?

    1. 5

      Hi, Ken. The best channels so far were Product Hunt (2 launches), Life-time Deals Facebook Groups, Youtube videos (such as this one from WpTuts), Twitter, word of mouth, and SEO.

    2. 4

      Yes this please . All of us wanna understand how you've attracted audience and convert them into paying users. Cheers!

  2. 10

    Very inspiring!

    If others are interested in making profitable browser extensions, I made a service that lets you take payments in your extensions without needing to run your own backend server! ExtensionPay.com

    I use it in my own extensions and it takes care of a lot of annoying, time-consuming, and complicated stuff (accounts, licensing, payments, emails, etc) and lets me focus just on making extensions. The JS library is open-source and works cross-browser too, so you can have one codebase and release across all browsers for maximum 💰

    (Please excuse the self-promotion, but I think it is relevant here.)

    1. -4

      This comment has been voted down. Click to show.

      1. 4

        You created an account just to post this trolling comment? Why?

        And yeah, 5% is the same fee as Chrome Web Store payments, cheaper than Gumroad, cheaper than Patreon, and cheaper than my main competitor.

        1. 3

          Ignore him, 5% is a steal. We have an extension coming up, will keep it in mind.

    2. 1

      This comment was deleted 3 years ago.

  3. 9

    Huge congrats on the 100k revenue! Do you have any good resources on building browser extensions? I'm also building one for jobdispatch.co. Thanks! 🙏

    1. 3

      Thanks, Toon! Wish you the best of luck with jobdispatch! Unfortunately, there's not that much material about building extensions. I'd say the Chrome Documentation and Firefox MDN helped me the most: https://developer.chrome.com/docs/extensions/mv3/getstarted/

      1. 1

        Gotcha, thanks Guilherme!

        1. 1

          You're very welcome, Toon!

      1. 1

        Ah that's awesome, thanks for sharing!

  4. 3

    I haven't got a question for you Guilherme. Just wanna say inspiring work. You built something awesome. Thanks for the motivation!

    1. 1

      Thanks, Harry! Love your work with MarketingExamples.

  5. 2

    Loved your landing page man. Also Big Congratulations for achieving this feat :)

  6. 2

    What is the best course to learn coding + make chrome extension?
    Congrats Guilherme 💜 my dude! happy for you, wish i can meet you again.
    Glad to share beaches from Singapore at beachguide.co

    1. 2

      Hi, Fajar! Thanks, wish I can meet you again too! I love Codecademy's Javascript course, I learned JS from there! For extensions, I'd say Chrome's Docs.

      1. 1

        You're most welcome! ;) Awesome 😃

  7. 2

    Hi Guilherme, have you failed before launching CSS Scan? What did you learn from those fails?

    1. 1

      Hi, Leo! Yes, I've failed quite a lot, haha.

      I've been trying to build Silicon Valley-ish startups when I was in school (tried Education, Fashion, both failed)

      Then I also tried with 2 indie projects before building CSS Scan: mprove ($129 in revenue) and Moniesto (maybe $60 in revenue haha). I did them in my 3 Products in 3 Months challenge:

      The third product was CSS Scan! :D

      What I learned from these:

      • Build and launch fast, iterate later
      • Build an audience
      • Don't be afraid to charge money for your product/service
      • You can charge much more than you think
      • Sometimes simple is better (mprove sold more than Moniesto)
  8. 1

    Super impressive:

    Had 2 questions:

    • I see that you have a monthly offer on your website. Do you see people signing up for that?
    • How much is organic growth through Chrome store and general SEO. Do you also do paid ads?
  9. 1

    How do you build out your websites?

    They both look awesome!

  10. 1

    this is amazing and useful.

  11. 1

    This is very inspiring @gvrizzo

    Can I ask, how did you promote your extension? Like, do you have a customer acquisition cost, how much is it? Do you see any viral growth?

  12. 1

    Looks great !
    Do you take on paid work too?

  13. 1

    Wondering if he's gonna answer any questions? I noticed a lot of your users are also unhappy with your css scan pro model.

    The product hunt reviews are terrible and earned a 1 star review: https://www.producthunt.com/posts/css-scan-pro

    1. 1

      The product is amazing (at least the v2 version), they were complaining about the pricing. Personally, I wouldn't pay that much, but IMO it's perfectly fine for a Web studio or even a solo UI developer.

      I wonder how much you can charge for a non-business extension and still not get canceled.

      1. 1

        You can't really charge at all. From my experience at least, it resulted in lots of complaints until it was made free to download.

        1. 1

          Yeah, people will complain about paying but I like to think that (depending on the market) this is usually a loud but small minority and there are 10 other people who are fine with it being paid. But it's hard to discern the difference between people whining, people's expectations of what things should cost vs what they actually need to cost, and a valid market signal.

        2. 1

          People complaining that they can't use someone's labor for free? Nice.

    2. 1

      Hi, Tony. I've made it better, check the 2.0 launch:
      https://www.producthunt.com/posts/css-scan-pro-2-0

    3. 1

      Wow yeah! @gvrizzo how are sales of CSS Scan Pro even though this was the reaction on Product Hunt?

  14. 1

    This is really inspiring, I've made loads of browser extensions before just to help me and other I work with, but I had no idea you could make that kind of money from one.

    1. 1

      Thanks, firefields!
      Yes, you can :)
      It's not easy tho because everyone expects extensions to be free

  15. 1

    This. Incredible 😍😂🎉

    1. 1

      Thanks, ugurkilci! Haha

    2. 1

      In the beginning, the pricing model was Pay What You Want (but with a minimum of $1.99). 😱😍

  16. 1

    Congrats! I've used CSS Scan Pro - awesome tool. Wanted to ask how's it going with the toast.log project? It's nice, useful but very simple as well. How does its public attention, and/or revenue compare to CSS Scan?

    1. 1

      Thanks for using CSS Scan Pro, areknawo! toast.log is going very well too :)
      It got a bit less attention than CSS Scan so far (although the pre-sale tweet was better) but already has over 1,000 users. Lots of people from CSS Scan bought it.

  17. 1

    Hey, great extension!
    my questions are
    1 . how do you handle payments?
    2. How do you handle checking who is paid the license once someone downloaded
    the extension directly from the google extension store?

    1. 1

      Hi, umen242!

      1. Gumroad
      2. Gumroad License API (generates a license key every sale) + Custom backend (to manage and limit activations)
      1. 1

        You build the backend ? or Gumroad supply it?
        So each time user activate the extension you get a request in your server to
        check the activation key?
        But How do you handle it if someone modifies the extension the part of that check activation code so it will always return true ?

        1. 1

          Gumroad supplies me with the license key, then the backend to know how many activations a license has, in which browser, etc, I made by myself.

    2. 0

      You can actually check yourself in the extension's source code here.

      But if you don't want to do all the licensing yourself you can also use ExtensionPay.

      1. 0

        Not really sure why my comment was voted down. I was saying that you can look at the freely-available source code of the extension to see how the licensing works and learn from it. Here's the link to CRX viewer (check background.js): https://robwu.nl/crxviewer/?crx=https%3A%2F%2Fchrome.google.com%2Fwebstore%2Fdetail%2Fcss-scan%2Fgieabiemggnpnminflinemaickipbebg%3Fhl%3Den

  18. 1

    Congrats Guiherme! Looks like you're delivering the extension as unpacked version?

    1. 1

      Thanks, Lee! No, just unlisted.

  19. 1

    Congrats! Super amazing about the extension's success and really inspiring.

    The beachguide.co is especially interesting to me. I've been running the torontobeach.app for the last 4 years and thought your project was really amazing. Love the public aggregation aspect.

    I've added the beach that's a short bike away from my place here in Toronto, Canada. So sick. Keep up the fantastic work man.

    1. 1

      Thanks, howdyfolks1000! I'm very happy that you like beachguide.co :D

      Your website looks great. Do you get some SEO traffic? How did you grow it?

      Thanks for adding the beach 🙌 Really appreciate it!

      1. 1

        It's been pretty word of mouth. I started this project the year I finished my development bootcamp as a tiny side project for the summer.

        It's flipped flopped back and forth between being an iOS app and a web app, but we've settled, after open sourcing it, as a web app.

        This year I'm hoping to focus on increasing usage with SEO and some media outreach. Got any tips for me?!

  20. 1

    such an inspiration💪

  21. 1

    Very inspiring. Congrats and keep at it!

    1. 1

      Thank you, Ricky! 🙌

  22. 1

    Hey Guilherme! Congrats on your success! Not sure if I have any questions ;)

  23. 1

    Been following CSSScan since the early lauch when there was a discounted price! Glad to hear it went this well! Congrats!

    1. 1

      Awesome! Thanks, orliesaurus!

  24. 1

    Something so simple but nobody came up with it. Bravo 👏

    How did you go about launching on product hunt? How did you get traction?

    1. 1

      Thanks, Niko!

      The first launch was pretty much just posting it, that's it. But I posted it on a Tuesday (to get more traffic). Yes, I got initial traction from it, but the price was sooo low ($1.99) that I didn't make that much money. I also think the landing page didn't convert that well. So I focused on improving the product and the landing page, and then the second launch was 20x better in revenue.

      For the second launch, I also posted some reminders on Twitter like 7 days and 1 day before the launch, reminding them what day I'd launch and etc.

  25. 1

    Congrats! I'm currently building an extension as well (usepinbox.com). I'm curious how you handle/check licenses? Are they payed "per browser" or something else?

    1. 1

      Hey I just registered for when usepinbox launches. It seems like a great idea! Any idea how far off you are from launch?

      1. 1

        Hey Stephen - love to hear that! I'm currently working on the last ~10%. Unfortunately, those are usually the hardest. However I'm going to start a private beta in a few weeks, for all waitlist members! I'll reach out to you when it's ready for beta users.

        1. 1

          Looking forward too it! If you have time though do me a favor and PM me here when it's ready, I'm looking forward to your product is because my emails are such a mess right now lol.

          Also I understand, that last sprint can be brutal.

          1. 1

            Sure, I'll notify you :)

    2. 1

      Hi, Eyk! Congrats on your work. I'd love to see some screenshots on the landing page to understand more about how the boxes look.

      I use Gumroad License API + a custom backend to handle licenses. Licenses are counted by browser, yes.

      1. 1

        Cool that's what I've planned to do, as well. Thanks for the feedback btw, I'm already working on a new version (made for the finished product) that includes short Loom videos as demo

    3. 0

      Hey Eyk, turns out he uses Gumroad + the Gumroad licensing API via a custom backend. You can actually look in the source code yourself using the CRX viewer site (check background.js and search for 'license')

  26. 1

    Congrats on your revenue! This is a cool product.

  27. 1

    This is amazing! I'm wondering how much code reuse there is on the client side across the browsers? Do you need to maintain multiple repos for each browser extension? Thanks

    1. 1

      Most browser extensions don't need to be modified at all to run across browsers. Most browsers support the chrome object, it seems like browsers are heading toward the webextension standard, and Mozilla made a webextension polyfill to fill in the gaps. I've run into a few small undocumented differences between browsers but it usually doesn't require much to make them work.

    2. 1

      Thanks, ZeroPointSix! For Chrome and Firefox, they're like best friends, so they share almost everything (around 98% I guess) except the manifest.json, and occasionally there are some small bugs from either JS or CSS differences between browsers, that's when I need to fix it.

      For Safari, I'd say I re-use only around 80% because the background script needs to run in Swift, as a Mac app, not Javascript.

      1. 1

        Thank you both for your replies. So if one was to start developing an extension today you should go the webextension route and make sure it works first on one browser ( Chrome ) and then port it to Firefox/Safari? Awesome!

  28. 1

    Great tool! I use it everyday :) Would be interested in learning how you built it. If you made a course on how you built CSS Scan, I would be your first customer.

    1. 2

      Thanks for buying it, Josh! :D
      I'm sorry, I don't like creating courses so I currently don't have plans for that.
      Maybe I'll change my mind in the future haha!

  29. 1

    Wow congratulations!
    Lots of great lessons:

    • Scratch your own itch
    • Validate BEFORE building, confirm users would actually pay something
    • Test different pricing models
    1. 2

      Thanks, Cole! Yep, very nice. I always scratch my own itch, so when I thought about CSS Scan, I started building because even if nobody bought it, I'd still use it myself. The validation wasn't the best tho, nowadays I'd validate with pre-sales (like I did with toast.log) instead of simply asking people if they would pay, without them making a commitment.

      Testing pricing is also very very important. I recommend always trying higher prices.

  30. 1

    Guilherme, I have been watching you and your product from time to time and just wanted to say what you have done is really top notch.

    1. 1

      Thanks a lot, Jason! :D

  31. 1

    CSS Scan is great! I use it a lot.

    1. 1

      Thank you so much for buying it, Satvik! :D

  32. 1

    Hi Guilherme, congrats first! My question: I'm also working on an add-on product (for Google Sheets), do you suggest me to adopt a lifetime price model of the product or a subscription model? I saw you used both, which one performed better? And, which one do you think is more promissing in the future? Thanks.

    1. 2

      Hi Wayne, the subscription model is definitely better for the long-term, but it depends if you're product is valuable enough so that people will subscribe to it.

      If it helps them make money and save time, I'd try a subscription model.
      If it depends or you're unsure, I'd probably start with life-time pricing.

  33. 0

    Very cool. I have a Chat App. Help me review it.
    https://gistapp.ga

  34. 1

    This comment was deleted 3 years ago.

  35. 1

    This comment was deleted 3 years ago.

  36. 1

    This comment was deleted 3 years ago.

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 48 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 28 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 14 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments