Development
Get started with the code and develop your browser extension.
Prerequisites
To get started with TurboStarter, ensure you have the following installed and set up:
Project development
Install dependencies
Install the project dependencies by running the following command:
Why pnpm?
It is a fast, disk space efficient package manager that uses hard links and symlinks to save one version of a module only ever once on a disk. It also has a great monorepo support. Of course, you can change it to use Bun, yarn or npm with minimal effort.
Setup environment variables
Create a .env.local files from .env.example files and fill in the required environment variables.
Check Environment variables for more details on setting up environment variables.
Start database
If you want to use local database (recommended for development purposes), ensure Docker is running, then setup your database with:
This command initiates the PostgreSQL container and runs migrations, ensuring your database is up to date and ready to use.
Start development server
To start the application development server, run:
Your development server should now be running 🎉
WXT will create a dev bundle for your extension and a live-reloading development server, automatically updating your extension bundle on file changes and reloading your browser on source code changes.
It also makes the icon grayscale to distinguish between development and production extension bundles.
Load the extension
Head over to chrome://extensions and enable Developer Mode.
Click on "Load Unpacked" and navigate to your extension's apps/extension/build/chrome-mv3 directory.
To see your popup, click on the puzzle piece icon on the Chrome toolbar, and click on your extension.
Pro tip
Pin your extension to the Chrome toolbar for easy access by clicking the pin button.
Automatic browser startup
You can easily configure your development server to automatically start the browser when you start the server. To do it, create a web-ext.config.ts file in a root of your extension and configure it with your browser binaries and argumens.
Learn more in the official documentation.
Publish to stores
When you're ready to publish the project to the stores, follow the guidelines and checklist to ensure everything is set up correctly.
Last updated on