BED can be fun with Bedframe!

Ship prod-ready, cross-browser extensions with Vite + React

Make your first BED

$ npm create bedframe

One codebase. All modern browsers

Install Bedframe (@bedframe/cli)

Make your first BED

Build for all browsers

Load unpacked extension (Chrome)

Github CLI create & push repo

Dependabot already working for you

Convert Safari Web Extension (aka make your first macOS app)

Open source `Browser Extension Development (BED) Framework` that gives you an opinionated, repeatable approach, tooling, and workflows optimized for shipping prod-ready extensions to all modern browsers

Why build with Bedframe?

+

Go from prototype to profit faster!
It's a "framework" as in, a way of doing things. A defined, repeatable approach, tooling, architecture and workflows to help you accomplish a specific thing: ship production grade browser extensions fast, reliably and continuously.

You already know how!

If you can build a website, you can build a browser extension (its just HTML, CSS and JS). Eliminate false dichotomies and analysis paralysis. Just bring your preferred frontend meta-framework (or vanilla JavaScript / TypeScript), add Vite, sprinkle in Bedframe and you're good to go.

Vite! Vite! Vite!

Bedframe is a Vite-based SDK (CLI, fully-typed functions, CI/CD workflows, and optional configurations) that let you get the most out of Vite's versatile, modern development tooling. Get up and running on new browser extensions or use it to go cross-browsers with your existing extensions.

No new DSLs to learn!

There are no new DSLs to learn. Just good ol' web development (with a lil sauce on the side). git add > git commit > git push and let the workflows automatically version, zip, upload and publish your extensions. The concepts are as simple as 1, 2, 3; comfortable like getting in B.E.D.

All modern Browsers

Build for all Chromium browsers, like Arc, Brave, Chrome, Edge, Opera, Webkit browsers like Safari and Gecko browsers like Firefox. Bedframe lets you build from one codebase, share as much as possible and only extend manifest features for browsers that have unique keys in their manifest.json.

Arc

Use Bedframe to create innovative extensions for Arc's sleek interface.

Brave

Build privacy-first extensions for Brave effortlessly with Bedframe.

Chrome

Develop powerful extensions for Chrome using Bedframe.

Edge

Craft feature-rich extensions for Edge with Bedframe's versatile toolkit.

Firefox

Design dynamic extensions for Firefox using Bedframe.

Opera

Create versatile extensions for Opera with ease using Bedframe.

Safari

Develop seamless extensions for Safari with Bedframe's optimized tools.

All types of Extensions

An extension's features are defined in the manifest.json file. There are only 3 required fields. The rest is determined by your creativity and product vision. Define your extension features once and go cross-browser with minor adjustments.

Popup

Default type of extension that displays a small window containing the extension’s user interface.

Overlay / Content script

Injects content directly into page, often using a floating interface that overlays the page or directly insert DOM elements into the page

overlay

Side panel

Opens panel on the side of browser window, typically on the right side

sidepanel

Dev tools

Integrates with Browser's Developer Tools, adding custom panels, tabs, or sidebar panes

devtools

New tab

Customizes the new tab page of a browser with personalized content, tools, or information.

newtab

History

Make extensions that customize and enhance the browsers history functionality

history

Downloads

Make extensions that customize and enhance the browsers download functionality

downloads

Bookmarks

Make extensions that customize and enhance the browsers bookmarks functionality

bookmarks

AI

Make extensions that leverage browser-native or any of the available AI APIs (e.g. OpenAI)

ai

Solid foundation for Development

Take your idea from zero to webstore with the peace of mind that you have Vite as your sturdy foundation. Enjoy next-generation frontend tooling that lets you stay nimble; use React or Vue or Solid or Svelte or any of the ~8 supported meta-frameworks (including Vanilla JavaScript and TypeScript).

Vanilla

Use Bedframe with plain HTML, CSS, and TypeScript/JavaScript for total control over your extensions.

Vue

Build flexible and simple extensions with Bedframe using Vue's progressive features.

React

Develop powerful, component-based extensions with Bedframe using React.

Preact

Create fast, lightweight extensions with Bedframe using Preact's efficient API.

Lit

Design efficient, web component-based extensions with Bedframe using Lit.

Svelte

Build highly efficient, zero-runtime extensions with Bedframe using Svelte.

Solid

Craft fine-grained reactive extensions with Bedframe using Solid.

Qwik

Create ultra-fast extensions with Bedframe using Qwik's instant-loading capabilities.

Vite's modern Rich features

Bedframe gives you good local DX, source control with git, reasonable CI/CD workflows and an easy Make > Version > Publish to prod story. Start with Vite, use your favorite meta-framework, productionize your codebase, and you're all set!

Lightning-Fast Development

Initial server start times are dramatically reduced by pre-bundling dependencies with esbuild, leading to quick feedback and improved developer productivity.

Instant Hot Module Replacement (HMR)

Updates during development are instantaneous, reflecting changes in the browser almost immediately without a full page reload.

Modern JavaScript

Supports ES modules, native JavaScript features allowing for clean, future-proof code.

Built-In TypeScript Support

Handles TypeScript out of the box, ensuring seamless integration and type checking during development.

Enhanced Plugin System

Provides an extensible plugin API compatible with Rollup, making it easy to extend functionality and customize the build process.

Advanced CSS Handling

Automatically processes and injects CSS with support for CSS Modules, PostCSS, and CSS preprocessors like Sass and Less.

Optimized Production Builds

Combines Rollup’s capabilities for production builds, offering efficient bundling, code splitting, and tree-shaking.

Powerful CLI

A simple and effective CLI tool that speeds up development tasks and supports custom commands for various needs.

Flexible Configurations

Offers extensive configuration options to tailor the development and build process to specific project requirements.

Sensible defaults + best practices Production-readiness

Productionizing your codebase means making it robust, reliable, and scalable. It's about preparing your project for real-world deployment, ensuring it can handle end-users and seamlessly interact with other systems and services.

Modern up-to-date tech-stack & tooling

Vite is actively developed and keeps up with LTS Node which means you'll be building on a future-proof, solid foundation. Get up-to-date access to improvements in Node, JavaScript, TypeScript and Browser APIs and features as they become available.

Stay nimble; scale with ease

Can you scale easily? Say you have one Chrome extension serving your users. How quickly can you deploy to Firefox or Safari or Opera and meet your users where they are? With Bedframe "adding a new browser" is as simple as adding a new manifest.json.

Lint & format

Lean on industry staples ES Lint + Prettier or stay cutting edge and light weight with Biome.js or oxlint to keep your codebase linted and formatted. Handle it locally with git hooks, in your editor on save, and/or in CI with the MVP workflow on merges to main.

Testing

Same as with any serious web dev codebase, you'll want to consider unit testing and system / integration testing. Implement unit testing with Vitest, collect coverage and optionally run e2e testing with Playwright. You don't need to test the whole world but set your team up for success with some guard rails and safety nets in your codebase.

Git hooks

Employ a bit of long-term thinking and future-proofing of your codebase. Consider implementing prepare-commit-msg, pre-commit, and commit-msg hooks that run on local and/or in CI to ensure linting, testing and other crucial code quality tasks run before code merges into main.

Commit linting

Working on a team? Do you have non-dev collaborators? Has the term "stake holders" been uttered in your vicinity? Someone's gonna ask for a dashboard soon enough, I promise you. Add consistency to your commit and git history with standard commits. Your tomorrow self will thank you when the VP of engineering comes calling!

Changesets, automated Versioning, changelog & tagged release generation

MV3 manifests aren't SemVer versioned but you need to increment their versions with each new update to the published extension. Add changesets for your patch, minor and major updates and automate version bumping.

Automated, programmatic publishing

Bedframe takes advantage of available browser vendors' public REST APIs to automate the uploading, updating, and publishing process in CI. Adding a new feature? Add a changeset > git add > git push and trigger the workflow to publish automatically.

Living, self-policing codebase

Let your CI/CD workflows keep your codebase up to date; no manual policing. You don't want to wake up to unhappy users because something broke as a result of some shoddily coded npm package somewhere in your "supply chain". Automatically monitor vulnerabilities in dependencies used in your project and keep your dependencies up-to-date. Go back to BED, everything's fine!

or