Show HN: Building Browser Extensions Using FileSystem APIs (and ChatGPT)

[thomas101]

Hi HN! Wavebox Flow (https://flow.wavebox.io) is an open-source (https://github.com/wavebox/wavebox-flow) browser extension builder that runs directly in your browser. We want to help make building your first extension, or prototyping that idea that's been sat on your desk as simple as possible. There's sometimes this bit of "where I do I start" syndrome, where you're not sure what to start with, or even where to look. Given the advancements of the HTML5 FileSystem APIs, it's now possible to store your extension files directly on disk and edit them with the amazing Monaco editor. If you're prototyping and start to feel that your idea is growing legs, there's nothing stopping you opening the extension in your favourite editor and continuing from there - the output is just standard a WebExtension.

We've been using Flow internally for a few months to create helper extensions, such as one that helps us to link support tickets to our internal admin system and another that helps us with the GitHub approval flow. Both in record time and with minimal effort. When we realised how much of useful tool it is, we felt that we could couldn't keep it proprietary and the best thing to do, would be to open-source it and make sure compatibility is great with as many browsers as possible.

The extensions that you create are compatible with any Chromium browser and also Firefox. If you're using the Wavebox browser, we've added some additional tooling so you can skip some of the manual extension installation and reloading steps, but Wavebox Flow is fully featured in any browser. And of course, what product wouldn't be complete these days without an integrated ChatGPT to help with coding and catching errors.

This is just the start, we open-sourced the initial version but are looking to develop Flow further. We'd love to hear about any feedback that you have and how we can make Wavebox Flow better. You can check us out at https://wavebox.io/ and https://github.com/wavebox/wavebox-flow/

[thomas101]

We were hoping to make the Flow builder work in all up to date browsers, however Firefox and Safari lack support for some of the HTML5 FileSystem APIs, namely window.showDirectoryPicker. There are some ponyfills to read and write to the filesystem, but none give enough tooling to create a seamless experience. Hopefully this is something we can add in the future.

If you're looking for more info on how we used it ourselves, checkout out blog post https://wavebox.io/blog/wavebox-flow-tutorial/