Facebookを1日1時間しかみれないようにしてみた

年明けのリハビリにChromeのExtension書いてみた。
内容は、タイトルの通り「Facebookを1日1時間以上見れないようにする」もの。

①ExtensionをDLする
ここにあります → http://sorauta.net/files/fbFilter.crx

②おもむろにGoogle Chromeをひらき、アドレスバーに「chrome://extensions」とうちこむ。

こんなページが出てくるはず

③DLしたExtensionをDrag & Dropする

ファイル名は「fbFilter.crx」です。
Dropすると、上記のようなアラートがでるので、Add Extensionをおす

④インストールされたか確認するために、おもむろにfacebookをひらいてみる

SSのとおり、残り時間が表示されていればインストール完了です！
おめでとうございます。

経過秒数後どうなるかって？
それは、やってみてのおたのしみということで~~（特にそんな大したことしてない）~~。

ソースは下記。

manifest.json

{
  "name": "Internet filter",
  "version": "0.1",
  "manifest_version": 2,
  "description": "This Extension is intended to limit the viewing time of Facebook.",
  "icons": {
      "48": "icon128.jpg",
      "128": "icon128.jpg"
  },
  "content_scripts": [{
    "matches": ["https://www.facebook.com/*"],
    "js": ["script.js"]
  }]
}

script.js

var STOP_THRESHOLD = 3600; // 1日あたり、この秒数以上Facebookをみていたら閲覧制限がかかる
var TIMER_INTERVAL = 1000; // loop関数を実行する周期、ミリ秒で表記

var watchTimer;
var fbClosed = false;
var isViewer = false;

/**
 * 初期処理を行う関数
 * 　ページをひらくとまずこの関数が実行されます
 */
var setup = function() {
  console.log('setup fbTiler');

  // ブラウザ上に保存されていたデータを読みだす
  var storedTimestamp = Number(localStorage.getItem("storedTimestamp"));
  // もしブラウザ上にデータが保存されていなかった場合、初期化する
  if (storedTimestamp == null) {
    console.log("initialize local storage");

    var cDate = new Date();
    storedTimestamp = Math.floor(cDate.getTime() / 1000);
    saveToStorage(storedTimestamp, 0);
  }

  // loop関数を定期的に実行するようにセット
  watchTimer = setInterval(loop, TIMER_INTERVAL);

  // 残り時間をFacebook上に表示するようにする
  var mPattern = location.href.match("/messages/([0-9a-z\.\_\-]+)");
  if ((location.pathname == "/" || (mPattern.length > 0 && mPattern[1].length > 0)) &&
      document.title && document.title.length > 0) {
    var element = document.createElement('div');
    element.id = "timeLimitView";
    element.innerHTML = "&nbsp;";
    element.style.position = 'fixed';
    element.style.bottom = '5px';
    element.style.left = '5px';
    document.body.appendChild(element);

    isViewer = true;
  }
}

/**
 * 定期的に実行される関数
 * 　閲覧時間の確認、表示制限の処理などを行う
 */
var loop = function() {
  // タイムスタンプ(long型)を、処理しやすいように連想配列に整形する
  var cDate = new Date();
  var cHash = getDateHash(Math.floor(cDate.getTime() / 1000));
  var storedTimestamp = Number(localStorage.getItem("storedTimestamp"));
  var sHash = getDateHash(storedTimestamp);

  // 日付が更新されたか確認
  var keys = ['Y', 'M', 'D'];
  var isDifferentDate = false;
  for (var i in keys) {
    if (cHash[keys[i]] != sHash[keys[i]]) {
      isDifferentDate = true;
      break;
    }
  }

  // 日付が更新されていた場合、閲覧秒数のカウントをリセット
  if (isDifferentDate == true) {
    cTimestamp = Math.floor(cDate.getTime() / 1000);
    console.log("update stored data", cTimestamp);
    saveToStorage(cTimestamp, 0);
  }
  // 経過時間をチェックする
  else {
    var storedViewSec = Number(localStorage.getItem("storedViewSec"));

    // 閲覧時間が、本日の制限時間を超えていた場合、表示をブロック
    if (storedViewSec > STOP_THRESHOLD) {
      //console.log("shut down facebook");
      document.body.innerHTML = '<center><img src="http://serif.hatelabo.jp/images/cache/2b0a04a1636b501e0ad202e672039491b05690d9/f9d7755e1c8f7abead4c76b1a4c5e2225aba1080.gif" style="margin:10px auto;text-align:center;" /></center>';
      fbClosed = true;
    }
    // 残り時間を更新
    else {
      if (isViewer == true) {
        document.getElementById('timeLimitView').innerHTML = (STOP_THRESHOLD - storedViewSec) + " sec";
      }
      //console.log("only " + (STOP_THRESHOLD - storedViewSec) + " second, you can enjoy facebook");
      saveToStorage(storedTimestamp, storedViewSec + (TIMER_INTERVAL / 1000));

      // TODO: test here
      //if (fbClosed == true) {
      //  location.reload();
      //}
    }
  }
}

/**
 * タイムスタンプを処理しやすいように連想配列に変換する
 */
var getDateHash = function(timestamp) {
  var d = new Date(timestamp * 1000);

  var hash = {
    Y  : d.getFullYear(), // year
    M  : d.getMonth() + 1, // month
    D  : d.getDate(), // date
    h  : d.getHours(), // hour
    m  : d.getMinutes(), // min
    s  : d.getSeconds(), // sec
    t  : Math.floor( d.getTime() / 1000 ), // unix time
  };

  for (var k in hash) {
    if (k != 'Y' && k != 't') {
      hash[k] = ('0' + hash[k]).slice(-2);
    }
  }

  return hash;
}

/**
 * ブラウザ上に現在の閲覧時間などを保存する
 */
var saveToStorage = function(st, sv) {
  localStorage.setItem("storedTimestamp", st); // unix time
  localStorage.setItem("storedViewSec", sv); // sec
}

///////////////////////////////////
// 初期化する関数を実行
setup();

gitにもあげたので、なにか更新があればこちらのリポジトリでやってきます
https://github.com/rin1024/Internet-filter-on-Chrome