[HN Gopher] For your next side project, make a browser extension
___________________________________________________________________
For your next side project, make a browser extension
Author : Glench
Score : 108 points
Date : 2023-01-15 18:21 UTC (4 hours ago)
(HTM) web link (www.geoffreylitt.com)
(TXT) w3m dump (www.geoffreylitt.com)
| sum1ren wrote:
| 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
| iambateman wrote:
| 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.
| Adraghast wrote:
| How will you differentiate it from existing apps like Paprika
| or Mela?
| iambateman wrote:
| 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.
| duncan-donuts wrote:
| 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.
| iambateman wrote:
| 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.
| redeux wrote:
| This is really useful shortcut, thanks for sharing! Do you have
| any good resources for getting started with iOS shortcut apps
| like this?
| iambateman wrote:
| 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!
| 2h wrote:
| 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.
| kitsunesoba wrote:
| 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.
| redeux wrote:
| 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.
| 2h wrote:
| [flagged]
| redeux wrote:
| 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.
|
| [1] https://news.ycombinator.com/newsguidelines.html
| 2h wrote:
| You might want to read them yourself before throwing the
| link around.
| Glench wrote:
| 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.
| nickjj wrote:
| 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
| mrbombastic wrote:
| 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.
| nickjj wrote:
| > 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
| pictur wrote:
| 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?
| 0xCAP wrote:
| Yes
| dom96 wrote:
| 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...
| ajolly wrote:
| 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 :/
| fswd wrote:
| 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?
| coldsauce wrote:
| Shameless plug, but we built the Plasmo Framework to make that
| (and a lot more) super easy: https://github.com/plasmohq/plasmo
| AETackaberry wrote:
| I am a user of plasmo and it is amazing, super easy to get
| started and it just works
| satvikpendem wrote:
| 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.
| stuaxo wrote:
| 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" ?
| tzs wrote:
| 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).
| revskill wrote:
| Agree. One of usecase, is to let user select the "theme" for the
| project by just installing theme extension.
| nassimsoftware wrote:
| If I want to build a cross platform browser extension is there an
| easier way then having to write it twice?
| wongarsu wrote:
| 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.
| sfifs wrote:
| 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.
| bariumbitmap wrote:
| 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.
| Alifatisk wrote:
| 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?
| satvikpendem wrote:
| 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/
| FractalHQ wrote:
| 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
| dom96 wrote:
| 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?)
| tech234a wrote:
| It is coming on Tuesday with the release of Firefox 109.
| alphabet9000 wrote:
| 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...
| cdrini wrote:
| 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.
| user982 wrote:
| Key word from the grandparent post: _" permanently"_
|
| Key word from the parent post: _" temporary"_
| cdrini wrote:
| 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!
| jakear wrote:
| 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/exten
| s...
| cdrini wrote:
| 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" ]
| [deleted]
| 2h wrote:
| Yep. Firefox is my browser, but their add-on story is
| garbage.
| tech234a wrote:
| 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
| johngalt_ wrote:
| It is great they require 2FA, it increases everyone security
| in case a developer account is compromised.
| brycedriesenga wrote:
| 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.
| [deleted]
| tommywg7 wrote:
| 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...
| moneywoes wrote:
| Can you elaborate on the scheduling updates part? Does it just
| make a api request every x hours to google's api?
| conqrr wrote:
| 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
| tech234a wrote:
| Manifest V3 support is coming to Firefox on Tuesday with the
| release of Firefox 109.
| andy_ppp wrote:
| 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...
| 65 wrote:
| 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.
| beambot wrote:
| > 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.
| flappyeagle wrote:
| 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?
| gernb wrote:
| > 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
| PartiallyTyped wrote:
| FWIW, HN has settings to limit how much time you spend here.
| 65 wrote:
| 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.
| shyn3 wrote:
| 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.
| vax425 wrote:
| I made one too!
|
| HTTPS://HeadlampTest.com
| Animats wrote:
| 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.
| satvikpendem wrote:
| 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)?
| Animats wrote:
| 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.
| boltzmann-brain wrote:
| what is it?
| HenrikB wrote:
| It's been many months since I tried, but I think you have to redo
| that _each time you restart Firefox_ , i.e. contrary to Chrome,
| you cannot make it persistent.
| AlbertCory wrote:
| 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.
| cldellow wrote:
| > 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.
| AlbertCory wrote:
| 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.
| cldellow wrote:
| 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.
| Benjammer wrote:
| 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.
| nubinetwork wrote:
| 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.
___________________________________________________________________
(page generated 2023-01-15 23:00 UTC)