Skip to main content
Build the Your NewTab extension for production deployment to Chrome Web Store or Firefox Add-ons.

​
Build the Extension

To create a production build: 
bun run build
This command performs the following steps:
  1. Clears previous builds - Removes old extension/dist files and manifests
  2. Builds with Vite - Compiles Vue components, TypeScript, and styles
  3. Generates manifest - Creates the appropriate manifest.json for the target browser
The build process uses Vite with production optimizations including minification, tree-shaking, and code splitting.

​
Build Output

After building, you’ll find the compiled extension in: 
extension/
├── dist/
│   └── newtab/
│       ├── index.html
│       └── assets/
│           ├── *.js
│           └── *.css
└── manifest.json

​
What Gets Generated

  • extension/dist/newtab/ - Compiled new tab page with optimized assets
  • extension/manifest.json - Browser extension manifest file
  • Minified JavaScript - Optimized and bundled JS files
  • Optimized CSS - UnoCSS utilities compiled and minified

​
Packaging for Distribution

After building, you can package the extension into distributable formats: 
bun run pack
This creates all three distribution formats:

ZIP

extension.zip for Chrome Web Store

CRX

extension.crx for Chrome manual installation

XPI

extension.xpi for Firefox Add-ons

​
Individual Package Commands

You can also create specific package formats: 
bun run pack:zip

​
Testing the Production Build

Before distributing, test the production build locally:
1

Build the extension

bun run build
2

Load in browser

​
Chrome

  1. Go to chrome://extensions
  2. Enable Developer mode
  3. Click Load unpacked
  4. Select the extension/ folder

​
Firefox

  1. Go to about:debugging#/runtime/this-firefox
  2. Click Load Temporary Add-on
  3. Select extension/manifest.json
3

Test functionality

  • Open new tabs and verify quotes display correctly
  • Check that all UI elements render properly
  • Verify there are no console errors
  • Test on different screen sizes
Always test the production build before submitting to extension stores. The production build may behave differently than the development version.

​
Build Configuration

The build process is configured in vite.config.ts:
  • Output directory: extension/dist
  • Source maps: Disabled in production, inline in development
  • Asset optimization: Relative paths for cross-browser compatibility
  • Auto-imports: Vue Composition API and WebExtension APIs

​
Troubleshooting

​
Build fails with TypeScript errors

Run type checking to identify issues: 
bun run typecheck

​
Assets not loading

Ensure you’ve built the extension before packing: 
bun run build && bun run pack:zip

​
Package size too large

Check that you’re not including unnecessary files. The .gitignore and build process should exclude:
  • node_modules/
  • Source TypeScript files (.ts)
  • Development configuration files

​
Next Steps

Release Process

Learn how to create releases with automated version bumping and git tagging

Build docs developers (and LLMs) love

Get started for freeTalk to us