How to set up a chrome extension using React and TypeScript with multiple pages and entry points?

Question

There are plenty of questions and tutorials on this topic, but none of them cover all use cases for a chrome extension, because most of them assume there's only one entry point.

Here are the requisites:

Multiple "single page applications":

1) popup.html for the extension pop up page

2) options.html for the options page

3) custom.html this is a custom .html file that the extension can refer to "locally"

Each of these files are entry points for React to manipulate the DOM, but they behave independently of each other.

Non React TypeScript files

They must not be bundled together with any other scripts, and gets compiled to its own JavaScript file, for example a background.ts that compiles to background.js (which is refered to in the manifest.json).

I assume this is doable with TypeScript, React and Webpack but I'm not sure how to approach that.

Answer 1

There is a custom CRA template that exactly fits your needs: complex-browserext-typescript.

Usage:

npx create-react-app my-app --template complex-browserext-typescript

By default it sets up 4 entry points associated with page-like extension components:

• popup (src/index.tsx) - extension's popup page, replaces the default index entry point.
• options (src/options.tsx) - extension's options page.
• background (src/background.ts) - background script.
• content (src/content.ts) - content script.

However there is an option to exclude any of the above components except the popup from compilation as well as add extra HTML page(s).

Also see this article for usage example.

Answer 2

I found a solution but it was not using create-react-app and webpack. It looks like parcel supports multiple entry points out of the box without any configuration.

Assuming a directory structure like this:

├── chrome
│   └── background.ts
├── html
│   ├── custom.html
│   ├── options.html
│   └── popup.html
├── manifest.json
├── package.json
├── react
│   ├── custom.tsx
│   ├── options.tsx
│   └── popup.tsx

With Parcel.js you simply do:

parcel build html/*.html react/*.tsx chrome/*.ts

And it will handle the multiple entry points. I created a repository that contains a template for that approach, it contains a fully runnable example.