自动登录插件:一只前端弱鸡的自我救赎

What's the Problem & Why?

对于一个开发人员来说,切环境是一件比较日常的事情,但是伴随着环境的切换,页面的登录态也会失效,所以就导致要再次输入登录帐号。当然,这件事情还满足以下的逻辑:

    let painValue = 0;  //痛苦值
    if ( me.profession === 'developer' && loginAgain === true) {
        // 如果是程序员并且需要反复登录
        painValue = 100;
        
        if (me.position === 'front-end') {
            // 如果是前端(接触网页最多的工种)
            painValue = Math.pow( painValue, loginTimes);
        }
    }

尤其当你的键盘只有87键的时候,输入一连串数字更是一件考验人耐心的事情。
于是乎,想起自己的 TodoList 上有一项貌似已经存活了很久了——玩玩 chrome 扩展,思考了一下便觉得这个事情有搞头,也算是对自己的一次救赎。

How

所以大致的需求就是,开发一个 Chrome 插件,能够快速登录公司主站,以后就再也不怕切环境啦。
那么问题来了,看样子我需要一个类似于X天玩转Chrome插件开发之类的文档。
不过喜大普奔的是,360前端团队已经翻译了官方的 Chrome extension 开发文档,不得不称赞一句:老哥,稳如狗。

对于日常登录操作的优化,其实可以简单地分为三步:

  • 获取页面信息输入区域
  • 填充内容
  • 点击登录按钮

虽说是一个比较 easy 的功能,但是还是要有一些基本的概念为开发做支撑。在大致看过前面几个小节的介绍之后,大致明白了 chrome 插件其实和普通的网页差不多,只是有一些新的概念需要简单的理解下。

Tips

manifest.json

manifest.json 文件是一个 chrome 插件特有的文件,它定义了有关于当前插件的一些信息,比如:插件名称、描述、图标、版本等(具体还有好多字段,需要的时候去查文档就好了)

Content Scripts

这是一个比较关键的东西。
它的本质是 js,但区分于插件本身的 js,content scripts 是在网页内执行的脚本,它遵循标准的 DOM,可以获取到页面内的 DOM 元素并对其进行修改。但是这一类脚本不能获取到网页本身脚本内的变量和函数,也不能访问插件中定义的变量和函数。
一个不负责任的总结:Content Script 是用来操作页面 DOM 的脚本。

Message API

因为多多少少要做一些交互,心里想象的样子是:用户点击插件中的帐号 -> 信息填充并自动登录,所以需要一次消息传递的过程——插件->content scripts。
经过了一些低成本的实验,得到的结论也是很简单的,只用调用三个接口即可:

  • chrome.tabs.query
  • chrome.tabs.sendMessage
  • chrome.runtime.onMessage

示例:

// popup.js (插件的js)

chrome.tabs.query({
    active: true,
    currentWindow: true
}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, data, callback)
});


// content_script.js
chrome.runtime.onMessage.addEventListener(function(data, sender, sendResponse){
    // ...
});

对于一个自动登录的插件来说,了解这些概念就够用了,接下来可以撸起袖子开干了。

Develop

此处省略1000字 :)

因为一些可笑的规定和策略,放在 Github 的代码里连公司的域名都不能有,所以为了避免不必要的麻烦,拿掉了登录公司主站的部分,增加了 Github 和 Segmentfault 的自动登录,如果你有兴趣的话也可以提PR来增加其他网站,随手 Star 一下就更好了,笔芯。

没有数据支撑的产品都是咸鱼

我们来做一个简单的计算。
你有一个用手机注册的帐号,11位
并且你用了一个非常简单的登录密码,6位
二者相加,一共17位
你的人物设定是一名登录届的老司机,能够快速并精确地输入帐号和密码
经过本人多次实践得出,在右侧的小键盘输入11位手机号码平均需要2.5秒,6位的纯数字登录密码需要1秒
再者,当输入完手机号后需要手动选择密码框后再进行输入,输入完密码后还要再次手动选择登录按钮进行点击操作。但因为你是登录届的老司机,你会熟练的用左手无名指点击 Tab 键进行表单输入项的切换,会用回车键代替鼠标点击按钮,所以这些操作就取个最小值0.5秒吧。

2.5 + 1 + 0.5 = 4 秒

现在你用了 autoLogin 自动登录插件,嗯,当你发现需要输入帐号密码时,可以直接用鼠标点开插件,再点击你需要登录的帐号,登录成功。
经过本人多次测试,这一操作平均耗时2秒,如果你知道如何设置键盘快捷键打开 Chrome 插件,这个过程会更快。

4 - 2 = 2 秒

可能你会觉得这短短的2秒并不能说明什么问题,
我要说的是,
两秒钟可能真的不值一提,
但重要的是,
假如从今往后你都用插件来对付需要手动输入帐号密码的场景,
一次节省两秒,
一百次节省三分钟,
你可以用些时间,
去给你的女神,
倒一杯卡布奇诺,
可能你马上就会成为人生赢家了。

个人公众号:劉凯里(kkkyrieliu)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容