如何使用 React 和 TypeScript 设置具有多个页面和入口点的 Chrome 扩展？

关于这一主题有很多问题和教程，但没有一个涵盖 Chrome 扩展的所有用例，因为大多数问题和教程都假设只有一个入口点。

以下是必要条件：

多个“单页应用程序”：

1) popup.html对于扩展弹出页面

2) options.html对于选项页面

3) custom.html这是一种习俗.html扩展名可以“本地”引用的文件

这些文件中的每一个都是 React 操作 DOM 的入口点，但它们的行为彼此独立。

非 React TypeScript 文件

它们不得与任何其他脚本捆绑在一起，并被编译为其自己的 JavaScript 文件，例如background.ts编译为background.js（这是在manifest.json).

我认为这对于 TypeScript、React 和 Webpack 是可行的，但我不确定如何实现。

有一个自定义 CRA 模板完全适合您的需求：complex-browserext-typescript https://www.npmjs.com/package/cra-template-complex-browserext-typescript.

Usage:

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

默认情况下，它设置 4 个与页面式扩展组件关联的入口点：

• popup (src/index.tsx) - 扩展程序的弹出页面，替换 默认索引入口点。
• 选项 （src/options.tsx) - 扩展的选项页面。
• 背景 （src/background.ts) - 后台脚本。
• 内容 （src/content.ts) - 内容脚本。

但是，可以选择从编译中排除除弹出窗口之外的任何上述组件以及添加额外的 HTML 页面。

另请参阅本文 https://levelup.gitconnected.com/how-to-build-a-rich-chrome-extension-quickly-with-create-react-app-and-redux-d9b64cf64832用于使用示例。