Skip to content

Latest commit

 

History

History
231 lines (167 loc) · 5.39 KB

DEVELOPMENT.md

File metadata and controls

231 lines (167 loc) · 5.39 KB

开发指南

项目设置

安装依赖

pnpm install

启动开发模式

pnpm dev

开发服务器启动后，构建文件会生成在 build/chrome-mv3-dev 目录。

运行单元测试

pnpm test

加载扩展到浏览器

  1. 打开 Chrome 浏览器
  2. 访问 chrome://extensions/
  3. 开启右上角的"开发者模式"
  4. 点击"加载已解压的扩展程序"
  5. 选择 build/chrome-mv3-dev 目录

环境配置

配置文件位置

所有域名和 URL 配置集中在 lib/config/env.ts 文件中：

export const ENV = {
  // 基础域名
  BASE_DOMAIN: "88code.ai",

  // API 基础 URL
  API_BASE_URL: "https://www.88code.ai",

  // 网站 URL
  WEBSITE_URL: "https://www.88code.ai",
  LOGIN_URL: "https://www.88code.ai/user/login",

  // Content Script 匹配模式
  CONTENT_SCRIPT_MATCHES: [
    "https://www.88code.ai/*",
    "https://88code.ai/*"
  ] as const,

  // 环境标识
  isDevelopment: process.env.NODE_ENV === "development",
  isProduction: process.env.NODE_ENV === "production"
} as const

修改域名配置

如果需要修改域名（例如从 88code.ai 改为其他域名）：

  1. 打开配置文件：lib/config/env.ts

  2. 修改相关配置：

    export const ENV = {
  BASE_DOMAIN: "your-domain.com",  // 修改基础域名
  API_BASE_URL: "https://your-domain.com",  // 修改 API URL
  WEBSITE_URL: "https://your-domain.com",  // 修改网站 URL
  LOGIN_URL: "https://your-domain.com/user/login",  // 修改登录 URL
  CONTENT_SCRIPT_MATCHES: [
    "https://your-domain.com/*",
    "https://your-domain.com/*"
  ] as const,
  // ...
}

  3. 重新构建扩展：

    pnpm build

注意：只需修改 lib/config/env.ts 一个文件，所有引用该配置的地方会自动更新。

配置说明

配置项 说明 使用位置
BASE_DOMAIN 基础域名 用于域名判断和 cookie 配置
API_BASE_URL API 基础 URL 所有 API 请求的基础路径
WEBSITE_URL 网站首页 URL EmptyState 组件的登录引导
LOGIN_URL 登录页面 URL LoginPrompt 组件的登录跳转
CONTENT_SCRIPT_MATCHES Content Script 匹配模式 确定 content script 在哪些页面注入
isDevelopment 开发环境标识 控制调试工具和日志输出
isProduction 生产环境标识 控制生产环境行为

测试接口对接

准备工作

  1. 访问 88code.ai 并登录

  2. 设置 authToken（临时测试方法）

    由于扩展需要从网站的 storage 读取 authToken，目前有两种方式设置：

    方法一：在 88code.ai 网站控制台设置

    // 在 88code.ai 网站的控制台执行
chrome.storage.local.set({ authToken: 'your-token-here' })

    方法二：修改扩展代码临时硬编码（仅用于测试）

    在 lib/storage/index.ts 的 getAuthToken 函数中临时返回测试 token：

    export async function getAuthToken(): Promise<string | null> {
  // 临时测试用
  return "1bdfcc5f69c044848cdaeb9f72d3c3b4"

  // 生产代码
  // try {
  //   const token = await storage.get("authToken")
  //   return token || null
  // } catch (error) {
  //   console.error("[Storage] 读取 authToken 失败:", error)
  //   return null
  // }
}

查看 API 响应

扩展会自动将所有 API 响应打印到控制台。查看方式：

  1. 打开扩展 Popup

    • 点击浏览器工具栏中的扩展图标

  2. 打开开发者工具

    • 在开发模式下，Popup 会自动显示 Eruda 调试工具
    • 或者右键点击 Popup -> 检查

  3. 查看控制台输出

    控制台会显示 API 请求和响应信息，包括：

    • 认证信息
    • 请求 URL
    • 响应状态
    • 响应数据

调试技巧

1. 使用 Eruda 调试工具

开发模式下会自动启用 Eruda，可以在 Popup 中直接查看：

  • Console 日志
  • Network 请求
  • Storage 数据
  • Elements 元素

2. 查看 Network 请求

在 Eruda 的 Network 标签中，可以看到：

  • 请求 URL
  • 请求头（包括 Authorization）
  • 响应状态
  • 响应内容

3. 检查 Storage

在 Eruda 的 Storage 标签中，可以查看：

  • authToken 的值
  • 其他存储的数据

4. 强制刷新数据

点击 Popup 右上角的刷新按钮，会重新获取所有数据并在控制台打印。

常见问题

1. 看不到数据

检查步骤：

  1. 确认 authToken 已设置
  2. 查看控制台是否有错误
  3. 检查 Network 标签查看请求是否发送成功
  4. 确认 API 端点是否正确

2. 认证失败

可能原因：

  • authToken 未设置或已过期
  • Authorization 头格式不正确
  • API 服务器拒绝请求

解决方法：

  • 重新登录 88code.ai
  • 重新设置 authToken
  • 检查控制台日志

3. CORS 错误

如果遇到 CORS 错误，检查 package.json 中的 host_permissions 是否包含正确的域名：

"manifest": {
  "host_permissions": [
    "https://www.88code.ai/*"
  ]
}

下一步

完成接口测试后，您可以：

  1. 根据实际 API 响应调整类型定义
  2. 完善错误处理
  3. 优化 UI 和交互体验
  4. 添加数据缓存和自动刷新功能