CNB Workspace Manager

一个使用 TypeScript 开发的浏览器扩展，用于管理 CNB (Cloud Native Build) 的云端开发环境 (Workspaces)。

• 🔑 Token 管理 - 安全存储和管理 CNB API Token
• 📋 Workspace 列表 - 实时展示运行中的云端开发环境列表
• ⏱️ 状态监控 - 显示 Workspace 的分支、运行时长等详细信息
• 🛑 一键停止 - 支持快速停止指定的 Workspace
• 🔄 自动刷新 - 定时自动刷新列表，保持状态同步

• TypeScript - 类型安全的 JavaScript 超集
• Webpack - 现代 JavaScript 应用程序的静态模块打包工具
• Chrome Extension Manifest V3 - 最新的 Chrome 扩展标准
• CNB Open API - 与 CNB 平台进行交互的接口

cnb-ci-flow/
├── src/
│   ├── popup/              # 弹窗相关文件
│   │   ├── popup.html      # 扩展主界面 HTML
│   │   ├── popup.ts        # 界面交互逻辑与 API 调用
│   │   └── popup.css       # 界面样式
│   ├── content/            # 内容脚本
│   │   └── content.ts      # 页面注入脚本 (保留功能)
│   ├── background/         # 后台脚本
│   │   └── background.ts   # Service Worker
│   ├── types/              # 类型定义
│   │   └── index.ts        # 通用接口定义
│   └── pages/              # 扩展页面
│       ├── dashboard.html  # 仪表盘页面
│       ├── dashboard.ts    # 仪表盘逻辑
│       └── dashboard.css   # 仪表盘样式
├── public/
│   ├── manifest.json       # 扩展配置文件
│   └── icons/              # 图标资源
├── dist/                   # 构建输出目录
├── webpack.config.js       # Webpack 配置
├── tsconfig.json          # TypeScript 配置
└── package.json           # 项目依赖配置

npm install

npm run dev

这将启动 Webpack 的 watch 模式，自动监听文件变化并重新构建。

npm run build

构建完成后，dist 目录将包含所有打包后的文件。

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

1. 配置 Token

   • 点击扩展图标打开弹窗
   • 在输入框中粘贴您的 CNB API Token
   • 点击"保存 Token"按钮
   • 如何获取 Token?

2. 查看 Workspace

   • 配置 Token 后，主界面会自动显示当前运行中的 Workspace 列表
   • 列表包含仓库名称、分支信息和运行时长

3. 管理 Workspace

   • 点击列表项右侧的"停止"按钮可关闭对应的 Workspace
   • 点击底部的刷新按钮可手动更新列表
   • 扩展会每 30 秒自动刷新一次数据

MIT License