宽乎：用现代技术重构浏览器扩展以提升用户体验

今天，我完成了一个有趣的项目——重新构建了一个名为”宽乎”的浏览器扩展。这是原始”宽乎”扩展的改进版本，允许用户自定义知乎（一个流行的中国问答平台）的布局。

背景

在寻找开源贡献机会时，我在 GitHub 上发现了原始的”宽乎”扩展。该项目没有许可证，这意味着我无法直接贡献或创建衍生作品。但我没有因此气馁，而是将其视为一个使用现代技术构建更好版本的机会。

原始项目

原始的”宽乎”扩展是一个简单但有用的浏览器扩展，它具有以下功能：

• 增加知乎内容区域的宽度
• 允许自定义内容宽度和图片大小
• 在本地存储用户偏好设置
• 注入自定义 CSS 来覆盖知乎的默认样式

我的增强版本

我决定重新构建扩展并进行多项改进：

1. 现代技术栈

• React + TypeScript：提供更好的 UI 开发体验
• Vite：实现更快的构建和开发
• 现代 ES6+ 特性：代码更简洁、更易维护

2. 增强功能

• 可调整的内容宽度（主列）
• 可自定义的侧边栏宽度
• 可配置的主内容和侧边栏之间的间距
• 图片大小控制
• 排版选项（字体大小和行高）
• 动画开关
• 深色模式支持
• 无需刷新页面即可实时预览

3. 更好的架构

• 基于组件的 UI 设计
• 完善的 TypeScript 接口
• 使用 webextension-polyfill 实现跨浏览器兼容性
• 针对不同知乎页面类型的更全面的 CSS 选择器

技术挑战

有趣的挑战之一是确保扩展能够在不同的知乎页面类型（问题页面、文章页面、个人资料页面等）上正常工作，这些页面具有不同的 CSS 类名。我必须仔细分析各种页面类型的 DOM 结构，并创建全面的 CSS 规则。

另一个挑战是跨不同浏览器标签页管理状态。当用户更改设置时，扩展需要使用新样式更新所有打开的知乎标签页，这需要仔细使用 Chrome Extensions API。

主要收获

1. 浏览器扩展架构：理解内容脚本、后台脚本和弹出式 UI 之间的关系
2. CSS 注入技术：使用 CSS 变量实现动态样式
3. 跨浏览器兼容性：使用 webextension-polyfill 获得更广泛的支持
4. 状态管理：在多个标签页和浏览器重启之间处理用户偏好设置

结论

这个项目是将现代 Web 开发实践应用于浏览器扩展的绝佳练习。通过使用 React 和 TypeScript，我能够创建更可维护和可扩展的代码库，同时添加有价值的新功能。

该扩展现在在 GitHub 上提供，并采用适当的 MIT 许可证，鼓励其他人贡献和在此基础上构建。

这个项目也强化了为开源项目选择合适许可证的重要性——原始项目缺乏许可证，导致我无法直接贡献，从而选择了分支而不是协作。