如何使用带有多个页面和入口点的Reaction和TypeScrip来设置Chrome扩展？ [英] How to set up a chrome extension using React and TypeScript with multiple pages and entry points?

问题描述

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

以下是必备条件：

多个单页应用程序：

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

2)options.html选项页

3)custom.html这是扩展名可以"本地"引用的自定义.html文件

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

非反应打字文件

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

我认为使用TypeScrip、Reaction和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，其中包含该方法的模板，它包含一个完全可运行的示例。

这篇关于如何使用带有多个页面和入口点的Reaction和TypeScrip来设置Chrome扩展？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！