智能额度监控工具，让您的 88Code PAYGO 使用一目了然

🎯 PAYGO 可用天数预测 · 📊 服务状态监测 · 🌙 深色模式支持

本扩展基于现代 Web 技术构建，具有跨浏览器兼容性：

• Plasmo v0.90.5 - 现代浏览器扩展开发框架（支持 Chrome MV3 / Firefox MV2）
• React 18.2.0 - UI 组件库
• TypeScript 5.3.3 - 类型安全的 JavaScript

• Tailwind CSS 3.4 - 原子化 CSS 框架
• shadcn/ui - 高质量 React 组件库
• Lucide Icons - 现代图标库

• Plasmo Storage API - 跨浏览器存储管理
• React Hooks - 状态和副作用管理

• pnpm - 高效的包管理器
• Eruda 3.4.3 - 移动端调试工具（开发环境）
• ESLint + Prettier - 代码规范和格式化

• Chrome / Edge (Manifest V3)
• Firefox (Manifest V2)
• 其他 Chromium 内核浏览器

• 智能预测 - PAYGO 可用天数预测，合理规划额度使用
• 服务监测 - 在主页面查看多模型、多线路服务状态
• 跨浏览器兼容 - 统一的 API 适配层
• 类型安全 - 完整的 TypeScript 类型定义
• 现代化 UI - 响应式设计 + 深色模式
• 自动同步 - 30 秒自动刷新数据

套餐概览

服务状态监测

简洁直观的界面设计，套餐使用情况一目了然 · 智能预测让额度规划更轻松

• 预计可用天数：基于当前余额和消费速率，智能预测套餐可用时长
• 消费趋势分析：直观的时间轴展示消费进度和剩余额度分布
• 日均消费统计：精确计算每日平均花费，帮助优化使用策略
• 可视化时间线：用渐变色条形图清晰展示已用天数、预计剩余天数
• 实时更新：消费数据实时同步，预测结果动态调整

💡 智能预测算法： 预计可用天数 = 当前余额 ÷ 日均消费 日均消费 = 总消费额 ÷ 已使用天数

• 一键查看 PAYGO 使用情况
• 可视化进度条显示剩余额度
• 自动刷新最新余额与用量趋势

• 在主页面套餐列表下方查看多模型、多线路服务状态
• 显示服务可用性、延迟、倍率和最近状态时间线
• 支持手动刷新服务状态

• 现代化界面设计，支持深色模式
• 智能预测分析，合理规划额度使用
• 轻量级，低内存占用
• 自动刷新，数据实时同步
• 安全认证，数据本地存储

1. 下载扩展

   • 从 Releases 页面下载 Chrome 版本的 .zip 文件
   • 解压到本地文件夹

2. 安装到浏览器

   • 打开 Chrome 浏览器
   • 访问 chrome://extensions/
   • 开启右上角的 "开发者模式"
   • 点击 "加载已解压的扩展程序"
   • 选择解压后的 chrome-mv3-prod 文件夹

3. 完成

   • 扩展图标出现在浏览器工具栏即表示安装成功

1. 下载扩展

   • 从 Releases 页面下载 Firefox 版本的 .zip 文件
   • 解压到本地文件夹

2. 加载到浏览器

   • 在地址栏输入：about:debugging#/runtime/this-firefox
   • 点击 "临时载入附加组件"
   • 导航到解压后的 firefox-mv2-prod 目录
   • 选择 manifest.json 文件（Firefox 会自动加载整个目录）
   • 点击 "打开"

3. 注意事项

   • 临时加载的扩展在浏览器重启后会被移除
   • 虽然只能选择一个文件，但 Firefox 会加载整个扩展目录

1. 当前官网不可用，历史用户如仍有可用替代入口，请先确认服务方可信度
2. 使用前请评估 token、余额和充值风险
3. 不建议为追求折扣进行大额预充值

• 从 Releases 页面下载对应浏览器的扩展包
• 按照安装方式部分的说明进行安装

1. 点击浏览器工具栏的扩展图标
2. 扩展会自动读取您的登录信息
3. 稍等片刻，数据加载完成

• 总览区域：显示账号维度的汇总数据
• PAYGO 列表：显示活跃 PAYGO 的余额与预测信息
• 服务状态：显示多模型、多线路的可用性和延迟

每个 PAYGO 卡片包含完整信息：

• 套餐名称：PAYGO
• 套餐状态：活跃中、已过期等
• 使用进度：
  • 当前可用余额
  • 基于近 3 / 7 / 15 / 30 天用量的可用天数预测
• 服务状态：套餐列表下方显示服务可用性、倍率和延迟

两种刷新方式：

1. 自动刷新：每 30 秒自动更新一次
2. 手动刷新：
   • 点击右上角的刷新按钮
   • 立即获取最新数据
   • 适用于刚使用完额度，想查看最新余额的场景

• 服务状态位于套餐列表下方
• 点击服务状态标题右侧的刷新按钮可重新拉取最新状态
• 状态点可悬停查看具体时间、延迟和异常信息

支持两种主题模式：

1. 浅色模式：白色背景，适合白天使用
2. 深色模式：黑色背景，适合夜间使用

切换方法：

• 点击右上角的主题按钮
• 每次点击循环切换：浅色 → 深色 → 浅色

• 本地存储：所有数据存储在本地，不上传到任何服务器
• 安全认证：自动读取配置入口的认证信息
• 最小权限：仅请求必要的浏览器权限
• 开源透明：完整源代码开放在 GitHub

如果这个扩展对您有帮助，请考虑：

• 在 GitHub 上给我们一个 Star
• 向朋友推荐这个扩展
• 提交问题和建议
• 贡献代码和创意

• Node.js: >= 22.21.0
• pnpm: >= 10.19.0
• 操作系统: macOS / Linux / Windows

git clone https://github.com/yourusername/88code-cost.git
cd 88code-cost

pnpm install

Chrome / Edge 开发：

pnpm dev

构建输出：build/chrome-mv3-dev/

Firefox 开发：

pnpm dev:firefox

构建输出：build/firefox-mv2-dev/

Chrome / Edge：

1. 打开 chrome://extensions/ 或 edge://extensions/
2. 开启"开发者模式"
3. 点击"加载已解压的扩展程序"
4. 选择 build/chrome-mv3-dev/ 目录

Firefox：

1. 打开 about:debugging#/runtime/this-firefox
2. 点击"临时载入附加组件"
3. 选择 build/firefox-mv2-dev/manifest.json

• 修改代码后，Plasmo 会自动重新构建
• Chrome/Edge 会自动重载扩展
• Firefox 需要手动刷新（点击"重新加载"按钮）

域名和 API 端点集中在 lib/api/config.ts：

export const BASE_URL = "https://www.88code.ai"

如果需要适配自维护或替代服务，请同步检查：

• lib/api/config.ts：API 基础地址和接口路径
• contents/auth-handler.ts：Content Script 注入域名和 token 读取 key
• package.json：扩展 host_permissions

更多技术细节请参考 DEVELOPMENT.md。

# Chrome
pnpm build:chrome

# Firefox
pnpm build:firefox

# Edge
pnpm build:edge

pnpm build:all

构建输出：

• build/chrome-mv3-prod/ - Chrome 版本
• build/firefox-mv2-prod/ - Firefox 版本
• build/edge-mv3-prod/ - Edge 版本

pnpm type-check

# 检查代码规范
pnpm lint

# 自动修复
pnpm lint:fix

# 检查格式
pnpm format:check

# 自动格式化
pnpm format

pnpm test

88code-cost/
├── assets/                 # 静态资源
│   ├── logo.png           # 扩展图标 & Logo
│   ├── preview.png        # 主界面截图
│   └── preview_monitor.png # 服务状态截图
├── components/            # React 组件
│   ├── RefreshButton.tsx  # 刷新按钮
│   ├── ServiceStatusPanel.tsx # 服务状态监测
│   ├── Skeleton.tsx       # 骨架屏
│   ├── SubscriptionCard.tsx # 套餐卡片
│   └── UsageDisplay.tsx   # 使用情况显示
├── hooks/                 # React Hooks
│   ├── useAuth.ts         # 认证管理
│   ├── useDashboard.ts    # Dashboard 数据
│   └── useSubscriptions.ts # 订阅数据
├── lib/                   # 工具库
│   ├── api/
│   │   ├── client.ts      # API 客户端
│   │   └── config.ts      # API 配置
│   ├── browser-api.ts     # 浏览器 API 适配
│   └── storage/
│       └── index.ts       # Storage 管理
├── types/
│   └── index.ts           # TypeScript 类型
├── contents/              # Content Scripts
│   └── auth-handler.ts    # 认证处理
├── popup.tsx              # 主弹窗
├── global.d.ts            # 全局类型声明
├── package.json           # 项目配置
├── tsconfig.json          # TypeScript 配置
└── tailwind.config.js     # Tailwind 配置

本项目使用 GitHub Actions 自动化发布流程：

# 编辑 package.json，修改 version 字段
# 例如：1.0.0 -> 1.1.0

git add .
git commit -m "chore: bump version to 1.1.0"
git push

# 创建版本标签
git tag v1.1.0

# 推送标签到远程仓库
git push origin v1.1.0

• GitHub Actions 会自动触发构建流程
• 构建完成后，自动创建 GitHub Release
• 自动上传三个平台的扩展包

访问 Releases 页面，确认发布成功。

如果需要手动发布：

# 1. 构建所有平台
pnpm build:all

# 2. 打包 Chrome 版本
cd build/chrome-mv3-prod
zip -r ../../88code-cost-chrome-v1.1.0.zip .
cd ../..

# 3. 打包 Firefox 版本
cd build/firefox-mv2-prod
zip -r ../../88code-cost-firefox-v1.1.0.zip .
cd ../..

# 4. 打包 Edge 版本
cd build/edge-mv3-prod
zip -r ../../88code-cost-edge-v1.1.0.zip .
cd ../..

# 5. 手动创建 GitHub Release，上传 zip 文件

遇到问题或有建议？欢迎提交 Issue：

1. 访问 Issues
2. 点击"New Issue"
3. 选择合适的模板（Bug Report / Feature Request）
4. 填写详细信息
5. 提交

欢迎提交 Pull Request：

点击右上角的"Fork"按钮

git clone https://github.com/yourusername/88code-cost.git
cd 88code-cost

git checkout -b feature/your-feature-name
# 或
git checkout -b fix/your-bug-fix

# 安装依赖
pnpm install

# 启动开发
pnpm dev

# 运行检查
pnpm type-check
pnpm lint
pnpm format:check
pnpm test

git add .
git commit -m "feat: add your feature"
# 或
git commit -m "fix: fix your bug"

提交信息遵循 Conventional Commits：

• feat: - 新功能
• fix: - Bug 修复
• docs: - 文档更新
• style: - 代码格式调整
• refactor: - 重构代码
• test: - 测试相关
• chore: - 构建工具或依赖更新

git push origin feature/your-feature-name

然后在 GitHub 上创建 Pull Request。

• TypeScript: 所有代码必须使用 TypeScript
• ESLint: 遵循项目的 ESLint 规则
• Prettier: 使用 Prettier 格式化代码
• 注释: 为复杂逻辑添加清晰的注释
• 类型: 避免使用 any，尽量提供精确的类型

• 问题反馈
• 更新日志
• 发布记录

本项目基于 MIT License 开源。