Quick start

Install Bedframe

Install Bedframe (@bedframe/cli)

bun add @bedframe/cli -g

pnpm add @bedframe/cli -g

npm install @bedframe/cli -g

yarn add @bedframe/cli -g

Note: Installing the Bedframe CLI globally makes it easy to quickly run the project generator but is not required. You can install Bedframe CLI @bedframe/cli (along with @bedframe/core) as devDependencies on each project.

You can also simply run the make command directly but running npm create bedframe and following the CLI prompts.

After installation, you will have access to the bedframe executable in your command line. You can verify that it is properly installed by simply running bedframe, which should present you with an intro and help message.

>_

  B R O W S E R
  E X T E N S I O N
  D E V E L O P M E N T
  F R A M E W O R K

  @bedframe/cli v0.0.78


Usage: @bedframe/cli [options] [command]

Bedframe CLI - your Browser Extension Development framework (dev utility)

Options:
  -V, --version             output the version number
  -h, --help                display help for command

Commands:
  make [options] [name]     make your B E D
  version [options]         create or update git release of current version (changeset version)
  publish [options]         publish new or update existing extension(s)
                            - chrome: Chrome Web Store (C W S)
                            - firefox: Mozilla/Firefox Add-ons (A M O)
                            - edge: MS Edge Add-ons (M E A)
  dev [browsers]            start Vite dev server for one or more browsers concurrently
  build [browsers]          generate prod builds for 1 or more browsers concurrently
  zip [options] [browsers]  zip browser dist directories
  help [command]            display help for command

Check install succeeded

You can check you have the right version with this command:

bedframe --version

Make your first BED

To create a new bedframe project, run:

bedframe make

Then follow the prompts.

Note: The Bedframe CLI is in active development. The happy path for the project generator currently is React with TypeScript and Tailwind. You can however start with any base Vite template present (in your preferred meta-framework). Visit the Framework Guides for step-by-step instructions.

You can specify the project name as the first argument of the make command. Using . for the project name will scaffold the project in the current directory.

# scaffold project called `bedframe-project`
bedframe make bedframe-project

# scaffold project in the current directory
bedframe make .

You will then be prompted to configure your BED, picking Framework, Language, Browser to target, etc. All configurations can be manually edited once you generate the project.

Once the project generator runs, and (optionally) installs dependencies, you should see helpful information about suggested next steps.

Bedframe CLI - make your first BED

Next steps

  >_  your BED is made! 🚀

      created bedframe-project at /path/to/your/bedframe-project

      inside that directory, you can run several commands:

      development:
        bun run dev                         start dev server for all browsers
        bun run dev chrome                  start dev server for chrome
        bun run dev chrome,brave,opera      start dev servers for chrome,brave,opera

      production:
        bun run build                       generate prod builds for all browsers (./dist/<browser>)
        bun run build chrome                generate prod build for chrome (./dist/chrome)
        bun run build chrome,brave,opera    generate prod builds for chrome,brave,opera

      - - -

      suggested next steps:
        1. cd bedframe-project
        2. bun run dev chrome

cd into the project and take a brief tour of your Bedframe project. e.g. if you generated a base React w/TypeScript and Tailwind project, the folder structure should look more or less like this:

>_ bedframe-project/
  ├ .git/
  ├ .github/
  │ ├ ○ workflows/
  │ │ └ ○ mvp.yml 👈 the M V P of your B E D !
  ├ .changeset/
  ├ .husky/
  ├ ○ src/
  │ ├ ○ _config/
  │ │ ├ ○ bedframe.config.ts
  │ │ ├ ○ shadcn.config.ts
  │ │ └ ○ tests.config.ts
  │ ├ ○ assets/
  │ │ ├ ○ fonts/
  │ │ └ ○ icons/
  │ ├ ○ components/
  │ ├ ○ manifests/
  │ │ ├ ○ chrome.ts
  │ │ ├ ○ brave.ts
  │ │ ├ ○ opera.ts
  │ │ ├ ○ edge.ts
  │ │ ├ ○ firefox.ts
  │ │ └ ○ safari.ts
  │ ├ ○ pages/
  │ ├ ○ scripts/
  │ ├ └ ○ service-worker.ts
  │ └ ○ styles/
  ├ .gitignore
  ├ .prettierignore
  ├ ○ components.json
  ├ ○ postcss.config.ts
  ├ ○ package.json
  ├ ○ README.md
  ├ ○ tailwind.config.ts
  ├ ○ tsconfig.json
  └ ○ vite.config.ts

You can find some example starter projects in the Bedframe Github repository examples directory.

Quick start

Install Bedframe and make your first BED

Install Bedframe

Check install succeeded

Make your first BED

Next steps

Build for all browsers

Load unpacked (Chrome)

Create a repo and push to Github

News + updates Dispatch