4 ms·

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 c

by fswd 4y ago

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?

satvikpendem 4y ago
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.
- no_wizard 4y ago
  Biggest thing is just packaging it as a static site without SSR correct?
  - satvikpendem 4y ago
    Correct.
    - swyx 4y ago
      whats the point of using nextjs if youre not using ssr? wont CRA work fine?
      - leerob 4y ago
        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.
        satvikpendem 4y ago
        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.
coldsauce 4y ago
Shameless plug, but we built the Plasmo Framework to make that (and a lot more) super easy: https://github.com/plasmohq/plasmo https://github.com/plasmohq/plasmo
- AETackaberry 4y ago
  I am a user of plasmo and it is amazing, super easy to get started and it just works
  - coldsauce 4y ago
    So great to hear! What kind of extension are you building?
- swyx 4y ago
  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
  - coldsauce 4y ago
    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!
quickthrower2 4y ago
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.
Hackbraten 4y ago
I’m using vanilla JS (see [0] for an example). [0]: https://github.com/claui/tante-jacky/blob/9c6922dd5184fb367451d0b60f2fae9fdb50f8bf/web-extension/package.json https://github.com/claui/tante-jacky/blob/9c6922dd5184fb3674...

by fswd 4y ago

satvikpendem 4y ago

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.

no_wizard 4y ago
Biggest thing is just packaging it as a static site without SSR correct?
- satvikpendem 4y ago
  Correct.
  - swyx 4y ago
    whats the point of using nextjs if youre not using ssr? wont CRA work fine?
    - leerob 4y ago
      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.
      - satvikpendem 4y ago
        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.

coldsauce 4y ago

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

AETackaberry 4y ago
I am a user of plasmo and it is amazing, super easy to get started and it just works
- coldsauce 4y ago
  So great to hear! What kind of extension are you building?
swyx 4y ago
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
- coldsauce 4y ago
  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!

quickthrower2 4y ago

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.

Hackbraten 4y ago

I’m using vanilla JS (see [0] for an example). [0]: https://github.com/claui/tante-jacky/blob/9c6922dd5184fb367451d0b60f2fae9fdb50f8bf/web-extension/package.json https://github.com/claui/tante-jacky/blob/9c6922dd5184fb3674...