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.
> 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.
Sounds like the making of a good lifestyle SaaS product.
A long time ago, I put together this writeup of an extension I made. It's a bit old, and I rewrote the extension since, but the bones are still pretty similar:
I do use it for other sites as well, like news sites. You can freeze any site for a specified period of time. It definitely makes me use the sites less frequently.
It is about blocking yourself so the routine is interrupted. Suddenly it is no one click routine action anymore, but you take make the decision to bypass a conscious decision of the brain. At that point you can decide to stop and go back to your actual work and thus break the habit of ope ing that page too often.
There's a good chance a lot of these plug-ins could be vastly simplified and just written as user scripts in Tampermonkey, so you might want to look into that.
I don't want to have to do that though. To use a car analogy, don't give me an autoshop/factory filled with tools and machines and metal and plastic, I want to be able to just buy the truck.
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?
Last time I wrote an extension (which is a while ago) the changes between the Chrome and Firefox version were minimal. And Edge takes unmodified Chrome extensions.
Obviously depends on the APIs you want, but a typical extension should be trivial to make compatible and package for both Chrome and Firefox.
This _was_ easy the last time I created a new extension, as Firefox also supports the `chrome` namespace for extension APIs, but now that Chrome Web Store isn't accepting new Manifest V2 extensions, you'll at the very least have to have separate manifest files for MV2 and MV3 versions, and different implementations where relevant for MV2 and MV3 (depending on which features your extension needs - e.g. if your extension is really just a way to inject a content script into a page, you might just need separate manifest files).
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.
> Legalities of this? They seem to be getting away with it.
The US government runs PACER itself, they don't contract it to a profit-motivated third-party. [1] As a result, they're pretty lenient. At one point, their website said: "The information gathered from the PACER system is a matter of public record and may be reproduced without permission".
So it's totally legal.
The RECAP people also make it _really_ easy to ingest documents. For example, lawyers can add a RECAP email address as one of their default contact addresses with the court. Then all filings on any case that lawyer is involved in get automatically ingested when they are filed.
[1]: Well, they outsource the administration to a third-party. But it seems more like a "we pay you, you keep the lights on", vs a public-private partnership where the third-party has a profit incentive based on the revenue of the service.
I put in the "legalities" part mainly because I was thinking of a similar extension to defeat Elsevier & other vultures of scientific publication. Those people might be more litigious.
My home province gave a private company a 50+ year monopoly on our land title records. I would _love_ something like RECAP for our land title records...but I suspect it's not possible to do it without violating the usage agreement that gets you the record in the first place.
> defeat Elsevier & other vultures of scientific publication
That’s a great way to have your life savings drained, or worse. Don’t do it if you live anywhere where you can be nabbed by Uncle Sam. See Aaron Swartz, Alexandra Elbakyan.
well, millions of people live somewhere that fit that description. surely someone’s done it? i dont have any personal use for it but i find it hard to believe “where you live” is any material barrier to free scientific information
I was just talking to a lawyer about pacer and he told me about recap this past Friday. It’s legal bec court documents are public record. Pacer is officially there just to pay for server and development costs if someone else wants to front that the US gov doesn’t care. That’s also why the first 1000or so docs are free, if you don’t cost them much they’re not gonna charge you. It’s when you start becoming a larger cost center that they need to recoup some of that. And most legal firms can obviously afford to pay.
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.
Hating on JS and suggesting people write servers aren’t very constructive suggestions. A browser extension is just a client, you can back it with the “full power” of a server if you want.
Please keep Hacker News Guidelines[1] in mind when making your comments. Ad hominem attacks don’t bolster your argument and make this forum a worse place to have open discussions.
On top of the language/toolkit restrictions, I'm not a huge fan of writing browser extensions simply because of the limitations they pose compared to just about anything else… server side app, static SPA, electron, and native desktop/mobile are all so much more capable that when ideas spring up, those are the platforms they tend toward.
I think though that if browser extensions broadly became capable of browser UI overhauls like Firefox extensions used to be, I'd be much much more interested. Most of the things I want to change about web browsing are in the browser, not the web, and making those changes by way of extension is far more practical than the nightmare of maintaining a browser fork.
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
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...
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.
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 just forwarded this off to my wife because we joke about how bad most recipes are with elaborate backstories. This is a product that I really want while also solving a problem that doesn’t quite meet the threshold for me to actually do something about it. Stumbling upon it randomly was a good way for me to adopt it tho so there’s that.
Thanks! I’m happy to answer questions if you have any: Stephen at bate-man.com.
It’s a bit of a Wild West right now so there are very few resources. I just started building a couple tools using the shortcuts app (it comes with a builder GUI).
The system is more powerful than it looks. You can pull HTML from pages, grab all the links, do for each loops, if statements, variables, etc.
the biggest drawbacks are (1) the UI in the shortcuts app is targeted at non-developers and (2) not all features are supported on older devices and (3) you can’t issue “updates”, so once you share a shortcut it’s just out there and (4) people don’t usually have context for what a shortcut is.
But in exchange you get instant, one-click install without an approval process. It’s pretty cool!
There’s room enough for the both of us. :) but seriously thanks for the question.
The short answer is by being web-first and absurdly fast. SimplifyRecipe is for people who used Pinterest for a couple years but got annoyed by the cruft in that ecosystem.
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.
Hmmm the checkered background actually seems distinct enough that it wouldn’t be too difficult to automate its removal and just create a png with a transparent background.
> Hmmm the checkered background actually seems distinct enough that it wouldn’t be too difficult to automate its removal and just create a png with a transparent background.
You can do this with some image editors and a "magic wand" but you typically end up with jagged edges unless the shape is basic or you have specialized tools that can auto-feather them in a natural way.
I think with a bit of code you could check if the image type is png and it hasn't been flattened then overlay a little icon that says it's really transparent when you activate the browser extension.
Although I did just discover an interesting trick[0]. If you goto let's say images.google.com and search for something, you can tell right away if it's transparent or not by selecting the image and dragging it to anywhere on the page. If it shows the checker boxes while dragging then it's not transparent.
I was caught out by this today. My use case is I downloaded an image and realized it was mostly transparent and relied on a certain colour background to show properly. I ended up using the snippet tool in Windows instead to get the image, which was OK for my use case (taking some notes).
In addition, one annoying thing is "save image as" seems to only work on image tags, not images that come from CSS. So I think some kind of image tool that handles these kinds of issues, including the "is transparent" would be quite cool.
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've used NextJS for browser extensions, works well. There are templates on GitHub but to be honest it isn't that hard to package into a browser extension.
Maybe they're wanting the image/font/script optimizations Next.js includes, or the other tooling it abstracts (e.g. SWC). You can use Next.js in full-SPA mode (e.g. next export) if you want. I would recommend that or Vite+React over CRA.
Do the image/font/script optimizations also work for SSG? I thought it was just for server side rendering. Also, does `next export` emit raw HMTL/CSS/JS or does it include React as the renderer as well? I seem to remember that `next export` could emit a build that (potentially) could work without JS as well, ie using React as purely a templating language rather than for logic.
heard you guys on the logrocket podcast btw, thank you for taking on this challenging but unexplored market. do you have any design patterns for (as geoffreylitt said) “stably addressing dom elements” in twitter and gmail? i noticed there was a gmail specific extension platform launching here the other day, have yet to try it out tho
We have a lot of ideas on how to make this problem a lot easier. It's a big reason why extensions aren't as big as they could be. Browser extension devs having to tinker and even think about the DOM or any other website-specific quirk is a leaky abstraction.
If it's an issue, people's usual approach to solving that problem is to create some mapping of "twitter-sidebar : some XPath selector" on the backend and have their extension query whenever they want to interact with the web page.
They'll have e2e tests to check if their selectors or xpaths still work. If not, they'll figure out what changed and modify the xpath. Some automate this step.
It's tricky because A/B tests are a thing, websites might change based on geographical region, and a bunch of other stuff that leads to users seeing different things in the DOM compared to the e2e test). Logging errors to something like Sentry mitigates some of this, but the complexity is still quite large.
It stems from the fact that frontends only consider humans, not robots. You either need to make your robot super resilient to change (above approach), make your robot act more like a human, have the website consider the robot ("Connect to Wallet", etc), or use the web app's backend API if it exists.
We're experimenting with all four of these approaches this year and seeing which ones are the most valuable to people, so stay tuned for more exciting extension stuff!
Not necessarily a suggestion, but I have used Elm for it :-). The point being, use what you'd use anyway for a website.
That said - with an extension some of your code is about interacting with existing pages. For that, much of the time vanilla JS might be good for compatability, since the page itself is already using X or Y or Z framework.
For the menus, extension page and so on, or complicated UI you want to show on top of a page, you could use React.
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.
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.
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].
The problem with supporting Firefox is that it doesn't yet support manifest v3. I know this support is coming, but seeing as Chrome right now disallows new extensions that don't use v3 it feels pretty delayed. It's also unclear how to test manifest v3 Firefox extensions before the support is officially out there (though maybe there isn't even beta support yet?)
firefox/mozilla doesn't really make it easy (compared to chrome)
mozilla now requires "add-on signing" [0]; extensions now have to be "signed" (By mozilla) before you can permanently side-load your own private extension onto regular firefox. they also require you to use 2FA [1] when setting up a firefox.com account (which is required in order for you to upload extensions so they can be signed).
at least with chrome you can just enable 'developer mode' and drag and drop your own extensions and use it right away without having to deal with any of that.
Ah I reckon what you meant was "Oh this approach only temporarily installed the add-on, your parent post was asking about a way to permanently install an add-on." Took me a while to figure out what you meant.
Ah missed that; yep, the add-on will remain installed until the browser is restarted. That is a little annoying!
Hm. I tried this with an super simple extension[1] I had lying around and couldn't get any network requests to work. The error thrown in console was a generic "NetworkError", but the network tab shows no relevant entries at all. Not a great developer experience, especially compared to chromium.
Odd! Were you trying to fetch a public, CORS-enabled API? That should just work. If you were trying to make a network request for a non-CORS endpoint (eg fetch the google homepage or something), you'll need to add the domain to your permissions section.
I suspect this is it. There were a lot of things logged to console for twitter violating its own CSP, but I didn’t see any for my script.
It seems the overall handling of network errors in add-ons has a lot of room for improvement.
It should be noted that chromium allows the network request regardless of the CSP. This is the correct, User-Empowering approach. Firefox’s deference to the Origin to control the code the User is attempting to run is the antithesis of what a User Agent ought to be.
I have CORS configured to allow the https//twitter.com/ origin. I could see firefox perhaps using a different origin for worker scripts? But hard to tell since the network tab doesn’t show any of the requests.
I could set up server logs locally, but there’s only so many hours in my life.
The signing requirement only applies to the stable and beta versions of Firefox. It can be disabled in about:config in Firefox Developer Edition (which is basically the same as beta), as well as in Nightly, ESR, and Unbranded builds [1].
I was referring to desktop, not Android here. To my knowledge, Android currently requires a custom collection on AMO for installing anything outside the default list.
yes, thats all true. however people should be able to choose their own level of protection. not have the most secure (and most cumbersome) rammed down their throats.
I can understand why the first example is burdensome and don't have any quarrel with it but I can't help but lack sympathy for the second example. If your barrier as a developer is setting up 2FA I can't help but doubt you ever cared much about supporting Firefox anyway. This is like a taxi driver complaining about needing to have proof of insurance and a driver's license.
I'm just an old-fashioned programmer, I don't think I should have to register with an authority and submit all of my code to them just to be able to run something I've written for myself on my own computer.
I think mail confirmation or yubikey is fine but I never understood why I need an app on my phone for authentication. What if I lose the phone? How would I get my account back?
Tried some authenticator app on the desktop once also and got locked out of my account after that because my computer crashed and I had to reinstall it. Never again.
i very much care about supporting firefox users. for example, i maintain a separate, mozilla-signed, manifest v2 version of an extension i made [0] just so firefox users can keep using it. i do so even though this compromises my own ideals about not wanting to use 2FA out of principle.
Svelte / Sveltekit also works great and is a bit more lightweight / performant while being easier / faster to develop with.
I have an implementation on GitHub for my personal hybrid bookmark-manager / hackernews-reader newtab extension[0]. Its still a wip but i use the website version[1] daily as it doesn’t need to be installed and can still be set as my newtab page (warning as I’ve never opened it on mobile).
Do you have any pointers on effective profiling strategies of extensions on Firefox? I tried to contribute to an open source extension and ran into an issue where the "Performance" tab won't work [1]. I tried using the Firefox Profiler, but that's for the whole browser. It can work, but it gives too much noise. I love Firefox, but this put a huge damper on my willingness to work on browser extensions.
FWIW, I also shipped Twemex on Firefox, but the userbase is comparatively tiny—-about 20x more users on Chrome (or Chromium-based browsers using the Chrome store) compared to Firefox.
I’m excited about the ongoing push towards cross-browser standards in this area; Safari has become way more compatible recently as well.
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.
Because Firefox users install more extensions than Chrome users do. Or at least they used to. I don't really care; it's an old project I keep going for existing users.
I've had an extension on Firefox and Chrome for almost a decade. Chrome is 90% of our users. It's possible that FF users are more likely to install, as mentioned above, but that doesn't outweigh the sheer number of people on Chrome.
With the manifest v3 update, we're changing our freemium structure, and updating our docs. But since FF hasn't figured out all of their manifest v3 stuff, we're not able to update for that 10% of users. It's going to be confusing because our marketing material will reference the new freemium model. But it's no contest as to what we should primarily reference, since there are so few people on FF by comparison to Chrome.
The lack of platform control creates a paradox where the more useful the extension you make, the more you're beholden to dance to somebody else's tune, ad infinitum, in order to retain the advantage you've created. Unpredictability is at the heart of it. You can invest x $/time, and not know if what you've created is going to stand for 1 year, or 10.
On the gripping hand, when the platforms in question are the dominant platforms of, err, all computing in this era, then the above described issue tends to be a minor one, in context, for many applications.
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.
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.
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?
Tampermonkey can change what's on the web page, but extensions can do much more than that, e.g. add toolbar menus and items to the context menu, add keyboard shortcuts, manage bookmarks, and so on. (See the API guide for an overview [1])
It's true that many extensions could "just be" Tampermonkey scripts. I'd guess they ship as standalone extensions due to a combination of: less friction to install, more discoverable, can extend with fancier features later on, and probably just inertia/ignorance from developers unaware of Tampermonkey.
A friend of mine uses this extension that tracks emails. It injects a pixel it made remotely into the email body. That sketches me out so much ha.
But yeah I have made a few extensions myself since I spend a lot of time in Chrome. If they go ahead with the anti-adblock I will have to learn Firefox's extension.
As for keyboard shortcuts, userscripts can do that by observing individual key presses. I personally use a tiny library [0] by the Violentmonkey team to do it which is easy to use and smooths out differences between platforms and browser implementations.
While userscripts can't add items to toolbar or context menus, you can register menu commands [1] which have the added benefit of being able to be added dynamically after examining page contents. This is done using the `GM_registerMenuCommand` api [2].
blocking ads amongst many other browser native features. managing history/tabs/bookmarks/adding right click options/interacting with native applications on your computer for a few
>Is there anything a browser extension can do that Tampermonkey cannot?
Blocking ads, translating web pages, bypassing paywalls, adding features to websites (like the YouTube extension), clearing trackers, I could go on and on.
> Is there anything a browser extension can do that Tampermonkey cannot?
Tampermoney is an extension, so it can obviously do the same as others. But how much of this does it make accessible to the user scripts? Can you access the local file system? Other Servers? Can you modify the browser-interface itself? Context menu, toolbars, sidebar, add shortcuts, etc.? Can you save persistent data? And can you do all this at an elaborated level of quality?
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" ?
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).
This will take you less than 30 minutes with playwright and or puppeteer. A browser extension probably won’t work and would take at least 10x as long to write.
I've tried something similar using Selenium. It worked for a while but then started failing at a site that was using Cloudflare's CAPTCHA. If my browser was launched by Selenium it would end up in a seemingly endless CAPTCHA loop. It failed using both Chromium and Firefox.
I was able to get it working again for a while with some experimental option settings in the Chromium driver which apparently made it harder for a site to figure out that some sort of browser automation was in use, but maybe a couple months later that broke too.
I found a Chromium driver that was specifically made to not be detectable. That didn't help.
I just gave Puppeteer a try, with Chromium and Firefox, and they both got similar CAPTCHA loops.
With Playwright same thing with Chromium and Webkit. With Firefox, to my surprise, it actually worked. In fact I wasn't even shown the CAPTCHA. The checking for a human passed without requiring interaction.
So...looks like Playwright with Firefox might do the trick, but I'm a bit concerned about how reliable that would be long term.
That's one of the reasons I was thinking about an extension--most people using a site are going to have extensions so they aren't going to be able to use the existence of extensions as a sign that a visitor is a bot.
A lot fewer normal users of a site will be using web testing automation frameworks, and so if the site can detect those it might trigger anti-bot measures. I wonder if Cloudflare not being bothered by Playwright in Firefox is due to something Playwright is specifically doing to be undetectable, or just something Cloudflare hasn't gotten around to acting on yet? (I assume it is nothing Firefox specifically did, because of Firefox getting stuck in the CAPTCHA loop under Puppeteer and Selenium).
You don't need an extension to do that. You can get by with a bookmarklet, which would be wise, considering how much contempt browser makers have for extension authors.
Wait...a bookmarklet can do stuff on multiple pages?
I thought that if I had a bookmarklet and invoked it on a page, and the bookmarklet navigated to a different page the running instance of that bookmarklet would go away.
A bookmarklet is more or less just a JS expression that executes on command (the user's, that is). The execution model is approximately the same as for content-delivered scripts, and it's subject to the same constraints.
So, yes, if you just naively write a bookmarklet that navigates to a new page with e.g. assignment to window.location and then expect any result other than the next line of code not executing, then you're going to be disappointed. You solve this the same way you'd solve it if you were writing an ordinary Web app--implemented in JS delivered by the server with script elements on your own page. Two stupid easy solutions that immediately come to mind: use XHR/fetch instead of actual page navigation; alternatively, have the bookmarklet open up a ~postage stamp-sized window with window.open that you can use both to output visible diagnostics and to keep the crawler resident (by doing all the work in the diagnostic window's context, which uses window.opener to control the initial tab as its puppet)... etc.
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.
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.
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.
Also, I'd love to hear other extensions people have made in the same vein the author talks about — things that get on their nerves so they did something about it. Here are mine:
284 comments
[ 2.6 ms ] story [ 248 ms ] threadSpend 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.
Sounds like the making of a good lifestyle SaaS product.
https://bpev.me/blog/favioli/
Me, I just open a guest account, or a new profile, etc. Meaning, the extension is at most a reminder to try to stop. it's still trivial to bypass
Well, of course. You can also disable the extension, but that's not the point.
A bypass for 15 minutes button might be too weak, but a small math problem or a password you need to get from your manager would be enough friction.
The decision to bypass after being interrupted is with you, and that's ok.
Obviously depends on the APIs you want, but a typical extension should be trivial to make compatible and package for both Chrome and Firefox.
Disclaimer: I'm the author and maintainer of the framework.
HTTPS://HeadlampTest.com
https://free.law/recap
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.
The US government runs PACER itself, they don't contract it to a profit-motivated third-party. [1] As a result, they're pretty lenient. At one point, their website said: "The information gathered from the PACER system is a matter of public record and may be reproduced without permission".
So it's totally legal.
The RECAP people also make it _really_ easy to ingest documents. For example, lawyers can add a RECAP email address as one of their default contact addresses with the court. Then all filings on any case that lawyer is involved in get automatically ingested when they are filed.
[1]: Well, they outsource the administration to a third-party. But it seems more like a "we pay you, you keep the lights on", vs a public-private partnership where the third-party has a profit incentive based on the revenue of the service.
I put in the "legalities" part mainly because I was thinking of a similar extension to defeat Elsevier & other vultures of scientific publication. Those people might be more litigious.
My home province gave a private company a 50+ year monopoly on our land title records. I would _love_ something like RECAP for our land title records...but I suspect it's not possible to do it without violating the usage agreement that gets you the record in the first place.
That’s a great way to have your life savings drained, or worse. Don’t do it if you live anywhere where you can be nabbed by Uncle Sam. See Aaron Swartz, Alexandra Elbakyan.
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.
[1] https://news.ycombinator.com/newsguidelines.html
I think though that if browser extensions broadly became capable of browser UI overhauls like Firefox extensions used to be, I'd be much much more interested. Most of the things I want to change about web browsing are in the browser, not the web, and making those changes by way of extension is far more practical than the nightmare of maintaining a browser fork.
After all this, I still managed to put up Selaro which is a workplace links organizer: https://getselaro.com
https://blog.mozilla.org/addons/2022/11/17/manifest-v3-signi...
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 hope it works well for her. There’s still lots more work to do to get it fully working but we will get there! Really appreciate it.
It’s a bit of a Wild West right now so there are very few resources. I just started building a couple tools using the shortcuts app (it comes with a builder GUI).
The system is more powerful than it looks. You can pull HTML from pages, grab all the links, do for each loops, if statements, variables, etc.
the biggest drawbacks are (1) the UI in the shortcuts app is targeted at non-developers and (2) not all features are supported on older devices and (3) you can’t issue “updates”, so once you share a shortcut it’s just out there and (4) people don’t usually have context for what a shortcut is.
But in exchange you get instant, one-click install without an approval process. It’s pretty cool!
The short answer is by being web-first and absurdly fast. SimplifyRecipe is for people who used Pinterest for a couple years but got annoyed by the cruft in that ecosystem.
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
You can do this with some image editors and a "magic wand" but you typically end up with jagged edges unless the shape is basic or you have specialized tools that can auto-feather them in a natural way.
I think with a bit of code you could check if the image type is png and it hasn't been flattened then overlay a little icon that says it's really transparent when you activate the browser extension.
Although I did just discover an interesting trick[0]. If you goto let's say images.google.com and search for something, you can tell right away if it's transparent or not by selecting the image and dragging it to anywhere on the page. If it shows the checker boxes while dragging then it's not transparent.
My life is complete now.
[0]: https://www.youtube.com/watch?v=G3Y5PcuH23Y&t=173s
In addition, one annoying thing is "save image as" seems to only work on image tags, not images that come from CSS. So I think some kind of image tool that handles these kinds of issues, including the "is transparent" would be quite cool.
If it's an issue, people's usual approach to solving that problem is to create some mapping of "twitter-sidebar : some XPath selector" on the backend and have their extension query whenever they want to interact with the web page.
They'll have e2e tests to check if their selectors or xpaths still work. If not, they'll figure out what changed and modify the xpath. Some automate this step.
It's tricky because A/B tests are a thing, websites might change based on geographical region, and a bunch of other stuff that leads to users seeing different things in the DOM compared to the e2e test). Logging errors to something like Sentry mitigates some of this, but the complexity is still quite large.
It stems from the fact that frontends only consider humans, not robots. You either need to make your robot super resilient to change (above approach), make your robot act more like a human, have the website consider the robot ("Connect to Wallet", etc), or use the web app's backend API if it exists.
We're experimenting with all four of these approaches this year and seeing which ones are the most valuable to people, so stay tuned for more exciting extension stuff!
That said - with an extension some of your code is about interacting with existing pages. For that, much of the time vanilla JS might be good for compatability, since the page itself is already using X or Y or Z framework.
For the menus, extension page and so on, or complicated UI you want to show on top of a page, you could use React.
[0]: https://github.com/claui/tante-jacky/blob/9c6922dd5184fb3674...
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.
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...
[1] https://css-tricks.com/nextjs-chrome-extension-starter/
mozilla now requires "add-on signing" [0]; extensions now have to be "signed" (By mozilla) before you can permanently side-load your own private extension onto regular firefox. they also require you to use 2FA [1] when setting up a firefox.com account (which is required in order for you to upload extensions so they can be signed).
at least with chrome you can just enable 'developer mode' and drag and drop your own extensions and use it right away without having to deal with any of that.
[0] https://blog.mozilla.org/addons/2020/03/10/support-for-exten...
[1] https://blog.mozilla.org/addons/2021/03/11/two-factor-authen...
1. Ctrl-shift-a to open add-ons page
2. Click the cog, and select "debug add-ons"
3. Click "load temporary add-on"
4. Select a file in your extension.
5. Done.
This worked for me earlier this week.
Key word from the parent post: "temporary"
Ah missed that; yep, the add-on will remain installed until the browser is restarted. That is a little annoying!
https://github.com/JacksonKearl/FeelingBlue/blob/main/extens...
Eg:
"permission": [ "storage", "https://google.com" ]
Not certain that's this user's issue, but that is another thing to check.
It seems the overall handling of network errors in add-ons has a lot of room for improvement.
It should be noted that chromium allows the network request regardless of the CSP. This is the correct, User-Empowering approach. Firefox’s deference to the Origin to control the code the User is attempting to run is the antithesis of what a User Agent ought to be.
I could set up server logs locally, but there’s only so many hours in my life.
[1]: https://wiki.mozilla.org/Add-ons/Extension_Signing
[0] https://github.com/fanfare/googleimagesrestored/releases
I have an implementation on GitHub for my personal hybrid bookmark-manager / hackernews-reader newtab extension[0]. Its still a wip but i use the website version[1] daily as it doesn’t need to be installed and can still be set as my newtab page (warning as I’ve never opened it on mobile).
[0] https://github.com/fractalhq/nutab [1] https://nutab.vercel.app
[1] -- https://bugzilla.mozilla.org/show_bug.cgi?id=1766271
I’m excited about the ongoing push towards cross-browser standards in this area; Safari has become way more compatible recently as well.
The library is tiny, under 5 kb.
https://github.com/peterhil/rosegarden
https://chrome.google.com/webstore/detail/trending-google-se...
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.
With the manifest v3 update, we're changing our freemium structure, and updating our docs. But since FF hasn't figured out all of their manifest v3 stuff, we're not able to update for that 10% of users. It's going to be confusing because our marketing material will reference the new freemium model. But it's no contest as to what we should primarily reference, since there are so few people on FF by comparison to Chrome.
On the gripping hand, when the platforms in question are the dominant platforms of, err, all computing in this era, then the above described issue tends to be a minor one, in context, for many applications.
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...
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.
Is there anything a browser extension can do that Tampermonkey cannot?
It's true that many extensions could "just be" Tampermonkey scripts. I'd guess they ship as standalone extensions due to a combination of: less friction to install, more discoverable, can extend with fancier features later on, and probably just inertia/ignorance from developers unaware of Tampermonkey.
1. https://developer.chrome.com/docs/extensions/reference/
But yeah I have made a few extensions myself since I spend a lot of time in Chrome. If they go ahead with the anti-adblock I will have to learn Firefox's extension.
While userscripts can't add items to toolbar or context menus, you can register menu commands [1] which have the added benefit of being able to be added dynamically after examining page contents. This is done using the `GM_registerMenuCommand` api [2].
[0]: https://violentmonkey.github.io/guide/keyboard-shortcuts
[1]: https://imgur.com/a/SWpOoRS
[2]: https://violentmonkey.github.io/api/gm/#gm_registermenucomma...
Blocking ads, translating web pages, bypassing paywalls, adding features to websites (like the YouTube extension), clearing trackers, I could go on and on.
Tampermoney is an extension, so it can obviously do the same as others. But how much of this does it make accessible to the user scripts? Can you access the local file system? Other Servers? Can you modify the browser-interface itself? Context menu, toolbars, sidebar, add shortcuts, etc.? Can you save persistent data? And can you do all this at an elaborated level of quality?
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).
I was able to get it working again for a while with some experimental option settings in the Chromium driver which apparently made it harder for a site to figure out that some sort of browser automation was in use, but maybe a couple months later that broke too.
I found a Chromium driver that was specifically made to not be detectable. That didn't help.
I just gave Puppeteer a try, with Chromium and Firefox, and they both got similar CAPTCHA loops.
With Playwright same thing with Chromium and Webkit. With Firefox, to my surprise, it actually worked. In fact I wasn't even shown the CAPTCHA. The checking for a human passed without requiring interaction.
So...looks like Playwright with Firefox might do the trick, but I'm a bit concerned about how reliable that would be long term.
That's one of the reasons I was thinking about an extension--most people using a site are going to have extensions so they aren't going to be able to use the existence of extensions as a sign that a visitor is a bot.
A lot fewer normal users of a site will be using web testing automation frameworks, and so if the site can detect those it might trigger anti-bot measures. I wonder if Cloudflare not being bothered by Playwright in Firefox is due to something Playwright is specifically doing to be undetectable, or just something Cloudflare hasn't gotten around to acting on yet? (I assume it is nothing Firefox specifically did, because of Firefox getting stuck in the CAPTCHA loop under Puppeteer and Selenium).
I thought that if I had a bookmarklet and invoked it on a page, and the bookmarklet navigated to a different page the running instance of that bookmarklet would go away.
So, yes, if you just naively write a bookmarklet that navigates to a new page with e.g. assignment to window.location and then expect any result other than the next line of code not executing, then you're going to be disappointed. You solve this the same way you'd solve it if you were writing an ordinary Web app--implemented in JS delivered by the server with script elements on your own page. Two stupid easy solutions that immediately come to mind: use XHR/fetch instead of actual page navigation; alternatively, have the bookmarklet open up a ~postage stamp-sized window with window.open that you can use both to output visible diagnostics and to keep the crawler resident (by doing all the work in the diagnostic window's context, which uses window.opener to control the initial tab as its puppet)... etc.
Might come in helpful for someone: Https://fetcher.page
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.
- Remove Floating Banners: A button that gets rid of all `position: fixed` elements on a page to give you more reading room. https://chrome.google.com/webstore/detail/remove-floating-ba...
- Autodelete History by Keywords: Remove history / download entries for keywords or URLs automatically as you browse. https://chrome.google.com/webstore/detail/autodelete-history...
— Auto Scroll Search: Lets you CTRL-f search infinitely scrolling web pages. https://chrome.google.com/webstore/detail/auto-scroll-search...
Link? Edit: nvm, found it https://extensionpay.com/