đŠ 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:
# 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:
# 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
- WXT Documentationâ â Learn how the WXT framework works
- Chrome Extension Developer Guideâ â For building and publishing Chrome extensions.
- Vite Documentationâ â Since WXT uses Vite under the hood, understanding it can help with debugging and customization.
- Dotenv Guideâ â To better understand how environment variables work.