内容脚本 UI 开发指南

Plasmo 提供了一流的支持，让您能够轻松地将 React、Svelte3 或 Vue3 组件挂载到当前网页中。这项强大的功能被称为内容脚本 UI（CSUI）。

一个浏览器扩展可以根据需要包含任意数量的 CSUI 组件，每个组件都可以通过导出配置对象来精准定位特定的网页或网页组。开始使用 React 注入 UI 非常简单：

content.tsx


const CustomButton = () => {
  return <button>自定义按钮</button>
}
 
export default CustomButton

👀

注意：如果需要创建多个内容脚本，请建立 contents/ 目录并将您的 CSUI 入口文件放置在其中。

查看完整示例，请访问 with-content-scripts-ui 示例仓库。

内容脚本 UI 是内容脚本功能的扩展子集。因此，您可以像配置常规的 Plasmo 内容脚本一样，通过导出一个配置对象来定制化您的 CSUI 组件。

Plasmo CSUI 的工作原理

简要说明：Plasmo 会创建一个 Shadow DOM 并将您导出的组件挂载到其中。这种隔离技术能够有效防止网页样式对您组件样式的影响，同时也能避免您的组件样式干扰网页的正常显示。

想要深入了解技术细节？请参阅 Plasmo CSUI 的生命周期详解文档。