diff --git a/.gitignore b/.gitignore index 31cf73b..26497de 100644 --- a/.gitignore +++ b/.gitignore @@ -14,7 +14,6 @@ dist # 编辑器/IDE .idea .vscode -.kiro *.swp *.swo diff --git a/.kiro/steering/Plasmo框架说明.md b/.kiro/steering/Plasmo框架说明.md new file mode 100644 index 0000000..2667d8d --- /dev/null +++ b/.kiro/steering/Plasmo框架说明.md @@ -0,0 +1,193 @@ +--- +inclusion: manual +--- + +# Plasmo 框架技术说明 + +## 1️⃣ 框架定位 + +Plasmo 是一个 Chrome 扩展开发框架,核心价值是:**让你用写 React 项目的方式来写 Chrome 插件**。 + +它帮你处理了: +- manifest.json 自动生成(不用手写) +- TypeScript/React 编译打包(内置,不用配 webpack) +- Content Script 样式隔离(Shadow DOM) +- 开发时热更新(改代码自动刷新扩展) + +## 2️⃣ 约定式文件结构 + +``` +src/ +├── popup.tsx # 点击插件图标弹出的小窗口 +├── options.tsx # 插件设置页(右键图标→选项) +├── newtab.tsx # 覆盖浏览器新标签页 +├── sidepanel.tsx # 浏览器侧边栏面板 +│ +├── background/ +│ └── index.ts # 后台 Service Worker,监听事件、做中转 +│ +├── contents/ +│ └── xxx.tsx / xxx.ts # 注入到目标网页里的脚本(可以有多个) +│ +├── components/ # 自己的 UI 组件(非框架约定) +│ └── Button.tsx +│ +└── lib/ # 工具函数(非框架约定) + └── api.ts +``` + +**核心规则:文件放对位置就自动生效,不需要任何注册或配置。** + +| 文件 | 有就生效,没有就没这功能 | +|------|------------------------| +| `popup.tsx` | 有 → 点图标弹窗;没有 → 点图标触发 background 事件 | +| `options.tsx` | 有 → 有设置页;没有 → 没设置页 | +| `newtab.tsx` | 有 → 新标签页被接管;没有 → 正常新标签页 | +| `sidepanel.tsx` | 有 → 有浏览器侧边栏;没有 → 没有 | +| `background/index.ts` | 有 → 有后台服务;没有 → 没后台逻辑 | +| `contents/任意名.tsx` | 有几个就注入几个脚本到网页里 | + +## 3️⃣ 文件后缀规则 + +跟目录无关,跟内容有关: + +| 后缀 | 能写 HTML 标签(JSX)吗 | 用途 | +|------|------------------------|------| +| `.ts` | ❌ 不能 | 纯逻辑、工具函数、类型定义 | +| `.tsx` | ✅ 能 | 任何需要写 `
`、`