内容脚本用户界面
Plasmo 提供了一流的支持，可以将 React、Svelte3 或 Vue3 组件挂载到当前网页中。此功能称为内容脚本用户界面 (CSUI)。
一个扩展程序可以根据需要拥有尽可能多的 CSUI，每个 CSUI 通过 导出配置对象 来针对一组网页或特定网页。要开始使用 React 注入 UI：
- 创建一个
content.tsx - 导出默认的 React 组件
- 完成 🎉
content.tsx
const CustomButton = () => {
return <button>Custom button</button>
}
export default CustomButton👀
注意: 若要有多个内容脚本，请创建一个 contents/ 目录并将您的 CSUI 条目放在那里。
请参阅 with-content-scripts-ui (opens in a new tab) 以获取完整示例。
配置
内容脚本 UI 是内容脚本的一个子集。因此，您可以导出配置对象，就像导出常规 Plasmo 内容脚本一样。
Plasmo CSUI 是如何工作的？
TL;DR: Plasmo 创建了一个 Shadow DOM (opens in a new tab)，并将您导出的组件挂载到它上面。这种隔离技术防止网页样式影响组件样式，反之亦然。
更多详细信息，请参阅 Plasmo CSUI 生命周期。