Skip to content

Latest commit

 

History

History
68 lines (44 loc) · 2.51 KB

README.md

File metadata and controls

68 lines (44 loc) · 2.51 KB

Chrome extension template

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.

🚀 Quick Start

Getting started with this template is straightforward. Follow these steps to create your new project using this template:

  1. 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

  2. Navigate into your new project folder:

    cd your-project-name

  3. Install dependencies:

    pnpm i

  4. Run the development server:

    pnpm dev

🧐 What's Included?

  • 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 and Chrome extension-specific configuration

CRXJS allows for configuring the Chrome extension and React build process from the same manifest.json file. This template includes three entry points configured:

  1. Popup (what one sees when clicking the extension icon) - src/app.tsx.
  2. Injected content script (currently configured to show a button over the middle of every page) - src/inject.tsx.
  3. Background script (runs in the background) - src/background.ts.

➖ Differences from the Next.js template

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.

🏗️ TODO:

  • Github actions for building and publishing the extension.