本文介绍了如何使用带有多个页面和入口点的Reaction和TypeScrip来设置Chrome扩展？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
关于这个主题的问题和教程很多，但没有一个涵盖了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扩展？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！