Chrome Extension Development Question!
Hello IndieHackers,
I've been researching on the best approach to build a chrome extension, the extension itself will be similar to Honey as it will has multiple tabs and show products discounts, ...etc.
I've feel a bit overwhelmed on this subject, I know that I want to use Firebase as a backend service because the main web application is built on Angular + Firebase
I've found the following options to use:
Angular, React or Vuejs -> I feel those are overkill for a small browser extension
Riot.js
Preact
Svelte
Inferno
Which one is better in my use case?
Also, do you have any recommendations on (UI Libraries or Cross-Browser Frameworks) for browser extensions?
Thank you.
Hi Muath, develover of Notyfy (notyfy.co) here.
I don't think at all that Angular, React or Vue are overkill for a small browser extension. The structure will help you a lot to further develop it. Since your files are loaded locally there is no noticeable drawback from startup time.
For me TypeScript was the biggest help as it helped me trying out many ideas without breaking existing features.
What I did with Notyfy though is first go quick and check first if it's working at all before do the rewrite to a stable code foundation.
My experience was that there are many chrome extension starter projects but most of them are a bit outdated: For example Vue Chrome Extension Starter isn't available* for TypeScript, or React comes without a store solution out of the box (tshaddix/webext-redux & redux-persist do the job here).
I've been hacking around with the current Notyfy setup (React + TypeScript + Redux) and want to make it available as a starter, too. But haven't come around it 🙈
Regarding UI lib: Anything goes I guess. I knew Ionic already and went with it. Saved me a lot of time.
Hope this helps!
*) at that time
Hi, really nice looking extension you have! I really enjoy the UX and onboarding experience as well. Hope your extension finds its audience and gets traction fast.
What's your next planned steps? And what could you recommend about promoting your extension?
Cheers,
Oleg
Hey, thanks for your kind words! I think next on the list is more promotional work than actual implementation.
Notyfy has only been covered in a handful of blogs and communities until now. But the ones that have did send good 'sticky' users that keep using it.
I just noticed one of the things may be missing is acknowledge/clean all notifications function. So that I see immediately what's new and don't see the outdated history. I am not a big fan of notifications myself and usually turn them off. But when I don't, I like sticking with the "clean inbox" approach. Maybe this helps.
Could you elaborate on how you got to this communities and blogs in the first place?
Thanks!
I agree with you. You can't immediately see without some attention what came in fresh. And that is what the chrome extension is all about after all. Will definitely work on that!
Hi zwacky, am I right that once enabled, the extension automatically marks all Facebook notifications as read? When I open Facebook with it installed, I pretty much never see any notifications anymore.
Hey Oleg, that is true for Facebook, but isn't necessarily true for all the other platforms. To fetch your Facebook notifications Notyfy checks https://mobile.facebook.com/notifications.php, which also marks all notifications as read as soon as you visit that page. (Thanks for your question!)
I am not sure if this is valuable but I didn't expect this behavior and had to turn the extension off. It's quite confusing actually because notifications in the extension are much more simplistic than on the Platform.
I'd like to not have it, too. I'll have another dive into how to fetch notifications on Facebook without setting them as read.
Thanks for your response.
I already use (Angular + Nebular) in my main web application and I was concerned of any performance drawbacks if I use any Angular or any other major framework in comparison of the much smaller ones, thank you for clarifying that also.
I will be using the same stack for the browser extension now :)
I've checked and installed your ext "Notyfy", the idea is really great and I could see the use for it, best of luck :)
Have you thought of making it available on firefox, and does it take a lot of time in development to convert it from chrome to firefox?
Thank you for your kind words!
Notyfy is also available for Firefox and Edge, since they are pretty much 100% compatible with your Chrome Extensions.
Note on Firefox: They are really tough when it comes to Privacy. You can't even have Google Analytics to track the amount of anonymous users opening the popup. You'll need a big opt-in asking the user for their consent. I think it's overkill as they are everywhere. Chrome is more casual about it.
Got it, thanks :)
HI Muath, it would help to know what technologies you are comfortable with now?
I wouldn't introduce too much at once, try for example to build a chrome extension using whatever you are used to using for JS (JQuery?) and use the storage provided by chrome instead of Firebase. That'll be much easier and fun to set up.
Then if it is really needed, tackle Firebase. But is local storage good enough?
Thank you for your response.
About the technologies, I already know and use Angular in my main web app, I just thought it would be better to use a smaller framework from the performance aspect.
The extension would include authentication and APIs/scripts from google cloud functions and it requires saving it to a database after, I believe Firebase is a better option in this case.
Firebase sounds like the right tool for the job then! Good luck.
Thank you, good luck to you as well 🙂