CodeBox：一键解锁技术博客的复制与下载神器

你是否遇到过这些困扰？
🔒 CSDN代码无法直接复制
📱 知乎频繁弹出登录弹窗
⏬ 想保存优质文章却找不到导出按钮
💬 被“关注博主阅读全文”打断思路
这款开源浏览器插件将彻底解决这些问题！

一、CodeBox是什么？

CodeBox是一款轻量级浏览器扩展工具，专为技术学习者、开发者和内容创作者设计。它能自动解除主流技术平台的访问限制，支持一键复制代码、完整下载文章（HTML/Markdown/PDF格式），并智能屏蔽广告弹窗。支持包括CSDN、知乎、掘金、微信等15+技术平台。

核心价值解决这些问题：

1. 解除复制封锁：无需登录即可复制CSDN/51CTO等平台的代码
2. 去除阅读障碍：自动关闭“关注博主阅读全文”提示
3. 内容本地化：一键下载文章为可编辑格式
4. 净化浏览环境：屏蔽登录弹窗和APP跳转提示

二、支持哪些平台？

三、手把手安装指南

方法1：应用商店安装（推荐）

1. 打开浏览器扩展商店：

   • Chrome商店
   • Edge商店
   • Firefox商店
   • 360商店
2. 搜索“codebox”
3. 点击“添加到浏览器”

方法2：公众号获取

1. 扫码关注官方公众号
   
2. 点击底部菜单「软件下载」
3. 获取安装包直接安装

方法3：源码编译（开发者适用）

# 克隆仓库
git clone https://github.com/027xiguapi/code-box.git

# 安装依赖
pnpm install

# 开发模式运行
pnpm dev

# 生产环境打包
pnpm build

加载插件步骤：

1. 浏览器访问 chrome://extensions/
2. 开启「开发者模式」
3. 点击「加载已解压的扩展程序」
4. 选择项目目录中的 dist 文件夹

四、核心功能详解

场景1：CSDN高效学习

✅ **未登录状态实现：**
- 自由选中代码片段
- 点击代码块右上角复制按钮
- 自动展开折叠的代码区域
- 完整显示VIP专享内容

✅ **内容保存方案：**
- 右键菜单选择「下载为HTML」
- 或保存为Markdown便于笔记整理
- 导出PDF格式便于离线阅读

场景2：知乎无障碍阅读

✅ **去除干扰元素：**
- 自动关闭「展开阅读全文」提示
- 屏蔽登录弹窗干扰
- 完整展示文章所有内容

✅ **内容归档操作：**
- 点击插件图标选择导出格式
- 支持同时下载文中所有图片
- 自定义CSS样式优化阅读体验

场景3：微信技术文章保存

✅ **公众号操作方案：**
1. 打开目标推文
2. 点击浏览器右上角CodeBox图标
3. 选择「下载HTML」或「导出PDF」
4. 自动打包所有图片资源

场景4：自定义增强功能

/* 在插件设置中添加自定义CSS */
article {
  font-family: "思源宋体", serif !important;
  line-height: 1.8;
}
pre {
  border-left: 3px solid #42b983;
}

个性化设置路径：插件图标 → 设置按钮 → 自定义样式输入框

五、技术原理揭秘

如何实现免登录复制？

1. DOM重写技术：移除代码区域的user-select: none样式
2. 事件监听解除：禁用阻止复制的JavaScript事件
3. 模拟登录态：注入有效Cookie绕过平台检测

文章下载如何工作？

graph LR
A[识别文章主体] --> B{格式选择}
B -->|HTML| C[清理广告元素]
B -->|Markdown| D[转换HTML标签]
B -->|PDF| E[调用浏览器打印API]
C --> F[嵌入本地资源]
D --> G[优化代码块格式]
E --> H[生成PDF文件]

弹窗屏蔽机制

1. 定时扫描页面元素
2. 识别登录/APP引导弹窗特征
3. 自动触发关闭按钮点击事件
4. 注入CSS隐藏顽固元素

六、用户常见问题解答

Q1：安装后为什么没生效？

1. 检查浏览器扩展管理页面是否已启用CodeBox
2. 刷新目标网页激活插件
3. 在知乎/CSDN等支持网站测试
4. 如仍无效，尝试重新安装插件

Q2：下载的Markdown格式错乱怎么办？

✅ **解决方案：**
- 在设置中开启「增强转换模式」
- 避免下载含复杂表格的文章
- 使用Typora/VSCode等专业编辑器打开

Q3：会泄露我的账号密码吗？

🔒 **安全声明：**
1. 插件**不收集**任何登录凭证
2. 所有操作在浏览器本地完成
3. 开源代码接受社区审计
4. 详细隐私政策见[官方文档](https://027xiguapi.github.io/code-box/privacy-policy.html)

Q4：支持手机浏览器吗？

📱 **移动端适配：**
- 支持Kiwi Browser等可装扩展的安卓浏览器
- iOS需通过Edge/Firefox等商店安装
- 移动端操作方式与PC一致

七、开发者生态

技术栈构成

- 核心框架：Plasmo（浏览器扩展开发框架）
- 构建工具：Vite
- PDF生成：浏览器原生API
- HTML转换：Turndown + 自定义规则

参与贡献指南

1. Fork项目仓库
2. 创建特性分支
3. 提交Pull Request
4. 通过测试用例验证

致谢开源项目

• copy-csdn
• plasmo
• web打印技术实现参考：技术文章

最后提示：在CSDN遇到代码复制限制时，试试选中代码后右键选择「CodeBox快速复制」；阅读微信公众号技术文章时，点击插件图标即可永久保存珍贵资料。技术自由，从此刻开始！

图：多平台操作演示截图