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

Question

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

以下是必要条件：

多个“单页应用程序”：

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

2)options.html选项页面

3）custom.html这是一个自定义.html文件，扩展可以“本地”引用

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

非 React TypeScript 文件

它们不得与任何其他脚本捆绑在一起，并被编译为其自己的 JavaScript 文件，例如background.ts编译为的a background.js（在 参考资料中提到manifest.json）。

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

Answer 1

有一个完全适合您需求的自定义 CRA 模板：complex-browserext-typescript。

用法：

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

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

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

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

另请参阅本文的使用示例。