For your next side project, make a browser extension | Hacker News Reader

For your next side project, make a browser extension

geoffreylitt.com

516 pointsGlench279 comments

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...

They're describing the worst-case thing someone could do with the privilege being granted, because they have no way of saying what the developer will do with the privilege.

The way to make the prompt sound less scary, is to use finer-grained permissions where the worst-case thing someone could do is less scary.

(Or, if there aren't any fine-grained permissions suited to doing your task — then propose some! The browser vendors would love to get real feedback on the kinds of fine-grained hypothetical privileges that extensions authors would actually find useful. Otherwise they're stuck reading the source code of a small sample of extensions, and extrapolating general patterns of privilege-use from there.)

> They're describing the worst-case thing someone could do with the privilege

I understand that - I wrote just that in my comment above. But it's a lot scarier to see a pop-up saying "This extension in the worst case does this", versus the worst-case scenario and a longer explanation. I see from your profile that you're at a web3 analytics company. I'll just say that I think metamask would be a lot less popular if at install-time, the chrome store alerted that it can "make you lose all your crypto savings". Yes this is possible, but there's more to the situation than just a few words, and you can't express that all in an alert() window.

> if there aren't any fine-grained permissions suited to doing your task — then propose some I think that is easy to say, but being subscribed to and reading updates to the extension feedback threads that I've been on for the last few years, I'm not super confident in Google acting on community feedback.

The thing is, from the POV of both Google and the user, there is no reason to assume a typical extension doesn't do the worst-case. The browser is just too juicy a target, and it's way too easy to make money on user surveillance / data exfiltration.

People rightfully point out that if you have access to current URL, you technically have access to browsing history. The right approach is to assume you will use it, hence the warning. Unfortunately, the only way to prevent this is to ensure the extension never, ever gets to make a networking request on its own, or populates any field that could become part of a network request triggered made by the site, or another extension.

It's a trust issue. It's not just fear that you might theoretically sell your extension to some unscrupulous third party. I don't know you personally. I have no reason to assume you are not an unscrupulous party. At this point there is, like, four or five extensions I trust enough to use, and it's mostly because they're OSS and it would be frontpage news on HN if any of them deviated from the expected functionality even slightly.

Having much finer-grained permission system would help a little, at the cost of making it incomprehensible to most users; there's a limit past which it's too complicated to be useful. We need actual innovation in the trust space - by which I don't mean crypto zero-trust shenanigans, but rather a system in which I can trust that, should the browser extension or phone app turn malicious, the vendor will be legally liable, and that it's actually enforced - thus disincentivizing malicious apps/extensions.

tbh I get your point but a lot of scams work because people don't realize. It's better to present the worst case and get people who don't read the fine print to uninstall your harmless extension, than not and have those same people install malicious extensions because "there's no way it can see my browser history, all it does is add an overlay to the current tab!"

Web3 services like MetaMask are primary examples which should have these big warnings, because crypto is rife with scams where someone does something (e.g. open an AirDrop, save their seed phrase in Google Drive) which gives an attacker access to their account without realizing. I don't doubt MetaMask is legit, but you want people to be diligent and understand that whenever they hook up one of these apps to their wallet they are giving a lot of potential for it to be compromised, so maybe be careful and honestly maybe use less of them.

The longer explanation might be correct in the short term, but long term I’m going to assume that you will eventually either take advantage of all that you can do to maximize your revenue or sell the extension to somebody who buys it because users have given that permission and they can exploit that trust.

I think what Google is doing is correct.

Alternatively, phrase the permission as what the app is technically trying to do, with a warning about what this could be used for.

"This extension wants be able to inject content in any tab. (Warning: This could potentially be used to track history of sites, and access all browsing data)."

That is actually accurate, while the current message is misleading.

Imagine this sort of scheme extended to "root" permission in ChromeOS. The stating worse case vs accurate with warning about worse case would be as follows:

> [Appname] wants permission to steel all your data and brick your device.

and

> [Appname] wants full control of this device. (Warning: this level of access could be used to steal your data, or brick your device).

The first one is most likely untrue, and borders on libel, while the second is true and accurate.

> (Or, if there aren't any fine-grained permissions suited to doing your task — then propose some! The browser vendors would love to get real feedback on the kinds of fine-grained hypothetical privileges that extensions authors would actually find useful. Otherwise they're stuck reading the source code of a small sample of extensions, and extrapolating general patterns of privilege-use from there.)

I'm curious, where are people supposed to do this? Is there actually a space / mechanism for this? Or is this a thing they would "like" to exist that there's not really an avenue for?

I think the avenue is "writing a blog post, posting it on HN, and having enough people agree with you that it'll stick around on the front page for long enough to expect some Chrome/Safari/Mozilla developer to see it."

A lot of Chrome development is public; check out https://www.chromium.org

We did, related to adblocking, they ignored it

Would be interesting if they did the same thing for their own operation. „We collect all data that we can about you, so that we can become a mega corp that can control most of your life.“ Wonder why they don’t do it?

This is keeping me from installing extensions.

Have you tried using "activeTab" permission? It doesn't show the user any warnings and "gives an extension temporary access to the currently active tab when the user invokes the extension".

https://developer.chrome.com/docs/extensions/mv3/manifest/ac...

Maybe the current version of your extension doesn't use that permission to track history and browsing data. But what about after an update or two or after it's been sold to the highest bidder, unbeknownst to the user? Worst case scenario is totally what I'd want to see as a power user.

Somewhat tangentially, I've been pushing for a popup/overlay API that allows to specify the position and size, and doesn't require any origin permissions.

https://github.com/w3c/webextensions/issues/307

I know this hurts as a developer, but using this language is just a way of being sincere to the user.

As a user it's not that helpful when extensions which inject stuff into the page (lots of them) all say they can access your history and browsing data. Even though it's actually true, it feels like a gap in the permissions model.

The problem is the gap is a mile wide. If you can see the current page url, you can see the next page URL and thus one page at a time you have the users browsing “history” from the moment they installed the extension, if you can run arbitrary JavaScript then you can check the back URL, you could potentially add some scope related restrictions to what injected JavaScript can do based on the permissions of the injecting extension but that still doesn’t stop the sort of “one page at a time discovery” of your private information and/or browser history.

The only actual solution to this problem is some kind of human review.

I wouldn't be against an "App Store" model provided users could go around it if they chose. I think Mozilla does something like this with certain "featured" extensions?

You would need to have code review on every update and to ensure that no code downloads anything it evaluates, and potentially even check for interactions with other plugins which could be compromised to provide eval mechanisms in an effort to “wash hands” of any malicious changes in later updates. (Since the long tail of updates seems to be one of the significant risk factors with less scrupulous actors trying to buy popular extensions for things like ad revenues before later dumping them to people who use them for malware or lousy eventually turning to malware themselves.

A review process can help but sadly it’s got a lot of work to do if it want to actually “solve” the problems here.

Opera browser used to have human reviewers for extensions. They were even commenting on code quality and rejecting until their fixes were not implemented.

I don't know if they still do it now or even if the browser is still developed.

  > it feels like a gap in the permissions model.

It _is_ a gap in the permissions model.

Then they need to be that explicit in other places too for consistency. Technically 3rd Party cookies also allow the same (tracking your browsing history, and other "worst case" results), but do they present it that way to the user when the user starts up Chrome and/or loads up google.com?

Try analyze these things while wearing a tinfoil hat. Google wants to gimp extensions so that we're one-step further away from tampering with the precious data pipe that Google wants from their servers to the user's monitor/eyeballs. If it gets in the way of that, they will neglect it (whether purposefully or conveniently unintentionally like these seemingly benign wording).

Maybe I'm underestimating the difficulty of this, but would it not make more sense for platforms to just give the user a complete listing of all the unique API function/method calls used by the app/extension with user-friendly descriptions of each?

The APIs would still be grouped by permission, but the user would be able to expand into a list of checkmarks showing to what extent those permissions are used. As well, an alert would be shown if any API usage changes between updates.

Several problems.

1) Bypassing any sort of static analysis of your extension requires, at worst, crafting an arbitrary code execution attack against yourself. This is not particuarly difficult.

2) Often times, the specific method you want to use is more powerful than what you need to do, so even if you were restricted to those specific methods, you still have more power than you actually use.

3) Supposing you want to go down the "whitelist at the method level" approach, you could just ... whitelist at the method level. The developer knows what methods he will be calling, so just have a seperate permission for each of them. In practice, this would lead to a lot of permissions that are effectivly equievelent, and people would be asking why they aren't just bundled together in a single permission.

4) Paraphrasing Hofstadter's law, 2) remains true even if you account for it, because of how APIs interact.

The example raised elsewhere in the thread is good: in a browser, if you have access to the current URL of any tab in context of which you run, you can start building browsing history. Whatever mitigations one could think of get defeated if the extension is allowed to make network requests, or modify content of web pages. Once an extension can communicate with outside world, it can exfil the data, even if piece by piece - and it can also keep its state outside of the browser.

Same applies to mobile apps.

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.

> Browser extensions are severely underrated as a platform because they aren't sexy.

Nah, it's because it's a niche, fragmented platform on which it's very hard to make real money. It's also a very fragile platform that makes very clear you're a sharecropper who can be evicted on a whim by any browser vendor.

I like extensions, I've built several for personal and public use, but I wouldn't invest a penny on them.

Yeah, I tend to agree.

I have built a couple of extensions. It's not fun.

The review process, both on Chrome and on Firefox, is long and incredibly annoying. (For example, including minified versions of popular libraries like Lodash gets you stern warnings... Why can't the review process check automatically, and once and for all, that the library is safe and that the version included in an extension is correct?)

The promise of "build once, run everywhere" runs aground very fast because of slight differences between browsers, and because some bugs on Firefox stay unfixed for years.

Sideloading has been made difficult to the point of impossibility.

And now Manifest V3 sucked all the remaining fun out of it.

It's very clear you're building something on someone else's property; they don't like it, they don't like you, and they'll try to fire you at the flimsiest occasion.

Mobile devices support extensions to some degree now, too! iOS Safari fully supports them, so that’s millions upon millions of potential users.

Unfortunately, the UI for initiating them isn’t quite as nice as the desktop, which is a big reason why we haven’t implemented our extension for iOS yet. Once Apple figures out a better install and activation workflow, then we’ll probably do it.

For those who haven't tried, the UX for initiating an extension is something like this:

1. download extension

2. open Safari and tap on puzzle piece icon on the left side of the address bar (when visible)

3. tap the newly downloaded extension

4. when prompted, give permission for it to run

5. give permission for it to run always on the current site

6. give permission for it to run on every site

I appreciate the need to secure the user's permission. But this is a super clunky way to do it. This path is especially troublesome for users with disabilities (motor issues, working memory issues, or executive function deficits in particular). And given how much people with disabilities rely on extensions to make browsers/websites accessible, this is not a trivial impact.

I run a startup whose tools are used for accessibility reasons and we have streamlined our product and onboarding in many ways based on feedback from our users with disabilities. The process Apple uses is incredibly cumbersome, and I'm sure that many users with disabilities are lost along the way.

It’s actually a little worse than that. You download an app that has an extension bundled. Some apps are just shells for their extension. Others have extensions bundled for additional functionality. PayPal bundles Honey in their main app so that anybody who has PayPal already downloaded can just enable Honey in their Safari browser. But it doesn’t do anything unless it’s enabled.

Good point. In the case of Honey, I actually wouldn't want it to be enabled just because I downloaded the PayPal app. Most people probably aren't aware it's even there.

But in the case of the shell apps, it totally makes sense to activate the extension automatically upon installation since that was the whole point of downloading the app/extension.

I agree. I think there really should be a separate extension store.

That would also help raise awareness for the fact that there are extensions in the first place. I've talked with many tech-savvy people who had no idea these even existed. It's like Apple wanted to make it possible to do extensions, but not remotely easy. And since they realized that this hassle would generate blowback if the general public went through the activation experience, they decided to keep it under wraps. That way, the only people who learned about extensions in the first place were people who didn't mind digging around a bit. These people would be less likely to be upset/confused by the labyrinthine install process.

That’s what I’m feeling, too… perhaps did they add extensions to iOS hoping they wouldn’t be too popular right away? Perhaps so they could watch what extensions get made, how they impact user experience, battery life, etc. ?

I can attest to this. The UX is quite bad. I run a small SaaS[0] and had a hard time explaining to my users on how to enable the Safari extension. The UX to use is not as nice either.

In the end I switched to the traditional Share Extension.

[0]: https://ktool.io

Share extensions are fine, but they still require activation. Also, they can't automatically run on a page without user intervention, which is necessary for many/most traditional extensions.

Safari's extension support is great, I was keen to include that in the book. Having to develop extensions inside XCode and deploy them in the Apple App store felt a bit odd, but it's really interesting how the extension has a dedicated "app" on the phone, which allows for some interesting possibilities.

Fx on Android allow add-ons. I've used them for years.

I'm a faithful Firefox Mobile user myself, it's the easiest way to use an adblocker on a mobile device. I don't think it's controversial to suggest that extensions are a desktop-first platform: things like popups, omnibox API, contextmenu API, or customizing developer tools either aren't applicable in a mobile format or don't translate very well.

Also Kiwi Browser. It's a Chromium fork with extension + adblock support, it even has a developer console.

But the UI is rather klunky. Example is using uBlock Origin to block random element on page.

You must:

1) click kebab menu icon

2) scroll all the way down

3) click ublock icon

4) on another screen click "enter element picker mode"

5) that takes you to the rightmost opened tab (!), so most likely completely different tab than you were using, so you must switch back to your original tab

6) you can finally pick elements

Still, considering that only alternative is Firefox which makes you go to different screen just to switch tab and jump through hoops to be even able to download most extensions, it's still the best Android browser.

Out of a small list of Mozilla-blessed add-ons, though. I mean, it's worth it for the ability to run uBO, which is on the list, but if you want to run just about anything else... I heard it's possible if you go through some convoluted process involving Firefox nightly/beta.

I’d say their fatal flaw is you don’t control the platform. I’d not invest my time on them for that reason alone. Like writing Excel macros.

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.

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 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.

can you elaborate?

I’d love to see how these things are architected. Do you have them on GitHub? Are there any boilerplates or anything you recommend to get started?

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:

https://bpev.me/blog/favioli/

MDN and Chrome does are mediocre yet do have reasonable starting points. Main bits are background vs content script(s), event listeners, and promises.

FWIW, HN has settings to limit how much time you spend here.

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.

I love this idea of making your own. I wanted to create one that types the text I highlight like a type writer. Will have to try it now. Thanks.

Isn't it easier to do those via User scripts?

> Spend too much time on Hacker News? I made an extension to freeze the front page so it updates once every 6 hours.

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

> 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.

I agree with who you're replying to. A blocker is no blocker if it is trivial to disable.

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.

All it needs to do is pattern interrupt strongly enough that you're not sucked into the social media black hole for hours.

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.

Executive function tools: not an exact substitute for executive function capabilities. ;)

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.

Use tampermonkey if possible. Or better yet, extend software that doesn't break, like Emacs.

Heh, I agree with this viewpoint, but "software that doesn't break, like Emacs" sounds extremely generous to me.

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.

Interesting, based on browser share I'd have expected 90% to be on Chrome instead. What's the extension (or rather, why are most on Firefox)?

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.

what is it?

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.

This is a plug for an extension I didn't write, and have no stake in:

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.

> 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.

Thanks, didn't know all that.

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.

> 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

You are missing the point. "Where you live" IS a material barrier to your getting sued, or arrested.

Right. Not planning to.

It's good to be wary.

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.

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.

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.

If your intentions are to only use the extension for yourself, why not just side load it?

side loaded extensions are not persisted every restart of the browser.

Chrome does keep side loaded extensions through restarts. Firefox doesn't unless you submit to Mozilla for signing. But once signed you can install from a file or even your own site.

I use firefox mainly and thought it was common behavior between the two

Mozilla's signing process isn't too bad, especially if your addon changes infrequently. Recommend trying it.

oh i actually have quite a few extensions that I made for my own use. i did make a small tab extension that I use every day that I did put in the app store for others. it's just a visual way to see what tabs you have open across all the windows and be able to switch to them or close them. super useful to my tab hoarding. links are in my bio

What do you like about your extension versus session buddy? I use session buddy all the time for the same reason for the same reason.

Does everything i wanted it to do and nothing more. I also made it because there were some hidden tabs sometimes that would play audio and I have a special section for tabs playing audio. I don't think that's as big a selling point anymore since autoplay can be disabled pretty reliably now but when I wrote it it was a big annoyance to me. In the end it's personal preference I guess. ~~link in bio if you want to try it out.~~

https://chrome.google.com/webstore/detail/tabist/hdjegjggiog...

https://addons.mozilla.org/en-US/firefox/addon/tabist/

source: https://github.com/fiveNinePlusR/tabist

This was my experience as well and the reason I saw myself forced to use the web store. I think there was a time where it was not required, where side loading was ok, but then they changed it and I saw no other way to do it. IIRC there was an alternative way for enterprise users, but I never understood it.

That was around 5-7 years ago and I haven't checked if there was a new alternative, easier way to do it nowadays. I'm still using my extensions but have no need to modify them. Let's see what Manifest v3 has to tell me about this. I'll probably drop Chrome then.

Chrome allows permanent side loading, and without signing, if one enables dev mode from extensions page.

Firefox requires uploading to Mozilla for signing to side load permanently or host with them. Though you can self host once signed.

IME Firefox add-ons are approved almost instantly if your addon is not minified or downloading code to execute outside the package. Chrome approvals are always days.

> Firefox requires uploading to Mozilla for signing to side load permanently

Are you sure?

I’ve been sideloading extensions, signed or not, into /usr/lib/firefox/browser/extensions/ and they’ve been working fine.

When was the last time you installed a new extension that way?

Last time was a few weeks ago [0].

I’m also maintaining a couple AUR packages with Firefox extensions myself. They all use the same method for persistence. I’m wondering what kind of issues people are experiencing. Haven’t heard of any myself.

[0]: https://aur.archlinux.org/packages/firefox-extension-multi-a...

Only for FF; Chrome allows side-loaded extensions to persist.

Wait, “load unpacked” doesn’t persist anymore?

It persists for me as recently as three weeks ago. I think it still works fine.

It does

Are you sure?

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.

This is very intentional because it is common for malware to install browser extensions. It would be nice to have a way to opt-out but this is probably hard to do without also making it too easy for the malware to opt-out for you.

AMO does not require a manual review nor the extension to be uploaded publicly. You can sign it through their site and then distribute it elsewhere.

Also, I don't see how you can compare browser extensions to vscode extensions. One product is aimed at your grandma, the other at software developers and doesn't have access to your email, banking and credit cards.

What’s AMO?

addons.mozilla.org

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.

That's interesting. I have a browser extension on my GitHub that added IMDB, Rotten Tomatoes, etc., ratings and access to reviews to streaming services that I subscribe to. I doubt that could've been the basis of getting a job at those places but it was a fun project, regardless, and I got value of of it while I was using it. No idea if it still works, but I assume not

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.

This is really useful shortcut, thanks for sharing! Do you have any good resources for getting started with iOS shortcut apps like this?

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!

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.

Right on, thanks!

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.

How will you differentiate it from existing apps like Paprika or Mela?

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.

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.

there are several ways to get around this, including natively via chrome://extensions/shortcuts

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.

If you're on a Mac, I highly recommend PopClip (https://pilotmoon.com/popclip/). It works on any text you can select — across the whole OS. It's also context aware (so it knows if you're selecting a URL vs. regular text, for example).

There are plenty of plugins already available, but it's also possible to create your own very easily.

I had a quick Google and it seems there are similar apps available for Windows, but I don't know anything about them.

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?

Yes

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:

- 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...

> , I run a service that lets extension developers take payments in their extensions

Link? Edit: nvm, found it https://extensionpay.com/

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.

The deprecation timelines have been postponed [1] [2]. You can still submit v2… but it’s probably best to build for v3 now.

1. https://developer.chrome.com/blog/more-mv2-transition/ 2. https://groups.google.com/a/chromium.org/g/chromium-extensio...

Last week I tried submitting an all new MV2 extension and Chrome Webstore said I had to use MV3. My older extension is still grandfathered in, so I was able to update the pre-existing.

So it's awkward until Firefox MV3 is ready.

Wow, that’s… shocking to me. Thanks for the note!

Only pre-existing MV2 extensions can be updated. New extensions have had to be MV3 for exactly 12 months already: since January 17th 2022.

Thanks for the note! I had no idea. And that makes it all the weirder that Google postponed things, especially because it seems the community is relying on Google to provide guidance on how to do a lot of things with MV3.

Would sure be nice if FF was more timely about supporting MV3. The worst part is it looks like they won't be supporting service workers which is what Chrome decided to replace background pages with. Meanwhile devs are stuck maintaining two different versions.

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

> ChatGPT Writer - 20k+ users within 3 weeks of launch

So this plugin sends the contents of the user’s email to ChatGPT?

I understand that it’s clearly opt-in as the user is installing the plugin, but what the heck?

Wait until you see the people using ChatGPT as their own personal therapist..

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.

its bad to churn from v2 to v3 but whats so bad about writing a fresh v3 extension?

APIs I want to use being unavailable, forcing local installs as the only installation option.

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.

1. https://developer.chrome.com/docs/extensions/reference/

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].

[0]: https://violentmonkey.github.io/guide/keyboard-shortcuts

[1]: https://imgur.com/a/SWpOoRS

[2]: https://violentmonkey.github.io/api/gm/#gm_registermenucomma...

Right, for the average user the barrier to entry for userscripts is significantly higher than for extensions. I recently released one (a small enhancement to the Netflix UI) in both forms for this reason: https://greasyfork.org/en/scripts/446689-netflix-recommendat..., https://chrome.google.com/webstore/detail/netflix-recommenda...

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.

> 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?

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

Why don't you consider tampermonkey scripts to be bloat?

Well, I do. I try to have as few scripts as possible.

>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.

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

Manifest V3 support is coming to Firefox on Tuesday with the release of Firefox 109.

For more details, see Mozilla’s November announcement about MV3 in Firefox 109:

https://blog.mozilla.org/addons/2022/11/17/manifest-v3-signi...

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.

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.

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.

Servers don't give you the power of the frontend, nor can they run in the context of the loaded website. Those are simply different purposes.

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?

Shameless plug, but we built the Plasmo Framework to make that (and a lot more) super easy: https://github.com/plasmohq/plasmo

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!

Suggestion: please indicate your supported target platforms (browsers) in the readme.

Great feedback! I'll push a change to add that.

I am a user of plasmo and it is amazing, super easy to get started and it just works

So great to hear! What kind of extension are you building?

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.

I’m using vanilla JS (see [0] for an example).

[0]: https://github.com/claui/tante-jacky/blob/9c6922dd5184fb3674...

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.

Biggest thing is just packaging it as a static site without SSR correct?

Correct.

whats the point of using nextjs if youre not using ssr? wont CRA work fine?

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.

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.)

That’s a very cool piece of tech right there. Has in evolved much since then?

Mostly with a bunch of handy quick tools that in the past I would have put in bookmarklets.

oh cool ive built my own version of this from scratch; didn't know others did this too

> 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.

Look into chrome.storage.session, they created it explicitly to allow in-memory storage for those scenarios. Not as easy as just setting a property, but good enough.

I'd be curious about latency for frequent access and the 1MB quota. I think that may make it a similar solution on the surface, but fairly limited in usage.

I was powering a fairly large amount of state, to the point we had to diff state changes due to browser message costs. It was difficult to write, but was incredibly powerful.

Unless I can write and distribute extensions without signing a legal agreement or having to involve a thirdparty gatekeeper, I'd rather not.

Chrome allows permanent side loading for users in dev mode. Firefox requires at least uploading to Mozilla for signing and some sanity checks, then you can side load or self host them.

> Firefox requires at least uploading to Mozilla

... which requires I sign a legal document and involve a thirdparty gatekeeper. Chrome is practically the same; I'm not going to ask my users to go mess with their browsers' settings assuming they can even do so (policies).

Life is too short to deal with the nonsense of hostile platforms.

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

Awesome, this is exactly the kind of thing I was looking for. Will try it out later. I have a highly organized folder structure and this could be easier than finding it in the native treenav view.

Now I just need good ways to add and search tags, make offline copies (index.html+PDF), and maybe even search the contents of the pages and I'll be golden.

Do you have a demo?

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?

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).

The Plasmo framework has a couple feature that you can use to specify bundle specific behavior at the compilation level (via env or via file): https://docs.plasmo.com/framework/workflows/build#with-a-spe...

Disclaimer: I'm the author and maintainer of the framework.

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).

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.

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

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.

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.

My life is complete now.

[0]: https://www.youtube.com/watch?v=G3Y5PcuH23Y&t=173s

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.

[1] https://chatgpt4google.com

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?

> they generally get access to everything you browse

They don't have to. Extensions declare which sites they want access to in the manifest file. Many extensions and user scripts only get access to specific sites.

They are approximately as big of a risk as any other third-party code you install from the Web onto your machine (e.g. tools from dev SDKs).

It is fairly trivial to audit the code to see what the extension is actually doing.

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.

I haven’t looked in years but last time I checked there was a real lack of any well-documented guides of how to get things going. I managed just by trial and error but I would hardly call it fun, it left me wondering how anyone makes any complex extensions without going insane.

Maybe there’s a missing manual somewhere that I just couldn’t find, but it all just seemed pretty annoying/painful. Tooling and debugging experience was really lacking.

EDIT: This is specifically regarding chrome extensions.

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...

Can you elaborate on the scheduling updates part? Does it just make a api request every x hours to google's api?

Google's RSS feed updates hourly. My app reads it on every load

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.

https://addons.mozilla.org/addon/hacker-news-preview/

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?

see how tweethunter does it. free to play, then login with paid account for more features

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.

Imo, they definitely need more fine-grained permissions. (See other comments in this thread about that).

I agree the the less the better but if it's your extension I think it's fine.

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...

[1] https://css-tricks.com/nextjs-chrome-extension-starter/

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.

[0] https://blog.mozilla.org/addons/2020/03/10/support-for-exten...

[1] https://blog.mozilla.org/addons/2021/03/11/two-factor-authen...

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].

[1]: https://wiki.mozilla.org/Add-ons/Extension_Signing

this is not true. with Android version at least, an AMO account is also required.

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.

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.

[0] https://github.com/fanfare/googleimagesrestored/releases

Huh? To the best of my knowledge, to get a development extension working in FF:

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 grandparent post: "permanently"

Key word from the parent post: "temporary"

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.

https://github.com/JacksonKearl/FeelingBlue/blob/main/extens...

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.

Eg:

"permission": [ "storage", "https://google.com" ]

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.

Not OP, I built an extension for a site that sent CSP headers. Because the browser extension wasn't allowed in the list of JS sources, it all borked.

Not certain that's this user's issue, but that is another thing to check.

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.

Yep. Firefox is my browser, but their add-on story is garbage.

It is great they require 2FA, it increases everyone security in case a developer account is compromised.

I'd prefer to choose how much risk I want to take when installing extensions. Just give me a warning and let me do what I want.

Signed extensions can be loaded into release versions of FF. A compromised dev account can create signed malicious extensions. TFA protects everyone.

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.

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).

[0] https://github.com/fractalhq/nutab [1] https://nutab.vercel.app

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.

[1] -- https://bugzilla.mozilla.org/show_bug.cgi?id=1766271

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.

Haha, thanks for that, I am one of your few Firefox users for Twemex. Congrats on the acquisition, how is that going?

Firefox’s signing process is terrible. I’ve made several extensions and I would rather just stick to chrome.

I have made this even easier with Rosegarden, so that you can just use a promisified browser object in both Firefox and Chrome!

The library is tiny, under 5 kb.

https://github.com/peterhil/rosegarden

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?)

It is coming on Tuesday with the release of Firefox 109.

Reply on news.ycombinator.com