score:1

Accepted answer

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.

score:3

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.


Related Query

More Query from same tag