🚀 开源了我的第一个 Chrome 扩展：CNB Workspace Manager

🚀 开源了我的第一个 Chrome 扩展：CNB Workspace Manager

一个帮你管理 CNB 云原生开发环境的浏览器扩展，避免免费资源浪费，让每一分配额都用在刀刃上 💰

---

📌 TL;DR

帮你管理 CNB 云原生开发环境，避免免费资源浪费，再也不用担心配额用超了 💰

项目地址： https://cnb.cool/O.o/kill-workspace ⭐

---

💡 为什么做这个？

真实的痛点场景

CNB 平台给每个开发者提供了免费的云原生开发环境配额，但是...

作为一个经常在多个项目间切换的开发者，我总是：

• ❌ 忘记关闭测试环境 - 周五下班关电脑，周一来发现环境跑了整个周末
• ❌ 不记得有几个环境在运行 - 项目A、项目B、临时测试...到底开了几个？
• ❌ 手动去平台一个个找太麻烦 - 登录平台 → 找到项目 → 找到环境 → 点停止，重复N次
• ❌ 配额不知不觉就用完了 - 想开新环境时发现额度已经耗尽 😭

导火索

某个周一早上，打开 CNB平台 查看用量统计：💥 您的免费配额已用尽
这不是第一次了！😭

于是花了一个周末，撸了这个小工具 🛠️

---

✨ 核心功能

1️⃣ 一眼看清所有运行中的环境

特点：

• 📊 清晰展示仓库路径、分支名称
• ⏱️ 实时统计运行时长（精确到分钟）
• 🎨 现代化的卡片式设计

2️⃣ 一键停止，告别浪费

点一下停止按钮 → 确认 → 环境关闭，就是这么简单 👆

// 核心代码就这么简单
async function stopWorkspace(workspace) {
  await fetch('https://api.cnb.cool/workspace/stop', {
    method: 'POST',
    body: JSON.stringify({ sn: workspace.sn })
  });
  // 刷新列表
  await loadWorkspaces();
}

3️⃣ 自动刷新，实时监控

🔄 每 30 秒自动更新状态
📍 无需手动刷新，随时掌控资源使用情况
💡 可自定义刷新间隔
🔒 安全性？我很在意
作为开发者，我特别注重安全，Token 绝不明文存储！

🛡️ 多层安全防护

1. AES-GCM 256位加密存储

class TokenEncryption {
  // 使用 Web Crypto API
  static async encrypt(token: string): Promise<EncryptedData> {
    // 生成随机盐值和 IV
    const salt = crypto.getRandomValues(new Uint8Array(16));
    const iv = crypto.getRandomValues(new Uint8Array(12));
    
    // 基于扩展ID派生密钥
    const key = await this.deriveKey(salt);
    
    // AES-GCM 加密
    const encrypted = await crypto.subtle.encrypt(
      { name: 'AES-GCM', iv },
      key,
      new TextEncoder().encode(token)
    );
    
    return { encrypted, iv, salt };
  }
}

2. PBKDF2 密钥派生
   🔑 基于扩展 ID + 随机盐值
   🔄 10万次迭代增强安全性
   🎲 每次加密使用不同的随机值
3. CSP 内容安全策略

{
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self';"
  }
}

🚫 禁止内联脚本和 eval()
🚫 只允许加载扩展自身的脚本
🚫 防止 XSS 攻击
4. 输入验证 + 白名单

function validateToken(token: string) {
  // 长度限制
  if (token.length < 10 || token.length > 500) {
    return false;
  }
  
  // 字符白名单：只允许 a-zA-Z0-9-_.
  if (!/^[a-zA-Z0-9\-_\.]+$/.test(token)) {
    return false;
  }
  
  return true;
}

🛠️ 技术栈
TypeScript 5.2 类型安全，减少bug
Webpack 5 模块化打包
Web Crypto API 浏览器原生加密，性能好
Chrome Extension V3 最新标准，更安全
CNB Open API 官方开放接口

🚀 使用指南

第一步：获取 CNB Token
访问 CNB 平台：https://cnb.cool/profile/token
点击 生成 Token：点击 “ 添加访问令牌”

复制 Token
第二步：配置扩展
点击浏览器工具栏的 扩展图标
在弹出的输入框中 粘贴 Token
点击 保存按钮
✅ Token 会自动加密存储，安全无忧

第三步：开始管理
扩展会自动加载你的运行中的 Workspace：

查看详情：鼠标悬停查看完整信息
停止环境：点击停止按钮，确认即可
刷新列表：点击右上角刷新图标
修改 Token：点击右上角设置图标

只保留正在使用的环境
让每一分配额都用在刀刃上

如果你也用 CNB 开发，试试这个工具？

✅ 觉得有用？→ 给个 Star ⭐
✅ 有建议？→ 提个 Issue 💡
✅ 想贡献？→ 发个 PR 🔧

特别感谢

CNB 平台提供的免费云原生开发环境
CNB 平台提供的开放 API
所有 Star 和 Fork 项目的朋友们
提出宝贵建议的用户们

开源不易，如果觉得有用，请给个 Star ⭐

🔗 相关链接
📦 项目仓库: https://cnb.cool/O.o/kill-workspace
🐛 问题反馈: https://cnb.cool/O.o/kill-workspace/-/issues
🌐 CNB 平台: https://cnb.cool
📖 CNB 文档: https://docs.cnb.cool/zh/