CSS Injector for VSCode

一个可以向 VSCode 及其衍生产品（Windsurf、Cursor 等）注入自定义 CSS 的扩展。

✨ 功能特性

• 🎨 自定义 CSS 注入 - 向编辑器注入任意 CSS 样式
• 🔄 支持多种编辑器 - VSCode、VSCode Insiders、Windsurf、Cursor 等
• 🎯 多目标注入 - 支持注入到 Workbench、Windsurf Cascade 面板等多个目标
• 📁 外部 CSS 文件支持 - 可以从外部文件加载 CSS
• 💾 自动备份 - 注入前自动备份原始文件
• 🔧 一键恢复 - 轻松移除注入的 CSS
• ⚡ 自动注入 - 可选的启动时自动注入功能
• 🔍 选择性注入 - 可选择特定目标进行注入或移除

📦 安装

从 VSIX 安装

1. 下载 .vsix 文件
2. 打开 VSCode/Windsurf/Cursor
3. 按 Ctrl+Shift+P (Mac: Cmd+Shift+P)
4. 输入 Extensions: Install from VSIX
5. 选择下载的 .vsix 文件

从源码构建

# 克隆仓库
git clone https://github.com/your-username/vscode-css-injector.git
cd vscode-css-injector

# 安装依赖
npm install

# 编译
npm run compile

# 打包
npm run package

🚀 使用方法

基本使用

1. 按 Ctrl+Shift+P (Mac: Cmd+Shift+P) 打开命令面板
2. 输入 CSS Injector 查看可用命令：

单目标命令（仅 Workbench）

• CSS Injector: Inject CSS (Workbench Only) - 注入 CSS 到主界面
• CSS Injector: Remove CSS (Workbench Only) - 从主界面移除 CSS

多目标命令（推荐）

• CSS Injector: Inject CSS to All Targets - 注入 CSS 到所有目标（包括 Windsurf Cascade 面板等）
• CSS Injector: Remove CSS from All Targets - 从所有目标移除 CSS
• CSS Injector: Selective Inject/Remove - 选择性注入/移除（可选择特定目标）
• CSS Injector: Show All Targets Status - 查看所有目标的注入状态

通用命令

• CSS Injector: Edit Custom CSS - 编辑自定义 CSS
• CSS Injector: Show Injection Status - 查看注入状态
• CSS Injector: Reload Window - 重新加载窗口

配置 CSS

方法 1: 通过设置配置

打开设置 (Ctrl+,)，搜索 CSS Injector：

• Custom CSS: 直接输入 CSS 字符串
• CSS File Path: 指定外部 CSS 文件路径
• Auto Inject: 启用启动时自动注入

方法 2: 使用编辑命令

1. 运行 CSS Injector: Edit Custom CSS 命令
2. 在打开的编辑器中编写 CSS
3. 选择"保存并注入"或"仅保存"

CSS 示例

/* 修改编辑器背景 */
.monaco-workbench {
    background-color: #1a1a2e !important;
}

/* 修改侧边栏 */
.sidebar {
    background-color: #16213e !important;
}

/* 修改标签页 */
.tabs-container {
    background-color: #0f3460 !important;
}

/* 添加毛玻璃效果 */
.monaco-workbench .part.sidebar {
    backdrop-filter: blur(10px);
    background-color: rgba(30, 30, 30, 0.8) !important;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5a5a5a;
}

⚠️ 权限问题

由于需要修改编辑器的核心文件，可能需要管理员权限。

macOS

# 修改 VSCode 权限
sudo chown -R $(whoami) "/Applications/Visual Studio Code.app"

# 修改 Windsurf 权限
sudo chown -R $(whoami) "/Applications/Windsurf.app"

# 修改 Cursor 权限
sudo chown -R $(whoami) "/Applications/Cursor.app"

Windows

以管理员身份运行编辑器，或修改安装目录的权限。

Linux

sudo chown -R $(whoami) /usr/share/code

🔧 配置项

📝 注意事项

1. 编辑器更新后需要重新注入 - 编辑器更新会覆盖修改的文件
2. 备份会自动创建 - 首次注入时会创建 workbench.backup.html
3. "已损坏"警告是正常的 - 修改核心文件后，编辑器可能显示警告，这是正常现象
4. 使用 !important - 确保你的样式能覆盖默认样式

🐛 故障排除

CSS 没有生效

1. 确保已重新加载窗口
2. 检查 CSS 语法是否正确
3. 尝试添加 !important

权限被拒绝

参考上面的"权限问题"部分。

编辑器无法启动

1. 找到编辑器安装目录
2. 找到 workbench.backup.html 文件
3. 将其重命名为 workbench.html

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

🙏 致谢

灵感来自 Custom CSS and JS Loader 扩展。