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

Question

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

这里是先决条件:

多个“单页应用”:

1) 扩展弹出页面的popup.html

2) 选项页面的options.html

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

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

非 React TypeScript 文件

它们不得与任何其他脚本捆绑在一起，并被编译为自己的 JavaScript 文件，例如编译为 background.js 的 background.ts (在 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) - 背景脚本。
• content (src/content.ts) - 内容脚本。

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

另见 this article用法示例。