For your next side project, make a browser extension
I spent some time some productivity extensions, for gmail replies[0] and quick notetaking[1]. It was a lot of fun, but like other people have mentioned, porting to and working with manifest v3 is not as nice. I've noticed also that the way Google asks for permissions from the user is done in human-understandable, but worst-case language. For example, I think there was something where I wanted access to the current tab, so I could inject an overlay. I think a friend told me during installation that I was asking to see their history and browsing data. Which is true - knowing what page they're on does let you recreate their browsing history... but when presented to the user like that, it makes it seem like tracking history is the primary thing the extension does? Anyway, frustrating.
[0] https://chrome.google.com/webstore/detail/akndolpagcjaolannk... [1] https://chrome.google.com/webstore/detail/icdbglcdnjonofjpcf...
I was enthusiastic enough about extensions that I decided to publish a book about building them: https://www.buildingbrowserextensions.com/
Browser extensions are severely underrated as a platform because they aren't sexy. For all that mobile devices have given us, so much of our work continues to be done using a desktop browser. Enhancements such as augmenting websites with widgets, supplying contextual information, and automating repetitive tasks using the authenticated session - when applied appropriately - can save someone hours every day.
A lot of the most useful software I've made for myself has been browser extensions.
Spend too much time on Hacker News? I made an extension to freeze the front page so it updates once every 6 hours.
Spend too much time on Reddit? I made an extension requiring a password to be input for every page I visit.
Want to extensively filter LinkedIn jobs, and track which jobs you've applied to? I made an extension to apply very specific filtering to LinkedIn job postings, and to track my application status.
I do wish the Chrome extension API wasn't so annoying to use. Each time I make an extension I sort of dread the process since it's not a good developer experience, but I always find the result to be very useful in my day-to-day life.
No, don't.
They're not that hard to code, but both Google and Mozilla keep making changes and then bitching at you through their app stores to change your thing. I recently dropped Chrome support on an add-on because 90% of the users were on Firefox. Since it blocked some ads, I figured Google would continue to whine, and it wasn't worth the hassle.
This is a plug for an extension I didn't write, and have no stake in:
it's a browser extension that defeats the Pacer monopoly on (many) legal filings.
If you do have Pacer and download something, it automatically uploads it to a free server. Thus, it becomes free to everyone else. I think some Big Law firms must use it, because a surprisingly large number of docs are available free.
Legalities of this? They seem to be getting away with it.
It's not a quick hack for a personal project.
You have to sign up to the Chrome Web Store Developer Dashboard and agree to all the terms and conditions, semi-publish the extension to a limited group of people (probably only yourself), and AFAIK you need to be logged in as one of the group members in order to be able to then see the webstore page of the extension and install it.
In order to update a small issue you need to submit a new version and wait for approval and hope that your account doesn't get flagged because you're using the extension to store all your (tab-)history into a custom database.
Last time I was making one (for myself, not to publish), my main issue was that browsers made it nearly unusable to have a private local extension because you only had two choices:
- either upload it on their website and go through approval everytime
- either lower security to run in developer mode, and have an alert warning you about it every X minutes, ruining your focus
VSCode on the other hand has no issue running local extensions at the same time as extensions from the marketplace.
It's also a good way of interviewing. As part of your cover letter, explain that you decided to improve the website of your future employer in some way and give a link to the extension.
Someone I interviewed once did something like this and we couldn't think of a reason not to hire them because they effectively showed us they were capable of understanding and modifying our existing code which was basically what we wanted in a candidate.
To extend the idea a bit…iOS shortcuts should be considered “extensions” by the same token.
They’re incredibly easy to make and can create a lot of value, plus they’re shareable.
As an example…I built https://SimplifyRecipe.com/shortcut in a couple hours and it’s been extremely useful for getting rid of the life story on recipe pages. Lots of people connected with that concept, so now I’m working on building a full-fledged app.
I love the section on "Earning the pixels", as this is something I also put a lot of time into in extensions, from the target site itself to the options page in my extensions having per-browser CSS to make sure it fits in with the browser's own options UI (and in light and dark mode).
With Twitter, earning the pixels in the site UI is even more fraught as it's a React Native for Web app, so you really don't want to touch the app's own DOM directly, as it will most likely get wiped out on the next render.
e.g. The latest version of Tweak New Twitter [0] keeps you on the "Following" timeline, gets rids of the new "For you" tab and adds a new "Retweets" tab - to highlight the Retweets tab as active when the user clicks it, I had to add a styling hook class to <body> and use that to manually style the Retweet tab as active and override styles for existing tabs to make them display as inactive. Another layer of fun: at any point the user can change the Default/Dim/Lights out theme and the highlight colour using the Display dialogue, so I needed to figure out how to detect these changes, figure out what was now being used and re-apply them to custom UI on the fly.
[0] https://github.com/insin/tweak-new-twitter#tweak-new-twitter
Browser extensions are useful. I've made some simple ones and published a few:
https://addons.mozilla.org/en-US/firefox/user/14310707/
But it's also worth considering where the browser gives priority. For example, while browser extensions can add custom keyboard shortcuts, they can't override the keybindings a website uses. Want to use the keyboard shortcut Ctrl-Shift-1 for a browser extension while a Google Docs page is focused? Nope, sorry, can't be done.
https://github.com/gsomoza/firefox-easy-container-shortcuts/...
It's pretty clear that while a browser extension can access browser APIs that a web app can't, the extension is still a second-class citizen in other respects.
I used the Opera browser for a while then moved to Firefox. One functionality I really missed was the little popup you get when you highlight some text. The popup would let you web search for whatever is highlighted for example. Anyway now on Firefox I made an extension that can do the same thing but then extended it further. At a basic level you can copy to clipboard, do a web search but also can do a Google Maps lookup too.
Often I'm reading a page and I come across some location like a city name or some place around the world or a GPS coordinate. Or something I want to research further. Now I just highlight it then select the appropriate action from the menu that popups up. Through the settings menu you can extend it further and add your own search.
Side note: For web search you can search using whatever search engine you want. Just change the string in the settings menu.
Here's the Firefox version: https://addons.mozilla.org/en-US/firefox/addon/popup-tooltip...
And the Chrome version (yeah had to learn Manifest v3 to port): https://chrome.google.com/webstore/detail/popup-tooltip/opbi...
I use this often and made it for myself... but maybe others find it useful too.
I don't know how the Firefox extension store is, but publishing the extensions in the chrome extension store was really torture. They unpublished a plugin I published years ago. When I contacted support later, they said it was removed by mistake and republished it. and this situation continued for 4 5 times. Finally, I said I can't deal with it and stopped caring. Does this kind of thing still happen?
I wrote something similar about extensions being a good starting place for indie hackers that are trying to make money. Many of the same conclusions as the author of the article — low barrier to creating, can sometimes grow and be useful for a lot of people with no scaling issues: https://www.indiehackers.com/post/why-browser-extensions-are...
Also, I run a service that lets extension developers take payments in their extensions and it's been really cool to see many extensions take off like the author describes.
Would recommend waiting a few weeks for Firefox to ship Manifest V3 because Chrome store isn't accepting new V2 extensions and Mozilla isn't yet accepting V3.
Firefox MV3 is also a bit different, requiring some swapping / toggling that wasn't needed for MV2.
Worth the pain though as extensions are like magic fairy dust for websites you otherwise cannot control.
This sounds great and all, but I've seen so many instances of good extensions giving up when the browsers decide to make your extension unusable... IE Firefox deprecating NPAPI, google trying to force manifest v3, etc etc.
I believed in stuff built on top of browser platform too and had written something useful for me and it turns out a few dozen more people through the Chrome store. Then Google for some ideological reason related to PWAs killed the Chrome Apps platform and all of a sudden, a great way to distribute functionality just disappeared.
https://blog.chromium.org/2020/01/moving-forward-from-chrome...
Apparently it is now alive-ish (there seem to be a set of follow up announcements) but was burnt.
I built 3 chrome extensions for fun:
Notion Boost - 50k+ users , made 3000$ so far https://github.com/GorvGoyl/Notion-Boost-browser-extension/
ChatGPT Writer - 20k+ users within 3 weeks of launch https://chatgptwriter.ai:
Gimme Summary AI - just launched https://gimmesummary.ai
The author acknowledges but doesn't go into depth on Manifest V3, and that's basically the only reason I don't really want to write a browser extension.
I try to stay away from browser extensions as much as I can, it will only bloat my browser even further. Firefox + Tampermonkey should be enough in my case.
Is there anything a browser extension can do that Tampermonkey cannot?
I was thinking about building a browser extension that allowed me to tag videos on YouTube and using AI figure out if I would like to hate new videos and mark them as such (interesting, exceptional, funny, not interested, spam, time waster etc.). Maybe it could rewrite clickbait headlines too. Eventually it could completely edit all the rubbish out of YouTube videos based on my likes and be a kind of personal assistant to help to avoid mindlessly watching things that aren't good for me...
Chrome Extension Developer experience was the worst. A week of wait of approvals, Management of extension packages isn't great. Rejects on image formats etc. Firefox hasn't yet adopted Manifest V3 which is also a bummer.
After all this, I still managed to put up Selaro which is a workplace links organizer: https://getselaro.com
no dont. I would like to see less people doing browser extensions, and more people writing simple servers. so many companies offering free tier, it would be helpful for people to share who they chose and why, and for people to swap recommendations.
extensions allow you to bypass the same-origin policy, but they dont give you the full power of a server. plus with a server, you can choose any language you want, you aren't locked into JavaScript like you are with an extension.
Any suggestions for a good stack to develop extensions? I'm coming from nodejs/react, and would like to stay close to that. Is there an up-to-date stack I can clone, copy, and deploy with something like 'yarn run build' and start hacking?
I have a personal browser extension that I use as a grab bag of assorted tools and fixes for sites that annoy me. It's half way between a userscript, a bookmarklet directory, and a UNIX shell, with little commands that run automatically on certain sites or operate on the DOM, and can pipe output to other commands. Here's a very old video of it in action: https://vimeo.com/118090094 (It's no longer open source because I don't want to have to maintain it for other people.)
> I had a strict rule for this project: no operational stress. This meant no servers, and no data storage.
Building for someone else's app/extension store always carries some risk, and therefore operational stress. In addition to the manifest v3 concerns others have raised, there are also the random takedown notices (that arrive with zero notice, and for zero reason). It may be easy to get started building an extension, but it's certainly not without operational risk.
My favorite chrome extension pattern is state stored in background page that's communicated with injected content scripts via redux + actions.
You get a crazy powerful state management model that can allow traditional web pages to feel like SPA (your extension around it at least)
It's a shame manifest v3 absolutely butchers this use case because there's no long term live-state management other than opening an extension tab.
Unless I can write and distribute extensions without signing a legal agreement or having to involve a thirdparty gatekeeper, I'd rather not.
undefined
I have already made one browser extension for easily adding bookmarks into the category (folder) you want to, or create a new subcategory while adding a bookmark. Try it out!
peterhil/spellbook: Spellbook is a bookmark extension for Chrome and Firefox https://github.com/peterhil/spellbook
If you don't want to actually write the code and deal with the browser webstores, you can also use an "extension builder" tool like https://www.pixiebrix.com/ to call APIs, move data around, and build simple UIs.
> making an extension is a fun and efficient way to create useful software, especially when you can only invest limited time and effort. Instead of starting from a blank slate, you can start by tailoring some piece of existing software to better serve your own needs
...and a quick way to get burned out due to churn from incompatible changes (either from websites or browsers) breaking your project.
What you're looking for may be modifying an existing Free Software project you use instead, which is something I wholeheartedly recommend. There's often a high chance that you'll be able to upstream your changes, making it better for everyone and taking ongoing maintenance out of your shoulders - unless you actually want to maintain it as your own, which is also something you're free to do.
If I want to build a cross platform browser extension is there an easier way then having to write it twice?
I guess Honey is a good example of a browser extension that went on to turn into a successful business.
I very briefly looked into extensions for some things I wanted to do, but got kind of lost in the documentation. The browsers seem to expose a very large API and I failed to figure out if it supports what I wanted.
Essentially what I wanted was to be able to implement a simplified version of the "wget" command. I wanted to be able to invoke the extension on a page and have it save the current page contents to a file, then navigate to each link on the page that doesn't go offsite and save those pages, and so on to a specified depth.
(Why not just use wget itself from my terminal? Because the pages I was interested in have JavaScript that modifies the DOM, and it is that modified DOM I want).
undefined
I've already made a few browser extensions, and I must say, it's a much bigger pain in the ass these days. Getting signing working, or disabling in browser is a terrible process, that I'm not going to do for a side project.
It seems the Perfect place to plug a chrome extension I (half-assed) hacked together.
https://datum.alwaysdata.net/static/extension/index.html
It crowdsources tags for hacker news threads. And it also adds contextual and relevant real world data while you browse a HN thread.
It's a companion extension for the website https://datum.alwaysdata.net . I want to grow my tester community.. don't be shy !
You can access the code !
No, as a side project, make a browser and free yourself from the browser monopoly.
Well, shameless plug, but I made something similar: https://github.com/rounakdatta/twitter-profile-search :)
If someone is looking for ideas, I'd love an extension that shows if a png image is really transparent instead of being a png or jpg with literal checker box patterns on the image.
I tweeted about this once a while back[0], it gained some traction but never materialized.
This would save a lot of time trying to find transparent images that turn out to be fake. These types of sites are worse than the "fake" github issue tracker sites.
[0]: https://twitter.com/nickjanetakis/status/1545876124865101826
Funny to see this. I recently worked on a browser extension[0] to expand Twitter.com's functionality as well, specifically to connect it to Mastodon and show Mastodon posts amongst ordinary tweets.
It was a lot of fun to build this, though dealing with the oddities of Chrome was frustrating at times. Especially when it comes to permission granularity.
[0] - https://chrome.google.com/webstore/detail/mastodon-chirper/l...
This looks great, though extensions being sold has a history of going badly for the users, is it safe to install this now it's owned by Tweethuntet who seem big on "monetisation" ?
As the author of a popular extension [1] (400k users), I don't think Chrome extension is a good platform:
1. The review process is unstable and frustrating, sometimes it passes in 10 mins, sometimes it takes over ten days, it's painful if you're releasing some emergent bug fixes. 2. No support for monetization at all, Google Adsense are not allowed in browser extensions, no native payment support in the platform.
It's been many months since I tried, but I think you have to redo thateach time you restart Firefox, i.e. contrary to Chrome, you cannot make it persistent.
Are browser extensions safe? My understanding is they generally get access to everything you browse, and are too big a security risk for a work machine.
Is it as bad as I think?
I developed one a few years ago, TDD and all. Automating browser testing was surprisingly difficult, and required working around some gaff to get it going at all. Nobody else seemed to be doing it, either, which was surprising. Last I checked it didn't seem any better, so I'm not too keen to do any more. At least the extension has continued working for many years with minimal upkeep.
From a personal experience, some of the extensions I built were for enhancing productivity for internal tool (with a good amount of userscripts and userstyle ) to reduce the amount of paper cuts in my use case and shared with multiple team with positive feedback before escalating to management so I could get in touch with the team in charge of the tool and suggest the enhancements.
I did this a while back, wanted a bpm tapper which was always available in chrome. Super useful when browsing eg. youtube or soundcloud for tracks to add to a dj set
https://chrome.google.com/webstore/detail/tap-bpm/gfagkcalol...
Made one recently to put Google's trending page in an extension! Loved how quick you can build and release something usable. Check it out
https://chrome.google.com/webstore/detail/trending-google-se...
Im a big fan of browser extensions as well. They are great side projects that can grow to hundreds of thousands of users. They can be as simple as html and javascript. My most popular extension is a url shortener tool and its grown to over 400k users https://t.ly/extension
Whenever you hear abou SA you should remember https://en.m.wikipedia.org/wiki/William_Sampson_(author). He was tortured so badly in SA that even reading about it will give you nightmares.
This post inspired me to hack together an extension for a side project I’ve built a while ago and almost forgot about it.
Check! I made a "wrapper" of the amazing JSON Editor Online: https://addons.mozilla.org/en-US/firefox/addon/json-editor-e...
Yep, I ditched tabs from firefox altogether.
Now use my own sidebar extension.
https://addons.mozilla.org/en-US/firefox/addon/grasshopper-u...
Reading about all of the work that this developer went through to scale Twitter's walled garden makes me pine for the days of text-based Usenet news groups.
How are people monetizing Chrome extensions? I was under the impression you couldn’t do subscriptions anymore (without bringing in a third party) but you could still charge a one-time purchase fee from the Chrome App Store, is that not the case?
I made one too!
HTTPS://HeadlampTest.com
People who are complaining about writing Chrome extensions now, clearly didn't write them early on. It's still not as easy as it needs to be, but back in the day they were extremely difficult to develop/debug.
Chrome Extensions could be written in Java using a transpiler like this one to transpile to JavaScript: https://www.jsweet.org/
Creating and modifying browser extensions have been one of the most useful quality of life utilities ive written.
I'm dreading the switch to V3, I'll have to figure out what I can port over and how to do so :/
Extensions were the only way to help me fix my habit of constantly rebrowsing websites. It was chronic at one point.
Might come in helpful for someone: Https://fetcher.page
Is there any communities such as slack or discord channels specifically focused on browser extensions development? It seems hard to find.
If the project is for non-technical folks, is there sufficient awareness about how to use extensions at this stage?
Also no mobile seems like a big deal
Not sure if things have changed lately but as a user, I try to avoid browser extensions because they seem to be very insecure.
Agree. One of usecase, is to let user select the "theme" for the project by just installing theme extension.
Curious if people have done a lot of iOS safari extensions. Seems like a new api
For how much this was sold?
I’ll say even more.
Build an iOS Safari extension. There is a good rush now
The real question is how much money did the OP made?
I want to make a StumbleUpon clone again.
PSA: If you're making a browser extension, please support Firefox as well, not just Chrome. Firefox makes it easy since they support the `chrome` namespace for functions [0].
You can also use React/Next.js or another frontend library too if you prefer. I had created an extension a while ago out of pure HTML, CSS, and TypeScript but I found that was quite annoying to add more complex features with lots of state. I switched to Next.js and it's now on par with regular web DX [1].
[0] https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Web...