https://github.com/temrb/rttpes-chrome-extension-template

Build modern, high-performance Chrome extensions with React, TypeScript, Tailwind CSS, Prettier, ESLint, and Shadcn.
https://github.com/temrb/rttpes-chrome-extension-template

chrome-extension eslint plasmo prettier react shadcn-ui tailwind typescript

Last synced: 22 days ago
JSON representation

Build modern, high-performance Chrome extensions with React, TypeScript, Tailwind CSS, Prettier, ESLint, and Shadcn.

• Host: GitHub
• URL: https://github.com/temrb/rttpes-chrome-extension-template
• Owner: temrb
• Created: 2025-01-02T10:54:49.000Z (23 days ago)
• Default Branch: main
• Last Pushed: 2025-01-02T11:26:55.000Z (23 days ago)
• Last Synced: 2025-01-02T11:32:03.520Z (23 days ago)
• Topics: chrome-extension, eslint, plasmo, prettier, react, shadcn-ui, tailwind, typescript
• Language: TypeScript
• Homepage:
• Size: 0 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# RTTPES Chrome Extension Template

The RTTPES Chrome Extension Template is a powerful starting point for building modern, high-performance Chrome extensions.

RTTPES:

-   React

-   TypeScript

-   Tailwind CSS

-   Prettier

-   ESLint

-   ShadCN

This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).

## Getting Started

First, install packages:

```bash

pnpm i

# or

npm i

```

Then, run the development server:

```bash

pnpm dev

# or

npm run dev

```

Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.

You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.

For further guidance, [visit our Documentation](https://docs.plasmo.com/)

## Making production build

Run the following:

```bash

pnpm build

# or

npm run build

```

This should create a production bundle for your extension, ready to be zipped and published to the stores!