Question 1

How to set up a Chrome extension with Preact using this template?

Accepted Answer

Install dependencies with npm install, then run npm run start chrome. The template automatically builds, opens Chrome, loads the extension, and enables live reloading on changes.

Question 2

Can I use this for Firefox extensions?

Accepted Answer

Yes, run npm run start firefox or npm run build firefox. It configures and loads the extension in Firefox with live reloading, similar to Chrome.

Question 3

preact-chrome-extension vs webpack-based templates?

Accepted Answer

This template uses ESBuild for faster builds (~100ms) and simpler configuration, while webpack templates might offer more plugins but slower build times. It's ideal for speed-focused development.

Question 4

How to add a new page like a settings page?

Accepted Answer

Create a new folder in src/pages with an index file (e.g., index.tsx), and the build system detects it and updates the manifest automatically, based on the README instructions.

Question 5

How to remove Tailwind CSS if I don't need it?

Accepted Answer

Simply avoid importing Tailwind in your CSS files or delete related configurations. The template allows removing unused technologies without breaking the build, as mentioned in the README.

Question 6

Does it support Manifest V3 service workers?

Accepted Answer

Yes, it supports both Manifest V2 and V3 with TypeScript definitions. You can set up background scripts as service workers for V3 compliance in the configuration.

Question 7

How to handle content scripts with this template?

Accepted Answer

Use the provided content script template in src/pages/content, and inject scripts from the public directory via chrome.runtime.getURL, as described in the README.

Preact Chrome Extension

What is Preact Chrome Extension?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions