18 ms·

Show HN: Plasmo – a framework for building modern Chrome extensions

132 points by coldsauce 4y ago

Hey HN, we're excited to have people try out our framework! When we built out a Chrome extension earlier this year, we noticed that the config was too imperative. You had to constantly tell Chrome via the manifest.json file where your files were, what your permissions should be, etc. So we thought it might be interesting to build a more declarative framework. When we built a proof of concept, we enjoyed working with it and decided to invest more time into making it usable and adding more features. We're still pretty early in building it out, and there's a bunch more we want to add, but this feels like a good time to showcase it and hear what people think!

stoicjumbotron 4y ago
Glad to see you on HN front page. I followed your progress via this Twitter thread: https://twitter.com/tylerangert/status/1527003106185207808 https://twitter.com/tylerangert/status/1527003106185207808
leodriesch 4y ago
Currently using Parcel with its support for manifest.json as an entrypoint[0], could you explain what your framework does beyond that? [0]: https://parceljs.org/recipes/web-extension/ https://parceljs.org/recipes/web-extension/
- coldsauce 4y ago
  We use Parcel under the hood and are huge fans! Our framework has opinionated abstractions on top of it that we think help improve the extension development experience considerably. Features we've built so far: - manifest.json is generated automatically. If you want to create a content script, you name a file content.ts, and it'll auto-gen the right manifest key-value pair for it. Same with backround.ts. [1] - Mounting a React component to the popup or options page is similar. You create a popup.tsx or options.tsx file, export a default React component, and it'll automatically associate it in the manifest and mount the component automatically for you. - We support environment variables with .env files [2] - We just released support to automatically inject a shadow DOM into a webpage and mount a React component from a content script [3] - We have remote code bundling that automatically fetches URL based imports (like Google Analytics) in build time to mitigate issues with MV3 not allowing remote code [4] [1]: https://docs.plasmo.com/#where-is-the-manifestjson-file https://docs.plasmo.com/#where-is-the-manifestjson-file [2]: https://docs.plasmo.com/workflows/env https://docs.plasmo.com/workflows/env [3]: https://github.com/PlasmoHQ/examples/tree/57791e70549441e3912e527bbcc457b47eb5cdd9/with-content-scripts-ui https://github.com/PlasmoHQ/examples/tree/57791e70549441e391... [4]: https://docs.plasmo.com/workflows/remote-code https://docs.plasmo.com/workflows/remote-code
deleted 4y ago
[deleted]
Raed667 4y ago
Looks very promising. I'm wondering about the current state of cross-browser compatibility. How close are we to being able to write MV3 extensions that run on Chrome/Firefox/Safari without code adaptations?
- coldsauce 4y ago
  There's standardization work being done at the moment with the W3C WebExtensions Community Group [1] which is definitely a step in the right direction! Mozilla has also done some great work building a web extension polyfill library that attempts to abstract away the differences between the browsers [2] but the translation will always be imperfect, and edge cases are abundant. [1]: https://www.w3.org/community/webextensions/ https://www.w3.org/community/webextensions/ [2]: https://github.com/mozilla/webextension-polyfill https://github.com/mozilla/webextension-polyfill
FractalHQ 4y ago
I found making Chrome extensions with Sveltekit was very easy thanks in part to its use of Vite. Any plans to support anything other than React?
- coldsauce 4y ago
  It's definitely something we want to consider in the future! Right now, we want to focus on a single view framework and make the developer experience as seamless as possible with it. The framework we've chosen is React because we're most familiar with it.
- shankspeaks 4y ago
  Svelte or Sveltekit specifically? I've had issues with getting the webextensions polyfill working with Sveltekit but Svelte works without any issues. Do you have any references that you could point me to on how to get Sveltekit running to build Chrome extensions? Sorry for the digression, but this has been a bit of a bugbear for the past month and would dearly love to know how to get around it.
  - FractalHQ 4y ago
    Sveltekit! I used sveltekit-adapter-browser-extension[0] by Antony which conveniently handles the hashing stuff. I just made the repo public in case you want to check it out[1]. Let me know if you run into any issues! [0] https://github.com/antony/sveltekit-adapter-browser-extension https://github.com/antony/sveltekit-adapter-browser-extensio... [1] https://github.com/FractalHQ/nutab https://github.com/FractalHQ/nutab
cfu28 4y ago
This is neat. How does live-reloading work? Manually reloading a chrome extension with each code change has been a pain point for me in the past.
- coldsauce 4y ago
  Thanks! We wrote a custom Parcel runtime [1] inspired by Parcel's HMR runtime (which was too bloated and buggy for us) that injects a web socket listener into the development build of the extension. Whenever a bundle change happens, Parcel sends it the refresh message and it either does `chrome.runtime.reload()` or `location.reload()` depending on the context. [1]: https://github.com/PlasmoHQ/plasmo/blob/main/packages/parcel-runtime/loaders/hmr-runtime.js#L34 https://github.com/PlasmoHQ/plasmo/blob/main/packages/parcel...
silax 4y ago
Love this. Chrome extensions are the most underrated platform to spit out 7+ figure recurring revenue businesses on. Mac App Store close second. I'm hesitant to even mention because it's such a good secret.
- ekabod 4y ago
  Can you point to one extension that is making 7 figures?
  - vosper 4y ago
    I imagine Grammarly is. And then they spend all that revenue on YouTube ads... https://www.grammarly.com/browser/chrome https://www.grammarly.com/browser/chrome
    - danpalmer 4y ago
      Grammarly is also a large and well established tech company. Pretty sure they’ve been around for 12+ years at this point, and I think have multiple hundreds of staff.
  - cuylerstuwe 4y ago
    Are you looking very specifically for “ONLY 7 figures”? Revenue, or profit? Not hard to think of a handful of big players in revenue; 1Password and Honey spring instantly to mind as 9-figure revenue players.
    - ekabod 4y ago
      I am interesting to know if a solo developer can make a living, 6/7 figures, producing and monetizing extensions.
      - lapcat 4y ago
        6 figures yes. 7 figures no.
cxr 4y ago
> System Requirements > Node.js 16.x or later Plasmo's "users" will already be working under the constraint of developing for a target platform where NodeJS will not be available to them, but is nonetheless meant for running JS: Chrome. Why is NodeJS necessary?
- coldsauce 4y ago
  Our tooling is written in Node.js. So developers must have Node installed on their machines to utilize our tooling. When they use our CLI to watch the file system for changes for live-reload or to build their extension, etc., that's a Node.js program. The build target is browser Javascript, though.
  - cxr 4y ago
    > Our tooling is written in Node.js. Sure. My question is why.
    - httgp 4y ago
      Why not?
      - cxr 4y ago
        You mean aside from everything I already said? ("But why male models?")
    - ghotli 4y ago
      Surely you are trolling? That's a very, very common setup. Nothing complicated or out of the ordinary requiring specific tooling for the dev environment. The output that runs in the browser at runtime has its own set of same constraints. Modern browser version, etc.
      - cxr 4y ago
        > Surely you are trolling? First of all, don't do that. It's obnoxious. Secondly: > That's a very, very common setup. So? Falling back on the argument that, essentially, "lots of people do this" is about as worthy as attempting to counter by saying that the other person/what they are doing is weird[1]. (It's actually slightly more respectable, but that's only because of how unrespectable the call-them-a-weirdo path is.) You either have an argument for $THING that will hold up under scrutiny without appealing to how weird/anti-weird $THING is, or you don't. Thirdly, you are not compelled to comment. (What makes your decision to join in even more mystifying is that you were not the person being addressed—at least their impulse to do so would have made sense, even if the argument was still a bad one.) If you don't actually have an answer, why bother commenting at all? 1. https://news.ycombinator.com/item?id=30721113 https://news.ycombinator.com/item?id=30721113
bluelightning2k 4y ago
Thank you for doing this. Not tried it out yet but I fully intend to. Very interesting. Thank you again!
rohan32 4y ago
Love this. Congrats Stefan & team on the announcement!
- coldsauce 4y ago
  Thanks!
samoit 4y ago
Any plans to do the same for firefox? I hate google Chrome
dudus 4y ago
Very well priced but.... I think I get what you were trying to do with the pricing "per hacker". But really it's just confusing. Say it's $30/users/month The price is good. I just find the hacker term unnecessary
- coldsauce 4y ago
  Thanks for the feedback! Updated it.

132 points by coldsauce 4y ago

stoicjumbotron 4y ago

Glad to see you on HN front page. I followed your progress via this Twitter thread: https://twitter.com/tylerangert/status/1527003106185207808 https://twitter.com/tylerangert/status/1527003106185207808

leodriesch 4y ago

Currently using Parcel with its support for manifest.json as an entrypoint[0], could you explain what your framework does beyond that? [0]: https://parceljs.org/recipes/web-extension/ https://parceljs.org/recipes/web-extension/

coldsauce 4y ago
We use Parcel under the hood and are huge fans! Our framework has opinionated abstractions on top of it that we think help improve the extension development experience considerably. Features we've built so far: - manifest.json is generated automatically. If you want to create a content script, you name a file content.ts, and it'll auto-gen the right manifest key-value pair for it. Same with backround.ts. [1] - Mounting a React component to the popup or options page is similar. You create a popup.tsx or options.tsx file, export a default React component, and it'll automatically associate it in the manifest and mount the component automatically for you. - We support environment variables with .env files [2] - We just released support to automatically inject a shadow DOM into a webpage and mount a React component from a content script [3] - We have remote code bundling that automatically fetches URL based imports (like Google Analytics) in build time to mitigate issues with MV3 not allowing remote code [4] [1]: https://docs.plasmo.com/#where-is-the-manifestjson-file https://docs.plasmo.com/#where-is-the-manifestjson-file [2]: https://docs.plasmo.com/workflows/env https://docs.plasmo.com/workflows/env [3]: https://github.com/PlasmoHQ/examples/tree/57791e70549441e3912e527bbcc457b47eb5cdd9/with-content-scripts-ui https://github.com/PlasmoHQ/examples/tree/57791e70549441e391... [4]: https://docs.plasmo.com/workflows/remote-code https://docs.plasmo.com/workflows/remote-code

deleted 4y ago

[deleted]

Raed667 4y ago

Looks very promising. I'm wondering about the current state of cross-browser compatibility. How close are we to being able to write MV3 extensions that run on Chrome/Firefox/Safari without code adaptations?

coldsauce 4y ago
There's standardization work being done at the moment with the W3C WebExtensions Community Group [1] which is definitely a step in the right direction! Mozilla has also done some great work building a web extension polyfill library that attempts to abstract away the differences between the browsers [2] but the translation will always be imperfect, and edge cases are abundant. [1]: https://www.w3.org/community/webextensions/ https://www.w3.org/community/webextensions/ [2]: https://github.com/mozilla/webextension-polyfill https://github.com/mozilla/webextension-polyfill

FractalHQ 4y ago

I found making Chrome extensions with Sveltekit was very easy thanks in part to its use of Vite. Any plans to support anything other than React?

coldsauce 4y ago
It's definitely something we want to consider in the future! Right now, we want to focus on a single view framework and make the developer experience as seamless as possible with it. The framework we've chosen is React because we're most familiar with it.
shankspeaks 4y ago
Svelte or Sveltekit specifically? I've had issues with getting the webextensions polyfill working with Sveltekit but Svelte works without any issues. Do you have any references that you could point me to on how to get Sveltekit running to build Chrome extensions? Sorry for the digression, but this has been a bit of a bugbear for the past month and would dearly love to know how to get around it.
- FractalHQ 4y ago
  Sveltekit! I used sveltekit-adapter-browser-extension[0] by Antony which conveniently handles the hashing stuff. I just made the repo public in case you want to check it out[1]. Let me know if you run into any issues! [0] https://github.com/antony/sveltekit-adapter-browser-extension https://github.com/antony/sveltekit-adapter-browser-extensio... [1] https://github.com/FractalHQ/nutab https://github.com/FractalHQ/nutab

cfu28 4y ago

This is neat. How does live-reloading work? Manually reloading a chrome extension with each code change has been a pain point for me in the past.

coldsauce 4y ago
Thanks! We wrote a custom Parcel runtime [1] inspired by Parcel's HMR runtime (which was too bloated and buggy for us) that injects a web socket listener into the development build of the extension. Whenever a bundle change happens, Parcel sends it the refresh message and it either does `chrome.runtime.reload()` or `location.reload()` depending on the context. [1]: https://github.com/PlasmoHQ/plasmo/blob/main/packages/parcel-runtime/loaders/hmr-runtime.js#L34 https://github.com/PlasmoHQ/plasmo/blob/main/packages/parcel...

silax 4y ago

Love this. Chrome extensions are the most underrated platform to spit out 7+ figure recurring revenue businesses on. Mac App Store close second. I'm hesitant to even mention because it's such a good secret.

ekabod 4y ago
Can you point to one extension that is making 7 figures?
- vosper 4y ago
  I imagine Grammarly is. And then they spend all that revenue on YouTube ads... https://www.grammarly.com/browser/chrome https://www.grammarly.com/browser/chrome
  - danpalmer 4y ago
    Grammarly is also a large and well established tech company. Pretty sure they’ve been around for 12+ years at this point, and I think have multiple hundreds of staff.
- cuylerstuwe 4y ago
  Are you looking very specifically for “ONLY 7 figures”? Revenue, or profit? Not hard to think of a handful of big players in revenue; 1Password and Honey spring instantly to mind as 9-figure revenue players.
  - ekabod 4y ago
    I am interesting to know if a solo developer can make a living, 6/7 figures, producing and monetizing extensions.
    - lapcat 4y ago
      6 figures yes. 7 figures no.

cxr 4y ago

> System Requirements > Node.js 16.x or later Plasmo's "users" will already be working under the constraint of developing for a target platform where NodeJS will not be available to them, but is nonetheless meant for running JS: Chrome. Why is NodeJS necessary?

coldsauce 4y ago
Our tooling is written in Node.js. So developers must have Node installed on their machines to utilize our tooling. When they use our CLI to watch the file system for changes for live-reload or to build their extension, etc., that's a Node.js program. The build target is browser Javascript, though.
- cxr 4y ago
  > Our tooling is written in Node.js. Sure. My question is why.
  - httgp 4y ago
    Why not?
    - cxr 4y ago
      You mean aside from everything I already said? ("But why male models?")
  - ghotli 4y ago
    Surely you are trolling? That's a very, very common setup. Nothing complicated or out of the ordinary requiring specific tooling for the dev environment. The output that runs in the browser at runtime has its own set of same constraints. Modern browser version, etc.
    - cxr 4y ago
      > Surely you are trolling? First of all, don't do that. It's obnoxious. Secondly: > That's a very, very common setup. So? Falling back on the argument that, essentially, "lots of people do this" is about as worthy as attempting to counter by saying that the other person/what they are doing is weird[1]. (It's actually slightly more respectable, but that's only because of how unrespectable the call-them-a-weirdo path is.) You either have an argument for $THING that will hold up under scrutiny without appealing to how weird/anti-weird $THING is, or you don't. Thirdly, you are not compelled to comment. (What makes your decision to join in even more mystifying is that you were not the person being addressed—at least their impulse to do so would have made sense, even if the argument was still a bad one.) If you don't actually have an answer, why bother commenting at all? 1. https://news.ycombinator.com/item?id=30721113 https://news.ycombinator.com/item?id=30721113

bluelightning2k 4y ago

Thank you for doing this. Not tried it out yet but I fully intend to. Very interesting. Thank you again!

rohan32 4y ago

Love this. Congrats Stefan & team on the announcement!

coldsauce 4y ago
Thanks!

samoit 4y ago

Any plans to do the same for firefox? I hate google Chrome

dudus 4y ago

Very well priced but.... I think I get what you were trying to do with the pricing "per hacker". But really it's just confusing. Say it's $30/users/month The price is good. I just find the hacker term unnecessary

coldsauce 4y ago
Thanks for the feedback! Updated it.