从头开始写一个 Chrome 插件

插件功能

  • 平时对我来说最浪费时间的莫过于刷「知乎」,但是手贱停不下来呀。Chrome 上面装了个 StayFocusd,设定十分钟之后就屏蔽 zhihu 域名。但有时候是真的要上知乎查些东西,每次还得关掉,可一关掉就会「忘记」打开。
  • 我希望能有个人能每隔5分钟就提醒我一次,你今天刷了5分钟了,你今天刷了10分钟了,你今天刷了15分钟了。。。讲真,我觉得这种提醒既温和又有效,当然,也可以变得很不温和,比如把提醒直接发给老板。
  • 本文代码已经放在 github 上了:dingding_robort/chrome_extension

文件结构

  • manifest.json(插件注册 metadata)
  • bg.js(主程序)
  • jquery-3.2.1.min.js(发送 ajax 请求用)

manifest.json

{
  "name": "block zhihu",
  "version": "0.1",
  "description": "Notify dingding every 5 minuntes for browsing zhihu",
  "permissions": [
    "tabs",
    "storage",
    "alarms",
    "idle",
    "https://oapi.dingtalk.com/"
  ],
  "background": {
    "scripts": ["jquery-3.2.1.min.js","bg.js"]
  },
  "manifest_version": 2
}
  • manifest.json:是 chrome 插件必须的一个说明文件,命名也不用改。
  • name、version、description,这些可以随便写。
  • "manifest_version": 2 这个也不用改,是 chrome 的 manifest 文件格式版本。
  • permissions:chrome 插件要调用 chrome 的接口,就需要在这里声明权限,tabs、alarms、idle 都是 chrome API。storage 是 localStorage 存储。下面那个钉钉地址是跨域请求权限。
  • background:这个列表里面的脚本会在后台运行。要知道后台运行的脚本和网页本身的脚本并不在一个进程里,所以直接打开网页审查是看不到这个后台脚本的,如果要调试插件程序的话,要去 extension - inspect views 里面找。如果需要跟网页脚本本身做交互的话,需要增加 content_scripts ​​项。

bg.js

  • 要写这个程序首先需要掌握一些概念:
    • JavaScript:chrome 的插件是由 JavaScript 写的。
    • tabs 行为:这里会用到 chrome tab 的更新(onUpdate)和激活(onActivated)两个行为。也就是 tab 里刷新页面和点击某个 tab。
    • windows 行为:这个程序会用到 windows 焦点状态改变(onFocusChanged)行为。也就是当我切换程序,比如把 chrome 切到后台,把微信切到前台这样的行为。
    • idle 行为:这个程序会用到 idle 的状态变换(onStateChanged)行为,电脑休眠之类的状态。
    • alarms:定时触发某项任务。
    • ajax 请求:发送 get、post 等请求,这里是为了给发送消息给钉钉机器人。
    • localStorge:chrome 的本地储存,可以看做为一个有键值对的字典,值只有 string 一种形式。
  • 程序逻辑结构:
    1. 判断我是不是在去刷知乎了:当一个标签页刷新了 zhihu.com 域名(tab.onUpdate),或者我点到了开着 zhihu.com 的标签页(tab.onActivated),就说明我开始刷知乎了,计时开始。
    2. 判读我刷了多久:当我从 zhihu.com 域名离到别的域名时(tab.onUpdate),或者当我去到别的 tab(tab.onActivated),或者干脆我焦点不在 chrome 上了(windows.onFocusChanged)或者甚至休眠、关机(idle.onStateChanged)算作计时终止。
    3. 发送钉钉请求:如果刷超过一定时间了,直接让钉钉机器人钉你一下。或者也可以简单的使用 alert 在 chrome 上面弹窗。
  • 代码实现:全局常量和初始化本地存储 // 这里其实可以增加更多的域名,比如 youtube.com 、weibo.com之类的,毕竟能刷的又不止知乎。 var track_sites = ["zhihu.com"] // 时间按东八区的时间来算,主要是为了在每天零点清空数据用的。 var GMT = +8 var MINUTE_PER_DAY = 1440 // 每刷几分钟就给出提醒,这里是每 5 分钟就提醒一次。 var TIMEPACE = 5 * 60 //发送钉钉机器人的链接 var NOTIFY_URL = "https://oapi.dingtalk.com/robot/send?access_token=" + "c6d5a2936381dfc29394f3c336bea5fad962d90ffd31809e92d95xxxxxxx" var MOBILE_NUMBER = "176xxxxx619" initLocalStorage(); function initLocalStorage(){ //初始化 localStorage localStorage.clear(); localStorage["is_idle"] = "false"; localStorage["last_site"] = "null"; localStorage["last_time"] = timeNow(); localStorage["total_elapsed_time"] = 0; localStorage["next_alarm_time"] = TIMEPACE; //以每个域名为 key 的每个域名访问了多少时间 //虽然逻辑上并不需要用这个字典,但将来可以扩展成特定的网站每天或者每周给予特定的访问时长。 for (var i in track_sites){ localStorage[track_sites[i]] = JSON.stringify({"elapsed_time": 0}); } } function timeNow(){ // 返回当前时间戳 return Math.round(Date.now()/1000) + GMT * 3600; }
    • track_sites:这里其实可以增加更多的域名,比如 youtube.comweibo.com之类的,毕竟能刷的又不止知乎。
    • GMT:时间按东八区的时间来算,主要是为了在每天零点清空数据用的。
    • MINUTE_PER_DAY:每天有 1440 分钟,不解释。
    • TIMEPACE:每刷几分钟就给出提醒,这里是每 5 分钟就提醒一次。
    • NOTIFY_URLMOBILE_NUMBER:发送钉钉机器人的链接,为什么要用钉钉机器人: http://www.jianshu.com/p/418e4ffbb4e3
    • 强迫症问为什么为什么track_sites这个是小写,其他都是大写?因为(忘记改了,划掉)这个以后做个接口在前台手动增加域名的话,会是个变量。
    • initLocalStorage():清空本地存储,然后增加一些变量,比如 is_idle 电脑是不是在休眠,last_site 上一个访问的站点,total_elapsed_time 总共浪费了多少时间,next_alarm_time 刷到这个时间点就提醒,然后就是以每个域名为 key 的每个域名访问了多少时间的表,虽然逻辑上并不需要用这个字典,但将来可以扩展成特定的网站每天或者每周给予特定的访问时长。
    • timeNow():获取当前时间戳。
  • 代码实现:事件监听 function classifyDomin(domain){ // 检查域名是不是在黑名单里面 var in_list = false; for (var i in track_sites){ if(domain.match(track_sites[i])){ addTimeDelta(track_sites[i]); in_list = true; break } } // 不在黑名单里面的域名作为 null 处理 if(in_list == false){ addTimeDelta("null"); } } function getCurrentTabDomin(){ // 获取当前活跃 tab 的域名 chrome.tabs.query({active: true, lastFocusedWindow: true}, function(tabs){ if (tabs.length == 1){ var url = new URL(tabs[0].url); var domain = url.hostname; classifyDomin(domain); } else if (tabs.length == 0){ addTimeDelta("null"); } else { console.log("奇怪,找到不止一个 tabs active?"); console.log(tabs); } }) } chrome.tabs.onUpdated.addListener(getCurrentTabDomin) chrome.tabs.onActivated.addListener(getCurrentTabDomin) chrome.windows.onFocusChanged.addListener(getCurrentTabDomin) chrome.idle.onStateChanged.addListener(function(idleState){ if (idleState == "active"){ // is_idle 状态记录是为了下面每分钟定时 check 事件,如果 idle 了,就不再 check localStorage["is_idle"] = false; getCurrentTabDomin(); }else{ localStorage["is_idle"] = true; addTimeDelta("null"); } })
    • checkCurrentTab(),获取当前活跃的 tab 的域名,然后去 updateDomin() 去确认这个域名是不是在黑名单里面,然后再去 addTimeDelta()「更新浏览时间」,注:代码中 addTimeDelta() 会在下文实现。
    • tab Update,Activated,还有 windows focus Changed,把checkCurrentTab() 函数绑到这三个事件上。
    • idle.onStateChanged 从电脑休眠中苏醒和恢复时,记录一下 idle 状态,同时如果是从休眠到 active 的状态,等同于 windows focus Changed 事件。
  • 代码实现:更新浏览时间 function updateLocalStorageTime(){ // 更新 localStorage 里的访问时间 var domain = localStorage["last_site"]; var site_log = JSON.parse(localStorage[domain]); timedelta = timeNow() - parseInt(localStorage["last_time"]); site_log["elapsed_time"] = parseInt(site_log["elapsed_time"]) + timedelta; console.log(domain, "elapsed_time: ", site_log["elapsed_time"]); localStorage[domain] = JSON.stringify(site_log); localStorage["total_elapsed_time"] = parseInt(localStorage["total_elapsed_time"]) + timedelta; if(parseInt(localStorage["total_elapsed_time"]) > parseInt(localStorage["next_alarm_time"])){ fireNotification(); } localStorage["last_time"] = timeNow(); } function isElapsedTime(domain){ // 判断刚刚过去的时间段是不是在刷知乎 if(localStorage["last_site"] == "null" && domain != "null"){ localStorage["last_site"] = domain; localStorage["last_time"] = timeNow(); }else if(localStorage["last_site"] != "null"){ updateLocalStorageTime(); localStorage["last_site"] = domain; } }
    • isElapsedTime() 根据上一次事件时正在访问的站点域名,来判断上一段时间是不是在刷知乎。
    • updateLocalStorageTime() 更新一下 localStorage 的各站点访问时间。
  • 代码实现:定时程序 function minLeftMidnight(){ // 距离 0 点还剩下多少分钟,每日清空定时任务 init 时要用 return MINUTE_PER_DAY - Math.round(timeNow()/60) % MINUTE_PER_DAY } chrome.alarms.create("mignight_clear", {delayInMinutes: minLeftMidnight(), periodInMinutes: MINUTE_PER_DAY}); // 每天零点清空 localStorage chrome.alarms.create("minute_check", {periodInMinutes: 1}) // 每分钟检查一下正在浏览的网站,超时发送提醒 chrome.alarms.onAlarm.addListener(function(alarm){ if (alarm.name == "mignight_clear"){ console.log("clear localStorage"); initLocalStorage(); }else if (alarm.name == "minute_check"){ if(localStorage["is_idle"] == true){ console.log("minute_check"); getCurrentTabDomin(); } } })
    • 每天零点触发清空 localStorage 程序
    • 除了特定事件发生会触发检查当前 tab domin 以外,每分钟也触发一次。
  • 代码实现:发送提醒 function notifyDingding(msg){ // 发送 msg 到钉钉提醒 $.ajax({ type: "POST", beforeSend: function(request) { request.setRequestHeader("Content-Type", "application/json; charset=utf-8"); }, url: NOTIFY_URL, data: JSON.stringify({ "msgtype": "text", "text": { "content": msg }, "at": { "atMobiles": [MOBILE_NUMBER] } }), success: function(return_msg){ console.log(return_msg); } }); } function fireNotification(){ // 拼接 msg,弹窗并请求钉钉 let elapsed_time = parseInt(localStorage["next_alarm_time"]) / 60 msg = "今天你已经刷了" + elapsed_time + "分钟知乎了。" console.log(msg); alert(msg); notifyDingding(msg); localStorage["next_alarm_time"] = parseInt(localStorage["next_alarm_time"]) + TIMEPACE; }
    • 钉钉模块跟 python 的差不多,不过是用 ajax 发送的。
    • fireNotification 会直接在浏览器上弹窗提醒,不用钉钉一样能收到。
  • 全部代码可以去 github 看到:
  • 为了看一下效果,我特地刷了半小时的知乎(捂脸):

WX20170823-151825.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

制作WordPress“带Gravatar头像评论”小工具(集成主题中、含选项)

最近在进一步折腾WordPress 主题的开发,在侧边栏小工具那里想做一个可独立于主题的、类似插件的带头像评论小工具。通过WordPress 官方文档与一些资料...

2305
来自专栏DeveWork

制作WordPress“带Gravatar头像评论”小工具(集成主题中、含选项)

最近在进一步折腾WordPress 主题的开发,在侧边栏小工具那里想做一个可独立于主题的、类似插件的带头像评论小工具。通过WordPress 官方文档与一些资料...

2566
来自专栏FreeBuf

Windows小工具:LnkDown快捷方式加载Payload

前言 投稿一次,被小编退了,原因是不够扯。我就是小学没毕业的小学生,你让我扯,我去哪跟你扯的天花乱坠啊,使出洪荒之力我就再扯一次吧。还是要感谢下FREEBUF上...

2097
来自专栏技术翻译

使用Java制作Facebook Messenger机器人的7个简单步骤

我们今天将使用JBot制作Facebook Messenger Bot,因为我们之前使用JBot制作Slack Bot。

4402
来自专栏c#开发者

数据驱动开发For Silverlight WCF RIA1.0 三步曲

数据驱动开发For Silverlight WCF RIA1.0 三步曲 WCF RIA 1.0的正式发布,让Silverlight开发业务应用系统变得更加简...

2754
来自专栏张善友的专栏

WCF 性能基准报告

现在我能找到的关于WCF性能方面的文章主要有几个,一个是微软Connected Frameworks Team的Saurabh Gupta (PM)2007年初...

2069
来自专栏FH云彩

本站使用的WordPress插件

1785
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 集成分享第三方登录功能分享第三方登录模块开发(Android)

在我们常用的App中经常会看到分享与第三方登录的功能,可以说分享与第三方登录已经成为了各大APP的必备功能。对于产品运行与推广来说,分享与第三方登录不仅能加强用...

7487
来自专栏PPV课数据科学社区

Python拉勾爬虫——以深圳地区数据分析师为例

拉勾因其结构化的数据比较多因此过去常常被爬,所以在其多次改版之下变得难爬。不过只要清楚它的原理,依然比较好爬。其机制主要就是AJAX异步加载JSON数据,所以至...

3416
来自专栏FreeBuf

技术剖析:海莲花OceanLotus Encryptor样本分析

前言 上周,360发布了海莲花的报告,数据收集,分析,解释,加工方面很能让人折服,但是看了其对所谓OceanLotus Encryptor样本的分析,和我自己观...

2217

扫码关注云+社区

领取腾讯云代金券