从头开始写一个 Chrome 插件

2017-08-23 本文已影响424人王兵

插件功能

平时对我来说最浪费时间的莫过于刷「知乎」，但是手贱停不下来呀。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.com 、weibo.com之类的，毕竟能刷的又不止知乎。
GMT：时间按东八区的时间来算，主要是为了在每天零点清空数据用的。
MINUTE_PER_DAY：每天有 1440 分钟，不解释。
TIMEPACE：每刷几分钟就给出提醒，这里是每 5 分钟就提醒一次。
NOTIFY_URL、MOBILE_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 看到：
- dingding_robort/chrome_extension
为了看一下效果，我特地刷了半小时的知乎（捂脸）：

WX20170823-151825.png

从头开始写一个 Chrome 插件

插件功能

文件结构

manifest.json

bg.js

猜你喜欢

热点阅读