Tampermonkeyを用いたuser scriptの作成

最近AtCoderでuser scriptを用いた自分だけのページを作ろうみたいな流れがあるので試しに簡単なuser scriptを作成してみた。

Chromeを使っているので今回はTampermonkeyというChromeのプラグインを用いる。

https://tampermonkey.net/

新規スクリプトを選択すると次のような初期状態になっている。

// ==UserScript==
// @name       ac-menubar
// @namespace  None
// @version    0.1
// @description  メニューバーを自分のrateに合わせて変更
// @match      https://beta.atcoder.jp/*
// @copyright  2018 ysugiyama
/* load jQuery */
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
// ==/UserScript==

一見してコメントのようだが、ここにuser scriptに必要な情報が含まれている。重要なものをいくつか紹介。

• @name - script名

• @match - どのurlの時にこのscriptを動かすか

• @require - このscriptを実行するのに必要なincludeファイルを書く。pathを書けばローカルファイルも読み込むことができる。

続いて、メインとなる処理をJavascriptで書いていく。
今回実装したものは「AtCoderで自分のレートに合わせてヘッダの色が変化する」というもの。
実装はこんな感じにしてみた。AtCoderのAPIあたりの知識がなかったのでajax使って結構無理やりレートを取得したのでいい方法があれば知りたい。

// ==UserScript==
// @name       ac-menubar
// @namespace  None
// @version    0.1
// @description  メニューバーを自分のrateに合わせて変更
// @match      https://beta.atcoder.jp/*
// @copyright  2018 ysugiyama
/* load jQuery */
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
// ==/UserScript==
jQuery(document).ready(function($) {
    function getElementByXpath(path) {
      return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    }
    var dom = getElementByXpath('//*[@id="navbar-collapse"]/ul[2]/li[2]/a').text.split("(");
    if(dom.length > 0){
        var user_id = dom[0].replace(/[\n	 ]/g, "");
        var user_score = 0;
        $.ajax({
            url: "https://beta.atcoder.jp/users/" + user_id +"/history/json",
            type: 'GET',
            dataType: 'json',
            success: function(info){
                info.forEach(function(e){
                    if(e.IsRated){
                        user_score = e.NewRating;
                    }
                });
                if(user_score < 400){
                    $('.container-fluid').css('background-color', 'gray');
                }else if(user_score < 800){
                    $('.container-fluid').css('background-color', '#a0522d');
                }else if(user_score < 1200){
                    $('.container-fluid').css('background-color', 'green');
                }else if(user_score < 1600){
                    $('.container-fluid').css('background-color', '#afeeee');
                }else if(user_score < 2000){
                    $('.container-fluid').css('background-color', 'blue');
                }else if(user_score < 2400){
                    $('.container-fluid').css('background-color', 'yellow');
                }else if(user_score < 2800){
                    $('.container-fluid').css('background-color', 'orange');
                }else{
                    $('.container-fluid').css('background-color', 'red');
                }
            }
          }
        );
    }
});

過去のレート一覧のページで/json叩くとjsonファイルが取得できるのは初めて知った。
あと、xpathを使ってDOMを選択することも実は初めてだったので勉強になった（前は直接xpathを書いてアクセスする関数があったらしいが廃止されたらしい）。
これを実行するとbeta版のAtCoderのサイトでは下のようにヘッダーの色が変わるようになった。

そろそろ水色になりたいなぁ...