Welcome to the Chrome Extension Template! It is designed to be an easy starting point for building an extension using:
In other words, this is what we use at zerodays.
NOTE: This template is largely based on our Next.js template and adapted for Chrome extensions. Most of the non-Chrome extension specific documentation can be found there.
Getting started with this template is straightforward. Follow these steps to create your new project using this template:
-
Create a new React app using this template:
Run the following command in your terminal to create a new project with this template:
npx degit zerodays/chrome-extension-template your-project-name
-
Navigate into your new project folder:
cd your-project-name -
Install dependencies:
pnpm i
-
Run the development server:
pnpm dev
- Everything from the Next.js template except:
- Next.js (we use pure React with Vite here).
- Sentry (because of potential problems with sending data from the extension).
- Vite for fast development and optimized production builds.
- CRXJS Vite plugin for building Chrome extensions.
CRXJS allows for configuring the Chrome extension and React build process from the same manifest.json file. This template includes three entry points configured:
- Popup (what one sees when clicking the extension icon) -
src/app.tsx. - Injected content script (currently configured to show a button over the middle of every page) -
src/inject.tsx. - Background script (runs in the background) -
src/background.ts.
In order to not break the css of the original pages when injecting content scripts, Tailwind is configured with a prefix ex. This means that for example h-4 needs to be written ex-h-4. ShadCn is also configured to use the same prefix.
- Github actions for building and publishing the extension.