Skip to main content
Get your development environment ready to start working on Your NewTab.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (v18 or higher recommended)
  • Bun (package manager and runtime)
  • Git (for version control)
  • Chrome or Firefox browser
This project uses Bun as the package manager. If you don’t have it installed, run:
curl -fsSL https://bun.sh/install | bash

​
Installation

1

Clone the repository

Clone the Your NewTab repository to your local machine:
git clone https://github.com/fuongz/newtab.git
cd newtab
2

Install dependencies

Install all required dependencies using Bun:
bun install
This will install all development dependencies including Vue 3, Vite, TypeScript, and build tools.
3

Start the development server

Choose the appropriate command based on your target browser:
bun run dev
This will:
  • Clear previous builds
  • Generate manifest files
  • Start Vite dev server with HMR (Hot Module Replacement)
  • Watch for file changes
4

Load the extension in your browser

​
For Chrome/Chromium

  1. Open Chrome and navigate to chrome://extensions
  2. Enable Developer mode (toggle in the top-right corner)
  3. Click Load unpacked
  4. Select the extension/ folder from your project directory

​
For Firefox

  1. Open Firefox and navigate to about:debugging#/runtime/this-firefox
  2. Click Load Temporary Add-on
  3. Navigate to the extension/ folder and select the manifest.json file
5

Verify the installation

Open a new tab in your browser. You should see the Your NewTab extension displaying a random inspirational quote.
If you see the quote display, your development environment is set up correctly!

​
Development Workflow

With the dev server running, you can:
  • Edit Vue components in src/ and see changes instantly via HMR
  • Modify styles and see updates without reloading
  • Add new features with TypeScript support
The development server runs on http://localhost:3303 by default. The extension loads resources from this server during development.

​
Alternative Testing

You can also use web-ext to run the extension in a standalone browser instance: 
bun run start:chromium

​
Next Steps

Building

Learn how to build the extension for production

Release

Understand the release process

Build docs developers (and LLMs) love

Get started for freeTalk to us