plasmo+tailwind 开发插件
date
Nov 15, 2024
slug
plasmo_tailwindcss
status
Published
tags
chrome extension
plasmo
type
Post
URL
summary
如何使用plasmo和 tailwindcss开发浏览器插件
使用脚手架创建
遇到了一个 bug
解决办法:
引入 shadcn
准备工作
- 在根目录添加component.json
这里的 prefix 是可以根据自己的需求自定义的,包括别名也是
因为shadcn/ui默认使用的是「@/」作为源代码的自定义路径,所以编辑tsconfig.json
- 安装依赖
- 修改tailwind.config.js
- 修改 style.css
- 新建 lib/utils.ts
添加按钮进行测试
在 popup.tsx 引入进行测试
如何在content中使用
注入即可
如何与 background 进行通信
- 新建 background/messages 目录
下面只是一个示例,演示如何建立一个handler,要注意默认导出,目录名随意,例如这个是 wechat.ts
- 在 content 处通信,当然建议封装起来,如果直接放在 content 里面会很乱,如何封装取决于项目的架构
- 在 content 页面直接使用这个函数就可以了