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

Posted 2023-03-13

【中文标题】如何使用具有多个页面和入口点的 React 和 TypeScript 设置 chrome 扩展？

【英文标题】：How to set up a chrome extension using React and TypeScript with multiple pages and entry points?

【发布时间】：2020-09-22 22:20:27

【问题描述】：

关于这个主题有很多问题和教程，但没有一个涵盖 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 是可行的，但我不确定如何处理。

【参考方案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 页面。

有关用法示例，另请参阅this article。

【参考方案2】：

我找到了一个解决方案，但它没有使用 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，其中包含该方法的模板，它包含一个完全可运行的示例。