Chrome插件全栈开发实战

1. 介绍Chrome 插件和认识Plasmo
    1. Chrome插件的基本概念
    2. Chrome插件的工作原理
    3. 发布与维护的简单介绍
    4. 认识Plasmo
    5. Plasmo的主要优势
2. 搭建插件基础模板
    1. 环境准备
    2. 创建Plasmo项目
    3. 启用src目录
    4. 构建常用项目结构
    5. 引入Tailwind CSS
    6. 引入Shadcn/ui 
    7. 整理公共方法
3. Firebase资源创建和配置全过程
    1. 创建 Google Cloud 项目
    2. 创建 Google OAuth 同意屏幕
    3. 创建 OAuth 客户端凭据
    4. 插件端保存客户端凭据
    5. 创建 Firebase 资源
    6. 配置 Firebase 授权
    7. 了解 Firestore(数据库)
    8. 为什么使用Firebase和计费规则介绍
4. Chrome插件登录方案
    1. 方案一：在新标签页登录
    2. 方案二：使用 firebase/auth/web-extension
    3. 方案三：结合 chrome.identity 和 firebase/auth/web-extension
5. Plasmo 插件端集成 Firestore 数据库
    1. 认识 Firestore
    2. 设计用户表和数据入库
    3. token 本地缓存
    4. token 刷新方案
    5. 页面用户信息展示和登录逻辑
6. Next.js 落地页集成 Firebase
    1. 前置知识
    2. 启动落地页
    3. 集成 Firebase
    4. 移动端登录处理
    5. 上线前准备
7. Firestore 安全规则
    1. 基本结构
    2. 匹配路径
    3. 基本操作
    4. 规则函数
    5. 内置变量
    6. 常见规则示例
    7. 复用函数
    8. 测试规则
    9. 安全规则最佳实践
    10. PH Copilot安全规则参考
8. 插件多语言的实现
    1. 多语言配置
    2. 语言存储
    3. 语言上下文
    4. 语言切换器组件
    5. 翻译功能实现
    6. 翻译功能使用
9. 插件端抓取页面内容
    1. 分析需求
    2. 分析要抓取的元素
    3. 修改权限
10. sidepanel 集成AI对话功能生成产品总结和评论
    1. Markdown 内容渲染
    2. sidepanel 创建生成产品总结入口
    3. sidepanel 创建生成评论入口
    4. background 处理消息和响应隔离
11. content 集成AI对话功能生成产品总结和评论
    1. 编写适用于 ProductHunt 的 content 入口
    2. content 创建生成产品总结入口
    3. content 创建生成评论入口
12. 服务端集成 AI 对话功能并和插件端通信
    1. 插件端请求服务端的安全措施
    2. Prompt 准备
    3. AI 对话接口设计和开发
    4. 验证 credits 消耗
    5. 延长请求超时时间
13. Paddle申请流程介绍
14. Paddle后台功能介绍
15. 集成Paddle一次性支付，用户可购买 Credits
    1. Paddle 后台设置产品
    2. 接入 Paddle 支付
    3. 分析和处理一次性付款通知（Webhook），完成 credits 购买
    4. 处理监听退款通知（Webhook），自动扣除 credits
16. 集成Paddle订阅，设计会员权限
    1. 分析 Paddle 订阅事件
    2. 处理订阅与续订
    3. 处理取消订阅
    4. 处理退款
    5. 落地页端信息展示与取消订阅
    6. 插件端提供订阅用户高级功能
    7. 订阅用户的 AI 对话处理逻辑
17. 发布产品
    1. 发布 Chrome 插件
    2. 使用 Vercel 部署 Next.js 项目

ph-copilot-dev-guide
├─ src
│  ├─ background
│  │  ├─ firebase
│  │  │  ├─ authService.ts
│  │  │  ├─ config.ts
│  │  │  ├─ index.ts
│  │  │  ├─ tokenManager.ts
│  │  │  └─ userService.ts
│  │  ├─ aiResponseHandler.ts
│  │  ├─ index.ts
│  │  ├─ messageHandler.ts
│  │  ├─ sendMessageToSource.ts
│  │  ├─ storageManager.ts
│  │  └─ updateChecker.ts
│  ├─ components
│  │  ├─ LanguageSwitcher
│  │  │  ├─ LanguageContext.tsx
│  │  │  ├─ index.tsx
│  │  │  ├─ translations.ts
│  │  │  └─ useTranslation.ts
│  │  └─ ui
│  │     ├─ avatar.tsx
│  │     ├─ button.tsx
│  │     ├─ card.tsx
│  │     ├─ popover.tsx
│  │     ├─ select.tsx
│  │     ├─ toggle.tsx
│  │     └─ tooltip.tsx
│  ├─ contents
│  │  ├─ components
│  │  │  ├─ ContentCommentGenerator.tsx
│  │  │  ├─ ContentOverviewGenerator.tsx
│  │  │  └─ CopilotTools.tsx
│  │  ├─ hooks
│  │  │  ├─ useDOMObserver.ts
│  │  │  └─ useUrlChangeListener.ts
│  │  ├─ styles
│  │  │  └─ content.css
│  │  ├─ utils
│  │  │  └─ constants.ts
│  │  └─ index.tsx
│  ├─ lib
│  │  ├─ constant.ts
│  │  ├─ prefixByEnv.ts
│  │  ├─ useProductDetails.ts
│  │  └─ utils.ts
│  ├─ popup
│  │  ├─ components
│  │  ├─ hooks
│  │  ├─ styles
│  │  ├─ utils
│  │  └─ index.tsx
│  ├─ sidepanel
│  │  ├─ components
│  │  │  ├─ CommentCard.tsx
│  │  │  ├─ Header.tsx
│  │  │  ├─ OverviewCard.tsx
│  │  │  └─ UserInfoCard.tsx
│  │  ├─ hooks
│  │  ├─ styles
│  │  ├─ utils
│  │  └─ index.tsx
│  ├─ store
│  │  ├─ firebaseAuthStorage.ts
│  │  ├─ useCommentLength.ts
│  │  ├─ useLanguageStorage.ts
│  │  └─ useUserData.ts
│  ├─ types
│  │  ├─ product.ts
│  │  └─ user.ts
│  └─ style.css