plasmo+tailwind 开发插件

date
Nov 15, 2024
slug
plasmo_tailwindcss
status
Published
tags
chrome extension
plasmo
type
Post
URL
summary
如何使用plasmo和 tailwindcss开发浏览器插件

使用脚手架创建

遇到了一个 bug
notion image
解决办法:

引入 shadcn

准备工作

  • 在根目录添加component.json
这里的 prefix 是可以根据自己的需求自定义的,包括别名也是
 
因为shadcn/ui默认使用的是「@/」作为源代码的自定义路径,所以编辑tsconfig.json
  • 安装依赖
  • 修改tailwind.config.js
  • 修改 style.css
  • 新建 lib/utils.ts

添加按钮进行测试

在 popup.tsx 引入进行测试
notion image

如何在content中使用

注入即可

如何与 background 进行通信

  • 新建 background/messages 目录
下面只是一个示例,演示如何建立一个handler,要注意默认导出,目录名随意,例如这个是 wechat.ts
  • 在 content 处通信,当然建议封装起来,如果直接放在 content 里面会很乱,如何封装取决于项目的架构
  • 在 content 页面直接使用这个函数就可以了

© Jayden 2024 - 2025