Show HN: Bedframe – open-source Browser Extension Development framework | Hacker News Reader

Show HN: Bedframe – open-source Browser Extension Development framework

github.com

136 pointsJoeyDoey33 comments

This is a much needed area for development, most of my extension projects are held together by glue. However, I'm not entirely sure what Bedframe does at first glance. The docs page says coming soon and just 404s, the homepage is just a splash page with an email form (that does not actually seem to submit!) I'll read through the code at some point, and it looks like the individual project READMEs are more fleshed out, but definitely needs a better upfront explanation of what aspects of extension development it's trying to solve.

EDIT: It's also very unclear what state this project is in. The README has instructions for getting started with the CLI, but also says that I should sign up to join early access? Is this ready to use? What aspect of this project requires membership? Is there a hosted component or subscription model hidden in here?

I’m in the same boat. I got in the world of extension development last year, and oh my, what a crazy mess. Apart from browser compatibility, I was really hoping for some product to help out with the operational stuff.

Ooof!! It is an... interesting time right now in extensions land. The switch from MV2 to MV3 is a bit chaotic but hopefully tools like this (Bedframe) and tools like [Plasmo](https://github.com/PlasmoHQ/plasmo) start to inject some freshness in the space.

How does Bedframe compare with Plasmo? What are your plans moving forward?

Do you know when Google will depreciate MV2 extensions?

No one does at the moment. The deprecation is on hold, but Chrome has stated that they "will provide at least 6 months between a timeline announcement and any experiments deprecating MV2 features": https://developer.chrome.com/docs/extensions/migrating/mv2-s...

Author here! the project is super new. alpha, at best.

Basically if you wanted to build browser extensions using modern stack, bedframe lets you do that. Specifically it uses Vite under the hood so you can write e.g. a chrome extension in e.g. React w/ TypeScript, Tailwind, and all that good stuff.

I think the CLI readme has a bit more useful info: https://github.com/nyaggah/bedframe/tree/main/packages/cli

The notable bit is the mvp.yml workflow you get in your project. It'll let you publish to chrome, firefox and edge automatically (ci/cd).

> It's also very unclear what state this project is in.

fair enough! Wanted to get something out there first; I'll get the docs out soon

Nice. Thank you for making this. There is a huge benefit to using Turbo Repo. I was frustrated with adding any other extension framework to my monorepo. My extensions don't live in isolation but connect to other web, electron, and server apps. With this I can refactor types and design systems easily across the apps.

I'm somewhat confused about what problem this is solving, but I also have a lot of questions.

Does the dev mode use HMR? Can the cli upload bundles extensions to respective browser's stores? Does it work with any web framework supported by vite? Does it work with all vite/roll-up plugins?

This project is very interesting to me because I currently have a published Firefox extension that uses Vite, NPM, and Solid.js.

Yes to all this. But the project is super new so supports just React right now. The idea is to support all officially supported vite templates in ts and js, so: vue, react, preact, lit, svelte, solid, qwik.

> what its trying to solve:

I want a Next.js + Vercel dev experience but for building browser extensions: push to main > run a workflow > determine if it should publish > publish (to all my chosen web stores)

I want an actual dev workflow (like I'm used to in regular web/app development in 2023) but again, tailored for browser extensions.

Basically I wanted something that doesn't abstract the usual Vite setup. Just give me the usual niceties of working with client-side react w/ Vite. So yes, you get the vite/rollup plugins as usual.

For extension experts, when should developers use a framework like this versus these options:

* Attaching to page DOM with custom HTML/CSS/JavaScript

* Shadow DOM

* Iframe

Shadow DOMs seem like a good hybrid between iframes and attaching to the page DOM.

Bedframe gives you that, basically. It's a project generator that uses Vite so it'll let you build in vanilla js and html/css and enables dev niceties like HMR so you have a live dev server, etc. but in the end you end up with just the html/css/js.

Idea is, depending on what kind of extension you're building you can use content scripts to render you extension in shadow dom or iframe. Bedframe lets you do this.

The CLI is a project generator for: - popup (default kind of extension) - side panel (relatively new in Chrome / https://developer.chrome.com/docs/extensions/reference/sideP...) - overlay (what you describe above) - devtools extensions (https://developer.chrome.com/docs/extensions/mv3/devtools/#d...).

Bedframe goes further and lets you add a mvp.yml workflow to your (Github) repo and have any versioned changes landing in 'main' branch get published to firefox, edge, chrome web stores

Basically productionizes the extension dev process.

Does the name of this organization seem suspicious to anyone else?

Your honor, that was a Neco Arc reference and totally not the word you thought it was :D

Looks like it's the author's last name

How does this position with something like plasma.dev?

I’ve been happy with it, especially the testing / beta deployment and messaging libraries.

Plasmo? They're certainly further along in dev and doing great work. Bedframe is a slightly differing approach to the same pretty much.

what would the differences be? I know you're early but assuming it's more philosophy

If you're not interested in a GUI, but just want to run background services, is this framework still applicable?

What's the theme used in the readme screenshot? I would love to use it myself :)

VS Code is "Community Material Theme" - hight contrast: https://marketplace.visualstudio.com/items?itemName=Equinuso...

wow this look awesome!

thanks, bruv!

Definitely a much-needed area for development. However, having gone down the browser extension rabbit hole, I've largely shifted my focus to user scripts. Granted, there will always be a need for specialized browser extensions like ad blockers (uBlock[1]), keyboard shortcuts (Vimium-C[2]), and password managers (Bitwarden[3]).

That said, I find user scripts superior for most tasks, despite some lacking UI niceties. They are easier to share, use, and crucially, audit—be it in terms of scope, permissions, or code updates. Plus if Manifest V3 is any indicator, the future for browser extensions looks bleak. While I don't agree with this direction, it's probably for the best for the majority of users, like my mom.

Your effort is commendable; however, should you find yourself looking for a viable pivot in the future, I believe the user script space is primed for innovation and could offer a good alternative.

[1] https://github.com/gorhill/uBlock [2] https://github.com/gdh1995/vimium-c [3] https://addons.mozilla.org/en-US/firefox/addon/bitwarden-pas...

Do you have any user scripts you find handy or use often?

I recently started to have the same ideas, and I have created 3 bookmarklets and 1 userscript https://github.com/madacol/web-automation

To give you an example

This is a bookmarklet to edit any text on a web page

    javascript: (function() {   document.body.contentEditable = true;   document.body.spellcheck = false;  })();

Very useful when I want to grab a screenshot and I want to REDACT personal information

Hey that's neat! Super annoying having to dig through the dynamically-generated DOM.

highlight a string on a website, then click this to translate with google

        javascript:(function() { const baseUrl = "https://translate.google.com/?op=translate&sl=auto&tl=de&text="; const textRaw = window.getSelection(); const text = encodeURIComponent(textRaw); console.log("selected text: ", text, textRaw); window.open(baseUrl + text) })();

(maybe adjust the target language in the url)

Cool!

I feel like there should be something like a bookmarklet store, similar to the extensions, or userscripts, right?

yes!

If you find one, please let me know

What's the correct way to.. use.. userscripts? Do you still need to install a third party extension?

I just recently came across Plasmo [1], which is very mature and a good entry point for anyone starting on the browser extension environment (like I am). It would be nice to see some comparisons in the future when Bedframe's docs are published

[1] https://docs.plasmo.com/framework

Reply on news.ycombinator.com