圧倒的コントリビューター気分を味わえるgoogle chrome extension 「niwashi」

#やったこと
圧倒的コントリビューター気分が味わえるツールniwashiの開発！

#動機
最近インターンに応募してるとgithubのアカウント求められることが多いのですが、バイトとかでprivateとか自社サーバーのgitlabとか会社独自のバージョン管理システムにばかりプッシュしてるとcontributionはそれはもう虚しく荒野なわけです。

心まで荒れ果てます・・・



・
・
・
・
待てよ？
・
・
・
・
・
・
・



草がないなら生やせばいいじゃない！！！！


contributionの色を逆転させてみました！！！！！！！！！！！！！！！！！


#使い方
* https://github.com/kadotami/niwashi から取ってくる

![スクリーンショット 2015-06-30 1.23.28.png](https://qiita-image-store.s3.amazonaws.com/0/37766/c0c89e5e-4d8e-74a9-f6c5-5e11d52513dc.png)

* 拡張機能にフォルダごとドラッグアンドドロップする(デベロッパーモードにチェック入れるのを忘れずに)
* オプションをクリックすると下記ページが出る![スクリーンショット 2015-06-30 1.27.23.png](https://qiita-image-store.s3.amazonaws.com/0/37766/7a366ebd-bff2-6213-1089-e2ea61909a99.png)

* アカウント名を入れてniwashiになる！！！


#結果
ここに荒野があるじゃろ？ ( ＾ω＾) 
![スクリーンショット 2015-06-30 1.28.31.png](https://qiita-image-store.s3.amazonaws.com/0/37766/9885cf31-7ae7-4678-7655-cd4cada2846b.png)

niwashiになって( ＾ω＾) ≡⊃⊂≡ こうじゃ！

( ＾ω＾)
∪　　　∪
![スクリーンショット 2015-06-29 23.36.33.png](https://qiita-image-store.s3.amazonaws.com/0/37766/ff4d3636-2392-d35a-2da9-255795b12d56.png)


めでたく草が生えたじゃろ？
これでみんな圧倒的コントリビューター気分が味わえるはずじゃ！

深夜テンションで作りました！後悔しかしてない！！！！！！！！！！！！


#やってること
全然大したことやってないけど一応


```json:manifest.json
{
  "name": "niwashi",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "color of github contribution change tool",
  "icons": {
    "128": "niwashi.png"
  },
  "content_scripts": [{
    "matches": ["https://github.com/*"], //githubのページでのみ発火します
    "js": ["script.js"]//発火させるスクリプト
  }],
  "permissions": [
    "https://github.com/*",
    "storage"//内部のストレージ使ってます
  ],
  "content_security_policy": "script-src 'self'; object-src 'self'",
  "options_page": "options.html"//オプションを押した時に表示されるhtmlページの指定
}
```

```js:options.js
function $(id){
  return document.getElementById(id);
}
function save(){
  account_name = $("account_name").value
  if (account_name === '') {
    alert("名無しはダメですよ");
  } else {
    data = {
      "account_name": account_name
    }
    chrome.storage.sync.set(data, function(){});
    cfm = confirm(account_name+"さんでよろしいですか？\nよろしければ早速草を生やしに行きましょう！！");
    if (cfm === true) {
      location.href = "https://github.com/"+account_name;
    } else {
      $("account_name").value = "";
    }
  }
}

window.onload = function(){
  $("save_btn").addEventListener("click", save, false);
};
```

options.jsではアカウント名の登録をしています。
クロームストレージにキーバリューでストアしているだけです。

しかし、ここで詰まった…
chrome extensionではonclickとかonloadとかがセキュリティ的になんか引っかかるからダメらしい

```
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
```

最初options.htmlのボタンにonclickでsave関数呼んでいたのだけれどエラーが出たのでイベントリスナーを追加しました

最後にgithubページ上で動くscript.js

```js:script.js
(function(){
  function $(id){
    return document.getElementById(id);
  }
  var url = location.href;
  var defaults = {
    "account_name": ""
  };

  chrome.storage.sync.get(
    defaults,
    function(items) {
      var account = url.split("/")[3].split("?")[0];
      if (account === items.account_name) {
        var ele = document.createElement("stylくe");
        var str = document.createTextNode('#contributions-calendar rect[fill="#1e6823"] {fill: #eeeeee !important;}\
                                          #contributions-calendar rect[fill="#44a340"] {fill: #d6e685 !important;}\
                                          #contributions-calendar rect[fill="#8cc665"] {fill: #8cc665 !important;}\
                                          #contributions-calendar rect[fill="#d6e685"] {fill: #44a340 !important;}\
                                          #contributions-calendar rect[fill="#eeeeee"] {fill: #1e6823 !important;}\
                                          #contributions-calendar .contrib-legend ul li:first-child {background-color: #1e6823 !important;}\
                                          #contributions-calendar .contrib-legend ul li:nth-child(2){background-color: #44a340 !important;}\
                                          #contributions-calendar .contrib-legend ul li:nth-child(3){background-color: #8cc665 !important;}\
                                          #contributions-calendar .contrib-legend ul li:nth-child(4){background-color: #d6e685 !important;}\
                                          #contributions-calendar .contrib-legend ul li:nth-child(5){background-color: #eeeeee !important;}');
        ele.appendChild(str);
        document.body.appendChild(ele);
      }
    }
  );
})();

```

URLとってパースして、クロームストレージからアカウント名とって一致してるか見るだけです。
CSSはそのまま埋め込んでしまいました。

以上！

追記
less moreも逆転させてるのは仕様です
これに気がついて虚しくなりましょう…

参考
[俺タワーウィジェット（もどき）を作る] (http://unohanat.hatenablog.com/entry/2014/09/28/212348)

[chrome.storageでchrome extension用のデータを保存・取得](http://easyramble.com/chrome-storage-set-and-get.html)