Skip to Content
ExtensionFast is $50 off with our Launch Deal! 🚀 Make sure to order today! 💛
SetupProject-Specific Setup

🔩 Project-Specific Setup

This step is the bulk of your efforts and focuses on the ExtensionFast repository. It involves cloning the project, installing dependencies, setting up environment variables, and launching the development environment.

Cloning the ExtensionFast Repository

Start by cloning the ExtensionFast repository to your local machine. This step sets up the project and provides you with the source code needed to build and customize your Chrome Extension.

You need to have purchased ExtensionFast and logged in through the website to get access and for this to work.

Clone the Repository and Navigate

Run the following command to clone the ExtensionFast repository and navigate into the project folder:

git clone https://github.com/ExtensionFast/extensionfast-starter.git
cd extensionfast-starter

Remove the Existing Remote

By default, your local repo will be connected to the original GitHub repository (the one you cloned from). You will need to remove that and connect it to your own repo.

git remote remove origin

Create a New Repo on Your Own GitHub Account

At this point, you can transfer the starter code to your own repo. Create a new, empty repository under your own account (e.g., your-username/your-new-extension).

The remaining steps will show up at the bottom once you create your new repository, but will be explained here as well.

If needed, here’s a video guide to help with creating the repository.

Add Your Own Remote (to Your New Repo)

You need to add your own GitHub repo as the new remote:

git remote add origin https://github.com/your-username/your-new-extension.git

Replace your-username and your-new-extension with your actual GitHub username and the new repo name.

Rename Your Branch If Needed

Rename your current branch to main to allow for pushing to the main branch, and if main already exists, force overwrite it.

git branch -M main

Push to Your Own Repo

Finally, you can push the code to your own GitHub repository:

git push -u origin main

Installing Dependencies

Now that you have the project on your machine, the next step is to install the necessary dependencies. This will ensure that your development environment is ready.

Download Libraries and Packages

Run the following command to install the required dependencies:

npm install

This will download all the libraries and packages needed for the extension.

Setting Up Environment Variables

Before running the extension, you’ll need to set up environment variables. These variables allow your extension to interact with external services like authentication, database, and payment gateways.

Copy the .env.example File:

In the root directory, use the following command to copy the .env.example file to .env.local

cp .env.example .env.local

Add Your Variables:

Your variables will be empty for now. After later completing the authentication, database, and payment steps, add the necessary environment variables to your .env.local file.

Empty file:

.env.local
# Keys for Firebase
VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=
 
# Keys for OAuth
VITE_OAUTH_CLIENT_ID=

Dummy data file:

.env.local
# Keys for Firebase
VITE_FIREBASE_API_KEY=AI897123njnyBNj_o9ku7s4ZRk2h0QUNuMY
VITE_FIREBASE_AUTH_DOMAIN=example-extension.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=example-extension
VITE_FIREBASE_STORAGE_BUCKET=example-extension.firebasestorage.app
VITE_FIREBASE_MESSAGING_SENDER_ID=123897123822
VITE_FIREBASE_APP_ID=1:123897123822:web:d6282na3d854fedm82d230
 
# Keys for OAuth
VITE_OAUTH_CLIENT_ID=123897123822-t0uktje2lqfvrg28hdnag29c8pie7kmv.apps.googleusercontent.com

Dummy data is placed in the fields for demonstration, but you will replace the variable values with your actual information inside your project.

⚠

Once done with setup, make sure to come back to your .env.local file and place the variable values inside, or else your application will not function correctly.

Save and Close

Make sure you save the .env.local file once you have added all the required variables.

WXT Framework Configuration

ExtensionFast uses the WXT framework for building Chrome Extensions. If you’re new to WXT, here’s a quick overview of how the framework is structured.

The manifest file, which contains all the necessary configuration for your Chrome Extension, is located inside the config folder. This file includes crucial information such as:

  • The extension’s name and description
  • Permissions needed for the extension to work properly
  • The background scripts, content scripts, and other extension details

Make sure to check the wxt.config.ts file and customize the fields according to your extension’s needs.

Setting Up Authentication, Database, and Payments

After the extensionfast-starter cloning setup, ensure you follow the steps to set up authentication, database, and payments for your extension. These are crucial for making sure everything works smoothly. Please follow the detailed tutorials for each of these setups:

  • Authentication Setup: This guide walks you through the steps to set up authentication for your users.
  • Database Setup: This tutorial helps you configure your database and ensures everything is properly initialized.
  • Payments Setup: Here, you’ll find instructions on how to integrate payment gateways into your extension.

Once you’ve completed all of the prior steps in this document, you’re ready to start developing your Chrome Extension with ExtensionFast.

Be sure to test thoroughly and make any necessary changes to the configuration before publishing your extension.

Starting the Development Server and Editing

You should have your repository up and running, now we want to start the development server so you can start working on your extension.

Start the Local Instance

With this command, you will be able to make changes to your codebase and see your changes in real-time.

npm run dev

Using the info.ts File (Optional)

There is a file located at src/data/info.ts, this file houses a variety of variables to use in your project that you can edit and reflect the changes across your codebase without going into the files individually.

You can choose to use this file, or make the changes inside files one-by-one.

Building Your Local Instance

To get your build deployed onto Chrome, you will need to build the local instance, in which your content will be placed into the .output folder for loading your extension later.

npm run build

Loading Your Extension in Chrome

Once you’ve completed the setup steps and are ready to test your extension, you can load it into Chrome using Developer Mode. Follow these steps:

Build Your Code

Remember to build your code to get the updated version on Chrome

npm run build

Open Chrome

Make sure you’re using the Chrome browser.

Go to the Extensions Page

In Chrome, click on the three dots in the top right corner, then navigate to More Tools > Extensions.

Enable Developer Mode

In the top right corner of the Extensions page, toggle the Developer Mode switch to ON.

Load Your Extension

Click the Load unpacked button and select the folder inside of where your extension’s code is built (the folder inside the .output folder located on the root, by default is called chrome-mv3).

Test Your Extension

Your extension should now be loaded into Chrome. You can test it by interacting with the extension’s icon in the browser or by opening the extension’s page.

That’s it! You now completed the setup and can do whatever you desire with your extension.

Once you publish it on the Chrome Web Store, I would love to see what you made by using ExtensionFast.

Shoot me an email so I can try it out 😊

💬 Additional Resources

Last updated on
Environment & Tools SetupTroubleshooting