| title | date |
|---|---|
一键登录校园网插件开发后记 |
2020-09-13 |
在深大，为了登录校园网，一般需要使用 Drcom 或打开对应的登录网页进行登录操作，虽然 Chrome 浏览器已经帮助我们记住了卡号和密码，但一个最简单的登录行为，也需要经过以下八个步骤：
- 新建标签页
- 输入登录网页的网址（不同的连接方式对应的地址还不一样）
- 等待页面加载
- 点击输入框
- 选择 Chrome 帮我们记住的卡号密码
- 点击登录按钮
- 登录成功
- 关闭该标签页
这种体验无疑是很糟糕的，特别是当你的电脑与校园网不是很友好时，可能一天要重连好几次网络。
正好有段时间舍友希望能有一个脚本用来允许通过命令行指令来登录校园网（以在特殊系统环境下使用），于是我简单研究了一下网页登录行为，发现只需一个 post 请求即可，于是 python 写了几行的代码就实现了一个简单的“一键登录脚本”。
不过这个的用途比较狭窄，而且开一个命令行输入指令也需要好几步，为了简化登录步骤，于是又写了一个油猴脚本，可以监听当前打开的网页是否为校园网的登录网页，是的话就自动发起登录请求并在成功后关闭页面。从结果上来说，它帮忙节省了以上步骤中“4~8”的操作，五步完成登录。
近来又是疫情又是实习，不容易得以返校后考完上学期遗留的期末考试，正好得到两天的周末空闲时间。想到自己好久没有写点自己的小玩意了，于是又想到了这个东西。一开始是想写一个全局监测网络状况，未登录/断连后自动重新登录，但感觉不论是使用什么方案都并不容易实现。在和舍友一番讨论之后，决定写一个 Chrome 插件来实现一键登录的功能。以前没接触过 Chrome 扩展插件的编写，正好学习了解一下 😄
如果只是实现最简单的功能，其实很好写，就是提供用户输入信息的界面并使用 localStorage 保存、发送 post 请求模拟登录。Chrome 插件入门也很容易，基本上复用一下之前的模拟请求代码，半天就能搞定。但这周末两天时间闲着也是闲着，于是又操起了老本行，开始思考 UI 界面，添加动画效果。
因为实习基本都是在使用 Vue，忽然想复习一下原生 JS，于是本插件使用的技术栈就是最基础的 HTML+CSS+JS 三大件。开发过程不再详细展开，主要花费的时间大部分都是在动效实现、状态转换以及错误返回结果处理。感受最深的就是 Vue 作为前端框架，确实很多理念都是最佳实践的结果，在原生 JS 要想做到数据响应式、状态管理、DOM 元素控制是比较麻烦的。此外就是再一次认识到“如果写复杂动效尽量都用 JS 来实现”的道理，强行使用 CSS 会变得难以维护，导致写到一半又得花时间去重构成 JS。
入手 Chrome 扩展插件编写，随便参考了一篇挺不错的攻略——《Chrome 插件开发全攻略》配套完整 Demo。
本着能用就行的态度，限制在两天时间内写了不过千行的代码，边写边重构，实现了预期的效果，也算有所收获。后续如果使用的人多的话再进行维护，对该插件感兴趣的同学欢迎 Star，可以直接 PR 👏