GitHub 重度用户应该都遇到过这类烦恼想快速查看仓库文件树、想一键跳转依赖源码、想在 PR 里直接看到代码归属原生界面总差那么点意思。而我今天要聊的 superpowers正好就是冲着这些痛点去的。不过这个名字在开发圈其实指向了三个完全不同的东西——GitHub 增强扩展、Svelte 全栈模板、还有 Three.js 的 3D 创作平台。我印象里大家搜索安装需求最多的是那个给 GitHub 加 buff 的 Chrome 扩展但另外两个也各有各的玩法。这篇文章把我陆续折腾过、实测下来值得说的部分都整理一遍每个方向我都会讲清楚它解决什么问题、怎么安装、怎么配置、坑在哪里。如果你正准备装 superpowers 但被网上的信息绕晕了这篇应该能帮你省不少时间。1. 先搞明白你要的 superpowers 是哪一个很多人在安装 superpowers 的时候栽跟头第一反应是“版本不对”或者“依赖缺失”但真实原因往往是从一开始就把三个同名项目搞混了。虽然它们都叫 superpowers但安装路径、依赖环境、使用场景完全没有交集。1.1 三个同名项目的核心差异先说 GitHub 扩展这个方向。这个项目本质是一个浏览器扩展给 GitHub 的 Web 界面做增强比如文件树、快速复制路径、查看文件大小、跳转 symbol 定义等。它的安装方式是直接在 Chrome 或 Edge 的扩展商店搜索安装不需要 Node.js、不需要命令行、不需要构建步骤装完刷新页面就能看到效果。适合前端工程师、开源维护者、以及需要在 GitHub 上频繁阅读代码的开发者。第二个方向是 SvelteKit Supabase 的全栈开发模板。这个 superpowers 是一整套脚手架代码使用 Sveltemdsvex Tailwind Supabase 构建包含认证、数据库、文件上传、Markdown 博客等功能模块。安装方式是用 degit 克隆仓库然后 npm install。适合做 SaaS 产品原型、个人博客、全栈学习项目的开发者尤其是那些不想从零配 Supabase 集成的效率型选手。第三个是 3D 创作平台由 Three.js 社区的人做的 WebGL 项目编辑器。它和上面两个更没关联了安装方式是基于 Node.js 部署 Web 服务通过浏览器访问并使用编辑器拖拽 3D 场景。这三个项目如果搞混最典型的翻车现场是你想装 GitHub 扩展结果执行了npm create superpowers然后看着一堆 Svelte 报错一脸懵或者你装了扩展以为它会自带模板功能结果 GitHub 页面上完全没有任何变化。1.2 搜索安装热词背后反映的需求类型从“想要安装 superpowers”这个搜索热词来看搜索者大概率是遇到了某个技术帖或视频里提到了这个项目但没记全上下文。所以这篇文章我先给出一个快速自检的方法你只需要想清楚一件事——你打算在哪里使用它。浏览器里的 GitHub 页面要用就选扩展你要写代码跑项目就选 Svelte 模板你想玩 3D 场景编辑就选 Three.js 平台。三个方向解决三类问题不会同时用到。2. GitHub 增强扩展安装和配置全过程我最初接触 superpowers 就是通过 GitHub 扩展这个入口所以这一部分写细一点。它是一个开源浏览器扩展主攻 GitHub 代码阅读体验我实测下来最实用的功能有三个仓库文件树展示、当前页面文件路径快速复制、文件内 symbol 跳转提示。2.1 扩展安装与基础验证安装方式没什么特殊的在 Chrome 应用商店搜索 “Superpowers for GitHub”认准发布者信息匹配官方仓库地址的版本点击添加到 Chrome。Edge 用户可以直接从 Edge 加载 Chrome 扩展地址栏输入edge://extensions打开“允许来自其他应用商店的扩展”开关然后从 Chrome 商店页面安装。装完之后第一次使用需要访问任意一个 GitHub 仓库页面比如https://github.com/vercel/next.js如果看到仓库文件树区域出现了一个可折叠的完整树状结构说明安装成功。有一个细节我特别提醒安装完后必须刷新一次已有的 GitHub 标签页扩展才会注入脚本。很多人装完没反应就开始怀疑是不是被浏览器拦截了其实只是旧页面没刷新。另外如果你用的是 Firefox这个扩展不一定有官方的 Firefox 版本需要看仓库里的说明去加载临时扩展过程相对麻烦一点我个人建议直接用 Chromium 内核的浏览器。2.2 核心功能配置要点安装只是第一步真正提升效率的是配置。以我实际使用下来最顺手的配置为例文件树默认显示在仓库页左侧嫌它占用视口的话可以在扩展设置里把默认折叠改为按需展开。我目前就是默认折叠需要看目录结构时点一下再展开浏览代码时界面更干净。快速复制文件路径这个功能默认绑定在文件树每个节点的右键菜单里也可以开启悬停时显示复制图标。我推荐开启悬停图标模式因为右键菜单多一步操作在频繁切换文件的场景下差距很明显。实测下来悬停复制图标大概能省掉 0.8 秒一次操作一天上百次文件切换积累下来不夸张确实能改善体验。symbol 跳转这里有一个使用前提扩展需要读取当前文件的编程语言语法信息所以只对 GitHub 已经有语言识别支持的文件类型生效。如果你打开的是.txt或者没有语法高亮的文件这个功能不会出现。另外在超大型单文件仓库里比如单个几千行的 JS 文件symbol 列表的加载会有短暂的延迟这是正常现象不用急着刷新页面或者重装扩展。2.3 沉浸模式与快捷键使用心得superpowers 扩展还有一个隐藏玩法是沉浸模式隐藏 GitHub 页面的 header 和侧边栏只保留代码内容区域配合快捷键使用非常接近本地 IDE 的体验。我习惯看长文件的时候开沉浸模式减少页面元素干扰。默认快捷键是CtrlShiftSmacOS 是CmdShiftS可以在扩展设置里自定义。如果你同时安装了多个浏览器扩展注意检查快捷键冲突我在实际使用中发现 Vimium 的快捷键默认就占了同样的组合键导致两个扩展同时响应页面行为会变得比较混乱。解决办法是把其中一个改成CtrlShift.之类的组合键。沉浸模式还有一点值得提它对文件树一样生效进入沉浸模式之后文件树自动变为浮动状态鼠标移到页面左侧边缘会滑出。我一开始没发现这个交互还以为沉浸模式砍掉了文件树结果是不小心把设置里的“隐藏文件树”选项打开了。所以如果你开了沉浸模式发现文件树不见了先检查设置项不要急着重装。2.4 扩展权限安全说明安装前留意扩展的权限清单。GitHub 增强扩展通常需要读取github.com域名下的页面数据合理也只需要这一个站点权限。如果安装时发现它要求读取所有网站的权限那就要警惕了要么你找的扩展来源不对要么你下载到的是假冒版本。真正的开源项目在 GitHub 仓库里有完整的源码代码量也足够你去审计。我不反对用开源工具但这类能读取你仓库内容的扩展权限边界还是得看一眼。3. Svelte 全栈模板从克隆到部署的完整实操如果你要的是全栈开发模板方向的 superpowers那我建议你把它理解为一套“Supabase 预集成的前端启动包”。它的技术栈是 SvelteKit mdsvex Tailwind Supabase帮你把认证、数据库、存储、Markdown 支持都提前接好了你拿到手就能跑、就能改。3.1 模板安装和依赖安装官方推荐的获取方式是用 degit 拉取仓库快照而不是 git clone。原因是 degit 只下载仓库当前文件内容不带.git历史记录这对于初始化一个新项目更干净。执行命令是npx degit solidjs-community/superpowers my-superpowers-app cd my-superpowers-app npm install这里有个安装细节需要说明因为模板默认使用较新的依赖版本我建议 Node.js 版本保持在 18 以上最好用 LTS 版实测 Node 16 环境安装依赖会报一些引擎不兼容的警告虽然不一定致命但后续启动 dev server 时容易出现 off 的接口调用错误排查起来比较浪费时间。安装结束之后先跑开发服务器验证一下npm run dev如果一切正常你会看到一个 SvelteKit 项目页面顶部有示例导航包含首页、文章列表、登录等入口。这里不用慌模板自带示例内容后续可以删掉或者改成自己的页面。3.2 Supabase 环境变量配置这个模板最核心的外部依赖是 Supabase。你需要在 Supabase 官网创建一个新项目然后拿到 Project URL 和 anon key。这两个值要填到项目根目录的.env.local文件里参考格式如下PUBLIC_SUPABASE_URLhttps://你的项目.supabase.co PUBLIC_SUPABASE_ANON_KEY你的anon_key这里的关键点在于变量名必须带PUBLIC_前缀。SvelteKit 对服务端和客户端环境变量的处理有一条安全边界以PUBLIC_开头的变量会暴露给浏览器端代码而不带这个前缀的变量只在服务端可用。模板里的 Supabase 客户端是运行在浏览器端的所以如果你漏掉PUBLIC_前缀会看到类似supabaseUrl is required的错误。我在第一次跑模板时就踩过这个坑当时以为环境变量没加载检查了一圈才发现是命名问题。配置好环境变量后重启 dev server。你可以打开浏览器开发者工具的 Network 面板刷新页面然后找一个发往 Supabase 域名的请求如果请求头里带了apikey并且请求成功返回说明 Supabase 连接已经建立成功。3.3 认证模块与数据库表的初始化模板里的认证模块支持邮箱密码注册登录页面在/login。你第一次尝试注册账号时大概率会遇到一个问题Supabase 项目默认没开启邮箱验证但新用户注册可能报Email not confirmed。这个需要在 Supabase 管理后台的 Authentication 设置里把 “Confirm email” 关闭或者在邮箱验证开启的状态下去收验证邮件。我个人建议开发阶段直接关闭邮箱验证减少调试干扰上线前再开启并配置 SMTP。数据库表这边模板默认应该有一个profiles表用于存储用户公开信息。但 Supabase 新项目的数据库默认是空的需要你手动执行模板仓库提供的 SQL 建表语句。一般文件会放在supabase/migrations目录或仓库说明里。你可以在 Supabase 后台的 SQL Editor 里直接粘贴执行。SQL 内容通常包含create table public.profiles ( id uuid references auth.users on delete cascade primary key, username text unique, avatar_url text, updated_at timestamp with time zone default timezone(utc::text, now()) ); alter table public.profiles enable row level security; create policy Public profiles are viewable by everyone on public.profiles for select using (true);这段 SQL 建了用户资料表并且启用了行级安全策略RLS。为什么模板要坚持用 RLS这是 Supabase 后端的核心安全机制没有策略的表客户端默认读不到数据这样就能从源头防止未授权访问。如果你嫌这一套麻烦直接关掉 RLS 也能跑通但生产环境千万别这么干等于把数据库裸奔在公网上任何人都能通过 anon key 读全表数据。3.4 文件上传功能的本地化配置模板自带文件上传示例底层是 Supabase Storage。你要在 Supabase 后台创建一个名为avatars或模板指定的名字的存储桶并把桶设置为 public 或者配置对应的访问策略。如果你跳过这步页面里选完文件点击上传会报bucket not found。顺便提一个容易踩的坑Supabase Storage 的 public 桶文件访问 URL 是/object/public/avatars/文件名如果你自定义了存储桶名称记得同步修改src/lib/server/supabase.ts或前端组件里的桶名常量否则前端虽然上传成功但图片无法正常显示。上传接口默认限制单文件大小和类型模板可能没有写得很死你可以自己在 Supabase 后台的存储设置里调整 max file size。我在测试时上传过一个几 MB 的图片默认限制 50MB 其实够用但你如果跑的是自己的项目且上线给用户用建议明确限制为 2MB 或 5MB 并配上图片压缩原因单一省存储费用并且减少恶意上传大文件的风险。3.5 Markdown 博客的 mdsvex 适配细节模板的博客功能用的是 mdsvexMarkdown Svelte 组件。写一篇文章只需要在内容目录下新建.md文件顶部写 YAML frontmatter--- title: 我的第一篇文章 date: 2025-01-01 summary: 这里是摘要 tags: - svelte - supabase ---然后正文正常写 Markdown 就行。mdsvex 会把 frontmatter 里的字段解析成可用数据模板的列表页会读取这些字段来渲染卡片。如果文章不显示优先排查 frontmatter 格式YAML 解析失败会导致整篇文章静默跳过。有个细节我特别想说明在 Markdown 文件里可以直接引用 Svelte 组件这是 mdsvex 相对其他 Markdown 方案的核心优势。比如你可以在文章里插入一个Counter组件用来演示交互效果。但使用时注意 props 传递的语法和 Svelte 文件里完全一致如果你写过 React 的 MDX上手成本几乎为零。我最近写项目文档时就大量用了这个能力把 API 示例直接嵌进 Markdown比贴截图清晰得多。4. Three.js 3D 创作平台本地部署与场景编辑再说说第三个方向——基于 Three.js 的 superpowers 3D 创作平台。如果你在 B 站或油管刷到过用可视化编辑器拖拽 3D 模型的视频那多半就是它了。它的定位是浏览器里的 3D 场景编辑器类似简化版的 Unity 编辑器但完全跑在 Web 技术栈上。4.1 本地部署实践与依赖版本冲突部署方式是从 GitHub 仓库拉代码安装依赖后启动 Web 服务。基本流程git clone https://github.com/superpowers/superpowers.git cd superpowers npm install npm start但我必须提醒这个项目的依赖关系比较旧实测在 Node.js 20 下安装会出现大量 deprecated 警告有一部分依赖包已经不再维护编译时可能直接报错。我当时用 Node 18 LTS 才跑通。如果你执意要在新版本 Node 下折腾可以把package.json里的依赖版本逐个升级但升级后的 API 变更可能需要你改源码代价不小。我的建议是如果只是想体验编辑器本身用 Node 18 老依赖一劳永逸如果你要基于它二次开发那就老老实实花时间升级依赖避免后续叠加安全漏洞。4.2 编辑器界面与核心操作启动后访问http://localhost:8080会看到编辑器和项目列表界面。你可以新建一个项目进入主编辑器。界面布局是典型的左中右三栏左侧是场景树和资源列表中间是三 D 视图右侧是属性面板。底部有动画轨和脚本控制台方便调试交互逻辑。拖入一个立方体到场景后右侧属性面板会展示它的位置、旋转、缩放、材质等属性。这里和通用 3D 工具的习惯一致位置坐标单位是米旋转是欧拉角缩放是倍数。材质方面支持标准材质和基本材质可以调整颜色、粗糙度、金属度等参数。它的核心定位是“Web 场景编排”所以不用指望它能对标 Blender 或者 Maya复杂建模仍然要导外部模型进来格式支持 GLTF、OBJ、FBX 等常见类型。4.3 脚本编辑与发布输出这个平台的亮点之一是内置脚本系统支持直接在浏览器里编写 TypeScript 控制场景。举个例子给立方体添加旋转逻辑可以这么做import { Entity, System, MathUtils } from superpowers/core; class Rotator extends System { update(deltaTime: number) { for (const entity of this.entities) { const transform entity.transform; transform.rotation.y deltaTime * MathUtils.degToRad(45); } } }这段代码的意思是每秒将物体的 Y 轴旋转 45 度deltaTime是帧间隔时间用来保证旋转速度在不同刷新率屏幕上保持一致。写完脚本后保存回到编辑界面运行项目就能看到立方体在持续旋转。如果你想在自定义事件里触发旋转可以通过onEnable、onDisable这些生命周期钩子自行组装。导出部署方面项目可以打包成静态站点发布核心产物是一份 JSON 场景描述 若干脚本模块。它默认的部署流程是生成一个可托管到任意静态服务器上的目录你可以直接扔到 Nginx 或对象存储上。如果需要深度定制比如接自己的后端 API那更适合把这个平台当编辑器用运行时自己选 Three.js 渲染或者继续用它自带的运行时后者更省事。4.4 多人协作能力实测这个平台还支持多人同时编辑同一个项目通过服务端同步场景数据来实现实时协作。团队里有人负责场景搭建、有人写脚本、有人调材质可以同时操作不同部分互相不锁死。我实际测试下来多人同时移动同一个物体时后写入的节点会覆盖先写入的类似多人编辑文档时最后保存者胜出。所以协作时要做好分工避免两个人在同一帧改同一个物体的同一属性。这个功能对小型团队做 Web 3D 项目原型很实用省去了一堆本地环境搭建的时间。5. 安装使用中的常见问题与排查经验梳理一下我在三个方向都踩过、以及社群里高频出现的报错现象直接整理成一个排查速查表你遇到问题先对照这个查大部分情况都能落地解决。5.1 扩展不显示文件树装了 GitHub 增强扩展之后文件树没出现原因优先级从高到低如下页面没刷新扩展注入代码只在页面加载时执行旧页面不会自动更新。解决手动刷新 GitHub 标签页。扩展没有获得 github.com 的访问权限。解决打开扩展详情页确认“站点访问”列表里有 github.com并选择“在所有站点上”或“在点击时”中的允许模式。访问的不是普通仓库页面比如 Gist 或 GitHub Actions 页面文件树只对https://github.com/用户名/仓库名这种格式的仓库详情页生效。浏览器设置了严格的隐私拦截策略。少数隐私插件会拦截内容脚本注入比如某些广告拦截扩展的“严格模式”。可以临时停用它们排除干扰但要确认扩展来源可信才行。5.2 SvelteKit 模板页面白屏npm run dev之后页面完全白屏查看控制台发现报ReferenceError: process is not defined。这种一般是因为依赖里用到了 Node 环境才有的process全局变量而浏览器端没有这个对象。解决思路有两个从根源上升级模板依赖到兼容 SvelteKit 最新约定的版本这个过程比较折腾或者在vite.config.ts里做 shim 处理手动定义process.env的兼容垫片。后者适合救急但不适合作为长期方案因为根本问题还是依赖陈旧。另一个白屏常见原因是.env.local变量缺失导致 Supabase 客户端初始化抛异常页面在最外层渲染时就断了。我的排查习惯是先看控制台红字报错指向哪再逐步注释代码块定位到具体模块。这两个原因导致的报错信息完全不一样一个指向process一个指向supabaseUrl is required不会混淆。5.3 Three.js 平台启动端口占用npm start报端口被占用默认 8080。最简单的解决方法是换一个端口查看项目文档支持的端口参数或者在server.js里把常量改成 8081。但如果你不止一次遇到端口占用而且机器上经常跑多个服务我建议养成为每个固定服务分配独立端口的习惯比如 3D 编辑器固定 8080、开发服务器固定 5173、API 服务固定 3000能少掉很多排查时间。5.4 安装过程提示权限不足在 Linux 或 macOS 上安装依赖时遇见EACCES: permission denied通常是全局目录权限不够导致的。用sudo npm install可以绕过去但不推荐。正确做法是把项目安装到当前用户有完整读写权限的目录或者使用nvm这类 Node 版本管理器重新安装 Node.js把全局目录设置在用户目录下。长期用 sudo 装 npm 包容易攒下一堆 root 归属的文件后续更新直接报权限错属于典型的短期省事、长期遭罪。6. 哪个 superpowers 最适合你给还没有明确方向的读者一个选择建议。你想优化 GitHub 日常浏览体验、快速看代码、跨仓库跳转文件选浏览器扩展这是三个方向里安装成本最低、见效最快的一个。我的建议是不用犹豫直接装不喜欢随时可以卸载不影响系统环境。你想开发一个需要用户系统、数据库和后端的全栈应用而且不想重复造轮子选 SvelteKit Supabase 模板。这个适合你已经有 Svelte 基础或者想顺势学 Svelte 的情况。纯后端或纯前端项目不建议用两边都带反而多余。你想在 Web 上做 3D 场景编辑或展示选 Three.js 平台适合你已经有 3D 基础概念场景、相机、实体、组件再上手。如果你完全零基础建议先补点 Three.js 的基本概念再玩这个编辑器会顺一些。我个人在实际使用中的体会是这三个项目虽然同名但代表的是三种完全不同的提高效率的途径——浏览器端省时间、全栈模板省搭建、场景编辑器省渲染工作。它们没有哪一个是“全能版”的 superpowers选择标准全看你当下在做什么类型的事。如果你只是想先试水从浏览器扩展开始最合适它不会给你的开发环境引入任何额外负担装错拆了也不心疼。 
长河君 · 2026/10/29 8:53:36 · 阅读 1.2k 同名superpowers全解析：GitHub增强扩展、Svelte模板与3D创作平台
GitHub 重度用户应该都遇到过这类烦恼想快速查看仓库文件树、想一键跳转依赖源码、想在 PR 里直接看到代码归属原生界面总差那么点意思。而我今天要聊的 superpowers正好就是冲着这些痛点去的。不过这个名字在开发圈其实指向了三个完全不同的东西——GitHub 增强扩展、Svelte 全栈模板、还有 Three.js 的 3D 创作平台。我印象里大家搜索安装需求最多的是那个给 GitHub 加 buff 的 Chrome 扩展但另外两个也各有各的玩法。这篇文章把我陆续折腾过、实测下来值得说的部分都整理一遍每个方向我都会讲清楚它解决什么问题、怎么安装、怎么配置、坑在哪里。如果你正准备装 superpowers 但被网上的信息绕晕了这篇应该能帮你省不少时间。1. 先搞明白你要的 superpowers 是哪一个很多人在安装 superpowers 的时候栽跟头第一反应是“版本不对”或者“依赖缺失”但真实原因往往是从一开始就把三个同名项目搞混了。虽然它们都叫 superpowers但安装路径、依赖环境、使用场景完全没有交集。1.1 三个同名项目的核心差异先说 GitHub 扩展这个方向。这个项目本质是一个浏览器扩展给 GitHub 的 Web 界面做增强比如文件树、快速复制路径、查看文件大小、跳转 symbol 定义等。它的安装方式是直接在 Chrome 或 Edge 的扩展商店搜索安装不需要 Node.js、不需要命令行、不需要构建步骤装完刷新页面就能看到效果。适合前端工程师、开源维护者、以及需要在 GitHub 上频繁阅读代码的开发者。第二个方向是 SvelteKit Supabase 的全栈开发模板。这个 superpowers 是一整套脚手架代码使用 Sveltemdsvex Tailwind Supabase 构建包含认证、数据库、文件上传、Markdown 博客等功能模块。安装方式是用 degit 克隆仓库然后 npm install。适合做 SaaS 产品原型、个人博客、全栈学习项目的开发者尤其是那些不想从零配 Supabase 集成的效率型选手。第三个是 3D 创作平台由 Three.js 社区的人做的 WebGL 项目编辑器。它和上面两个更没关联了安装方式是基于 Node.js 部署 Web 服务通过浏览器访问并使用编辑器拖拽 3D 场景。这三个项目如果搞混最典型的翻车现场是你想装 GitHub 扩展结果执行了npm create superpowers然后看着一堆 Svelte 报错一脸懵或者你装了扩展以为它会自带模板功能结果 GitHub 页面上完全没有任何变化。1.2 搜索安装热词背后反映的需求类型从“想要安装 superpowers”这个搜索热词来看搜索者大概率是遇到了某个技术帖或视频里提到了这个项目但没记全上下文。所以这篇文章我先给出一个快速自检的方法你只需要想清楚一件事——你打算在哪里使用它。浏览器里的 GitHub 页面要用就选扩展你要写代码跑项目就选 Svelte 模板你想玩 3D 场景编辑就选 Three.js 平台。三个方向解决三类问题不会同时用到。2. GitHub 增强扩展安装和配置全过程我最初接触 superpowers 就是通过 GitHub 扩展这个入口所以这一部分写细一点。它是一个开源浏览器扩展主攻 GitHub 代码阅读体验我实测下来最实用的功能有三个仓库文件树展示、当前页面文件路径快速复制、文件内 symbol 跳转提示。2.1 扩展安装与基础验证安装方式没什么特殊的在 Chrome 应用商店搜索 “Superpowers for GitHub”认准发布者信息匹配官方仓库地址的版本点击添加到 Chrome。Edge 用户可以直接从 Edge 加载 Chrome 扩展地址栏输入edge://extensions打开“允许来自其他应用商店的扩展”开关然后从 Chrome 商店页面安装。装完之后第一次使用需要访问任意一个 GitHub 仓库页面比如https://github.com/vercel/next.js如果看到仓库文件树区域出现了一个可折叠的完整树状结构说明安装成功。有一个细节我特别提醒安装完后必须刷新一次已有的 GitHub 标签页扩展才会注入脚本。很多人装完没反应就开始怀疑是不是被浏览器拦截了其实只是旧页面没刷新。另外如果你用的是 Firefox这个扩展不一定有官方的 Firefox 版本需要看仓库里的说明去加载临时扩展过程相对麻烦一点我个人建议直接用 Chromium 内核的浏览器。2.2 核心功能配置要点安装只是第一步真正提升效率的是配置。以我实际使用下来最顺手的配置为例文件树默认显示在仓库页左侧嫌它占用视口的话可以在扩展设置里把默认折叠改为按需展开。我目前就是默认折叠需要看目录结构时点一下再展开浏览代码时界面更干净。快速复制文件路径这个功能默认绑定在文件树每个节点的右键菜单里也可以开启悬停时显示复制图标。我推荐开启悬停图标模式因为右键菜单多一步操作在频繁切换文件的场景下差距很明显。实测下来悬停复制图标大概能省掉 0.8 秒一次操作一天上百次文件切换积累下来不夸张确实能改善体验。symbol 跳转这里有一个使用前提扩展需要读取当前文件的编程语言语法信息所以只对 GitHub 已经有语言识别支持的文件类型生效。如果你打开的是.txt或者没有语法高亮的文件这个功能不会出现。另外在超大型单文件仓库里比如单个几千行的 JS 文件symbol 列表的加载会有短暂的延迟这是正常现象不用急着刷新页面或者重装扩展。2.3 沉浸模式与快捷键使用心得superpowers 扩展还有一个隐藏玩法是沉浸模式隐藏 GitHub 页面的 header 和侧边栏只保留代码内容区域配合快捷键使用非常接近本地 IDE 的体验。我习惯看长文件的时候开沉浸模式减少页面元素干扰。默认快捷键是CtrlShiftSmacOS 是CmdShiftS可以在扩展设置里自定义。如果你同时安装了多个浏览器扩展注意检查快捷键冲突我在实际使用中发现 Vimium 的快捷键默认就占了同样的组合键导致两个扩展同时响应页面行为会变得比较混乱。解决办法是把其中一个改成CtrlShift.之类的组合键。沉浸模式还有一点值得提它对文件树一样生效进入沉浸模式之后文件树自动变为浮动状态鼠标移到页面左侧边缘会滑出。我一开始没发现这个交互还以为沉浸模式砍掉了文件树结果是不小心把设置里的“隐藏文件树”选项打开了。所以如果你开了沉浸模式发现文件树不见了先检查设置项不要急着重装。2.4 扩展权限安全说明安装前留意扩展的权限清单。GitHub 增强扩展通常需要读取github.com域名下的页面数据合理也只需要这一个站点权限。如果安装时发现它要求读取所有网站的权限那就要警惕了要么你找的扩展来源不对要么你下载到的是假冒版本。真正的开源项目在 GitHub 仓库里有完整的源码代码量也足够你去审计。我不反对用开源工具但这类能读取你仓库内容的扩展权限边界还是得看一眼。3. Svelte 全栈模板从克隆到部署的完整实操如果你要的是全栈开发模板方向的 superpowers那我建议你把它理解为一套“Supabase 预集成的前端启动包”。它的技术栈是 SvelteKit mdsvex Tailwind Supabase帮你把认证、数据库、存储、Markdown 支持都提前接好了你拿到手就能跑、就能改。3.1 模板安装和依赖安装官方推荐的获取方式是用 degit 拉取仓库快照而不是 git clone。原因是 degit 只下载仓库当前文件内容不带.git历史记录这对于初始化一个新项目更干净。执行命令是npx degit solidjs-community/superpowers my-superpowers-app cd my-superpowers-app npm install这里有个安装细节需要说明因为模板默认使用较新的依赖版本我建议 Node.js 版本保持在 18 以上最好用 LTS 版实测 Node 16 环境安装依赖会报一些引擎不兼容的警告虽然不一定致命但后续启动 dev server 时容易出现 off 的接口调用错误排查起来比较浪费时间。安装结束之后先跑开发服务器验证一下npm run dev如果一切正常你会看到一个 SvelteKit 项目页面顶部有示例导航包含首页、文章列表、登录等入口。这里不用慌模板自带示例内容后续可以删掉或者改成自己的页面。3.2 Supabase 环境变量配置这个模板最核心的外部依赖是 Supabase。你需要在 Supabase 官网创建一个新项目然后拿到 Project URL 和 anon key。这两个值要填到项目根目录的.env.local文件里参考格式如下PUBLIC_SUPABASE_URLhttps://你的项目.supabase.co PUBLIC_SUPABASE_ANON_KEY你的anon_key这里的关键点在于变量名必须带PUBLIC_前缀。SvelteKit 对服务端和客户端环境变量的处理有一条安全边界以PUBLIC_开头的变量会暴露给浏览器端代码而不带这个前缀的变量只在服务端可用。模板里的 Supabase 客户端是运行在浏览器端的所以如果你漏掉PUBLIC_前缀会看到类似supabaseUrl is required的错误。我在第一次跑模板时就踩过这个坑当时以为环境变量没加载检查了一圈才发现是命名问题。配置好环境变量后重启 dev server。你可以打开浏览器开发者工具的 Network 面板刷新页面然后找一个发往 Supabase 域名的请求如果请求头里带了apikey并且请求成功返回说明 Supabase 连接已经建立成功。3.3 认证模块与数据库表的初始化模板里的认证模块支持邮箱密码注册登录页面在/login。你第一次尝试注册账号时大概率会遇到一个问题Supabase 项目默认没开启邮箱验证但新用户注册可能报Email not confirmed。这个需要在 Supabase 管理后台的 Authentication 设置里把 “Confirm email” 关闭或者在邮箱验证开启的状态下去收验证邮件。我个人建议开发阶段直接关闭邮箱验证减少调试干扰上线前再开启并配置 SMTP。数据库表这边模板默认应该有一个profiles表用于存储用户公开信息。但 Supabase 新项目的数据库默认是空的需要你手动执行模板仓库提供的 SQL 建表语句。一般文件会放在supabase/migrations目录或仓库说明里。你可以在 Supabase 后台的 SQL Editor 里直接粘贴执行。SQL 内容通常包含create table public.profiles ( id uuid references auth.users on delete cascade primary key, username text unique, avatar_url text, updated_at timestamp with time zone default timezone(utc::text, now()) ); alter table public.profiles enable row level security; create policy Public profiles are viewable by everyone on public.profiles for select using (true);这段 SQL 建了用户资料表并且启用了行级安全策略RLS。为什么模板要坚持用 RLS这是 Supabase 后端的核心安全机制没有策略的表客户端默认读不到数据这样就能从源头防止未授权访问。如果你嫌这一套麻烦直接关掉 RLS 也能跑通但生产环境千万别这么干等于把数据库裸奔在公网上任何人都能通过 anon key 读全表数据。3.4 文件上传功能的本地化配置模板自带文件上传示例底层是 Supabase Storage。你要在 Supabase 后台创建一个名为avatars或模板指定的名字的存储桶并把桶设置为 public 或者配置对应的访问策略。如果你跳过这步页面里选完文件点击上传会报bucket not found。顺便提一个容易踩的坑Supabase Storage 的 public 桶文件访问 URL 是/object/public/avatars/文件名如果你自定义了存储桶名称记得同步修改src/lib/server/supabase.ts或前端组件里的桶名常量否则前端虽然上传成功但图片无法正常显示。上传接口默认限制单文件大小和类型模板可能没有写得很死你可以自己在 Supabase 后台的存储设置里调整 max file size。我在测试时上传过一个几 MB 的图片默认限制 50MB 其实够用但你如果跑的是自己的项目且上线给用户用建议明确限制为 2MB 或 5MB 并配上图片压缩原因单一省存储费用并且减少恶意上传大文件的风险。3.5 Markdown 博客的 mdsvex 适配细节模板的博客功能用的是 mdsvexMarkdown Svelte 组件。写一篇文章只需要在内容目录下新建.md文件顶部写 YAML frontmatter--- title: 我的第一篇文章 date: 2025-01-01 summary: 这里是摘要 tags: - svelte - supabase ---然后正文正常写 Markdown 就行。mdsvex 会把 frontmatter 里的字段解析成可用数据模板的列表页会读取这些字段来渲染卡片。如果文章不显示优先排查 frontmatter 格式YAML 解析失败会导致整篇文章静默跳过。有个细节我特别想说明在 Markdown 文件里可以直接引用 Svelte 组件这是 mdsvex 相对其他 Markdown 方案的核心优势。比如你可以在文章里插入一个Counter组件用来演示交互效果。但使用时注意 props 传递的语法和 Svelte 文件里完全一致如果你写过 React 的 MDX上手成本几乎为零。我最近写项目文档时就大量用了这个能力把 API 示例直接嵌进 Markdown比贴截图清晰得多。4. Three.js 3D 创作平台本地部署与场景编辑再说说第三个方向——基于 Three.js 的 superpowers 3D 创作平台。如果你在 B 站或油管刷到过用可视化编辑器拖拽 3D 模型的视频那多半就是它了。它的定位是浏览器里的 3D 场景编辑器类似简化版的 Unity 编辑器但完全跑在 Web 技术栈上。4.1 本地部署实践与依赖版本冲突部署方式是从 GitHub 仓库拉代码安装依赖后启动 Web 服务。基本流程git clone https://github.com/superpowers/superpowers.git cd superpowers npm install npm start但我必须提醒这个项目的依赖关系比较旧实测在 Node.js 20 下安装会出现大量 deprecated 警告有一部分依赖包已经不再维护编译时可能直接报错。我当时用 Node 18 LTS 才跑通。如果你执意要在新版本 Node 下折腾可以把package.json里的依赖版本逐个升级但升级后的 API 变更可能需要你改源码代价不小。我的建议是如果只是想体验编辑器本身用 Node 18 老依赖一劳永逸如果你要基于它二次开发那就老老实实花时间升级依赖避免后续叠加安全漏洞。4.2 编辑器界面与核心操作启动后访问http://localhost:8080会看到编辑器和项目列表界面。你可以新建一个项目进入主编辑器。界面布局是典型的左中右三栏左侧是场景树和资源列表中间是三 D 视图右侧是属性面板。底部有动画轨和脚本控制台方便调试交互逻辑。拖入一个立方体到场景后右侧属性面板会展示它的位置、旋转、缩放、材质等属性。这里和通用 3D 工具的习惯一致位置坐标单位是米旋转是欧拉角缩放是倍数。材质方面支持标准材质和基本材质可以调整颜色、粗糙度、金属度等参数。它的核心定位是“Web 场景编排”所以不用指望它能对标 Blender 或者 Maya复杂建模仍然要导外部模型进来格式支持 GLTF、OBJ、FBX 等常见类型。4.3 脚本编辑与发布输出这个平台的亮点之一是内置脚本系统支持直接在浏览器里编写 TypeScript 控制场景。举个例子给立方体添加旋转逻辑可以这么做import { Entity, System, MathUtils } from superpowers/core; class Rotator extends System { update(deltaTime: number) { for (const entity of this.entities) { const transform entity.transform; transform.rotation.y deltaTime * MathUtils.degToRad(45); } } }这段代码的意思是每秒将物体的 Y 轴旋转 45 度deltaTime是帧间隔时间用来保证旋转速度在不同刷新率屏幕上保持一致。写完脚本后保存回到编辑界面运行项目就能看到立方体在持续旋转。如果你想在自定义事件里触发旋转可以通过onEnable、onDisable这些生命周期钩子自行组装。导出部署方面项目可以打包成静态站点发布核心产物是一份 JSON 场景描述 若干脚本模块。它默认的部署流程是生成一个可托管到任意静态服务器上的目录你可以直接扔到 Nginx 或对象存储上。如果需要深度定制比如接自己的后端 API那更适合把这个平台当编辑器用运行时自己选 Three.js 渲染或者继续用它自带的运行时后者更省事。4.4 多人协作能力实测这个平台还支持多人同时编辑同一个项目通过服务端同步场景数据来实现实时协作。团队里有人负责场景搭建、有人写脚本、有人调材质可以同时操作不同部分互相不锁死。我实际测试下来多人同时移动同一个物体时后写入的节点会覆盖先写入的类似多人编辑文档时最后保存者胜出。所以协作时要做好分工避免两个人在同一帧改同一个物体的同一属性。这个功能对小型团队做 Web 3D 项目原型很实用省去了一堆本地环境搭建的时间。5. 安装使用中的常见问题与排查经验梳理一下我在三个方向都踩过、以及社群里高频出现的报错现象直接整理成一个排查速查表你遇到问题先对照这个查大部分情况都能落地解决。5.1 扩展不显示文件树装了 GitHub 增强扩展之后文件树没出现原因优先级从高到低如下页面没刷新扩展注入代码只在页面加载时执行旧页面不会自动更新。解决手动刷新 GitHub 标签页。扩展没有获得 github.com 的访问权限。解决打开扩展详情页确认“站点访问”列表里有 github.com并选择“在所有站点上”或“在点击时”中的允许模式。访问的不是普通仓库页面比如 Gist 或 GitHub Actions 页面文件树只对https://github.com/用户名/仓库名这种格式的仓库详情页生效。浏览器设置了严格的隐私拦截策略。少数隐私插件会拦截内容脚本注入比如某些广告拦截扩展的“严格模式”。可以临时停用它们排除干扰但要确认扩展来源可信才行。5.2 SvelteKit 模板页面白屏npm run dev之后页面完全白屏查看控制台发现报ReferenceError: process is not defined。这种一般是因为依赖里用到了 Node 环境才有的process全局变量而浏览器端没有这个对象。解决思路有两个从根源上升级模板依赖到兼容 SvelteKit 最新约定的版本这个过程比较折腾或者在vite.config.ts里做 shim 处理手动定义process.env的兼容垫片。后者适合救急但不适合作为长期方案因为根本问题还是依赖陈旧。另一个白屏常见原因是.env.local变量缺失导致 Supabase 客户端初始化抛异常页面在最外层渲染时就断了。我的排查习惯是先看控制台红字报错指向哪再逐步注释代码块定位到具体模块。这两个原因导致的报错信息完全不一样一个指向process一个指向supabaseUrl is required不会混淆。5.3 Three.js 平台启动端口占用npm start报端口被占用默认 8080。最简单的解决方法是换一个端口查看项目文档支持的端口参数或者在server.js里把常量改成 8081。但如果你不止一次遇到端口占用而且机器上经常跑多个服务我建议养成为每个固定服务分配独立端口的习惯比如 3D 编辑器固定 8080、开发服务器固定 5173、API 服务固定 3000能少掉很多排查时间。5.4 安装过程提示权限不足在 Linux 或 macOS 上安装依赖时遇见EACCES: permission denied通常是全局目录权限不够导致的。用sudo npm install可以绕过去但不推荐。正确做法是把项目安装到当前用户有完整读写权限的目录或者使用nvm这类 Node 版本管理器重新安装 Node.js把全局目录设置在用户目录下。长期用 sudo 装 npm 包容易攒下一堆 root 归属的文件后续更新直接报权限错属于典型的短期省事、长期遭罪。6. 哪个 superpowers 最适合你给还没有明确方向的读者一个选择建议。你想优化 GitHub 日常浏览体验、快速看代码、跨仓库跳转文件选浏览器扩展这是三个方向里安装成本最低、见效最快的一个。我的建议是不用犹豫直接装不喜欢随时可以卸载不影响系统环境。你想开发一个需要用户系统、数据库和后端的全栈应用而且不想重复造轮子选 SvelteKit Supabase 模板。这个适合你已经有 Svelte 基础或者想顺势学 Svelte 的情况。纯后端或纯前端项目不建议用两边都带反而多余。你想在 Web 上做 3D 场景编辑或展示选 Three.js 平台适合你已经有 3D 基础概念场景、相机、实体、组件再上手。如果你完全零基础建议先补点 Three.js 的基本概念再玩这个编辑器会顺一些。我个人在实际使用中的体会是这三个项目虽然同名但代表的是三种完全不同的提高效率的途径——浏览器端省时间、全栈模板省搭建、场景编辑器省渲染工作。它们没有哪一个是“全能版”的 superpowers选择标准全看你当下在做什么类型的事。如果你只是想先试水从浏览器扩展开始最合适它不会给你的开发环境引入任何额外负担装错拆了也不心疼。