如何使用具有多个页面和入口点的 React 和 TypeScript 设置 chrome 扩展？
How to set up a chrome extension using React and TypeScript with multiple pages and entry points?
有很多关于此主题的问题和教程，但其中 none 涵盖了 chrome 扩展的所有用例，因为其中大多数假设只有一个入口点。
先决条件如下：
多个"single page applications":
1) popup.html 用于扩展弹出页面
2) options.html 用于选项页面
3) custom.html 这是一个自定义 .html 文件，扩展可以引用 "locally"
这些文件中的每一个都是 React 操纵 DOM 的入口点，但它们的行为彼此独立。
非 React TypeScript 文件
它们不得与任何其他脚本捆绑在一起，并被编译成自己的 JavaScript 文件，例如编译成 background.js 的 background.ts（参考在 manifest.json).
我认为这对于 TypeScript、React 和 Webpack 是可行的，但我不确定如何处理。
我找到了一个解决方案，但它没有使用 create-react-app 和 webpack。看起来 parcel 无需任何配置即可开箱即用地支持多个入口点。
假设目录结构如下：
├── chrome
│ └── background.ts
├── html
│ ├── custom.html
│ ├── options.html
│ └── popup.html
├── manifest.json
├── package.json
├── react
│ ├── custom.tsx
│ ├── options.tsx
│ └── popup.tsx
使用 Parcel.js 你只需要做：
parcel build html/*.html react/*.tsx chrome/*.ts
并且它将处理多个入口点。我创建了一个包含该方法模板的 repository，它包含一个完全可运行的示例。
有一个完全符合您需求的自定义 CRA 模板：complex-browserext-typescript。
用法：
npx create-react-app my-app --template complex-browserext-typescript
默认设置 4 个与 page-like 扩展组件关联的入口点：
- popup (
src/index.tsx) - 扩展的弹出页面，替换
默认索引入口点。
- 选项 (
src/options.tsx) - 扩展的选项页面。
- 背景 (
src/background.ts) - 背景脚本。
- 内容 (
src/content.ts) - 内容脚本。
但是，可以选择从编译中排除除弹出窗口之外的任何上述组件，以及添加额外的 HTML 页面。
有关用法示例，请参阅 this article。
有很多关于此主题的问题和教程，但其中 none 涵盖了 chrome 扩展的所有用例，因为其中大多数假设只有一个入口点。
先决条件如下：
多个"single page applications":
1) popup.html 用于扩展弹出页面
2) options.html 用于选项页面
3) custom.html 这是一个自定义 .html 文件，扩展可以引用 "locally"
这些文件中的每一个都是 React 操纵 DOM 的入口点，但它们的行为彼此独立。
非 React TypeScript 文件
它们不得与任何其他脚本捆绑在一起，并被编译成自己的 JavaScript 文件，例如编译成 background.js 的 background.ts（参考在 manifest.json).
我认为这对于 TypeScript、React 和 Webpack 是可行的，但我不确定如何处理。
我找到了一个解决方案，但它没有使用 create-react-app 和 webpack。看起来 parcel 无需任何配置即可开箱即用地支持多个入口点。
假设目录结构如下：
├── chrome
│ └── background.ts
├── html
│ ├── custom.html
│ ├── options.html
│ └── popup.html
├── manifest.json
├── package.json
├── react
│ ├── custom.tsx
│ ├── options.tsx
│ └── popup.tsx
使用 Parcel.js 你只需要做：
parcel build html/*.html react/*.tsx chrome/*.ts
并且它将处理多个入口点。我创建了一个包含该方法模板的 repository，它包含一个完全可运行的示例。
有一个完全符合您需求的自定义 CRA 模板：complex-browserext-typescript。
用法：
npx create-react-app my-app --template complex-browserext-typescript
默认设置 4 个与 page-like 扩展组件关联的入口点：
- popup (
src/index.tsx) - 扩展的弹出页面，替换 默认索引入口点。 - 选项 (
src/options.tsx) - 扩展的选项页面。 - 背景 (
src/background.ts) - 背景脚本。 - 内容 (
src/content.ts) - 内容脚本。
但是，可以选择从编译中排除除弹出窗口之外的任何上述组件，以及添加额外的 HTML 页面。
有关用法示例，请参阅 this article。