やったこと
圧倒的コントリビューター気分が味わえるツールniwashiの開発！
動機
最近インターンに応募してるとgithubのアカウント求められることが多いのですが、バイトとかでprivateとか自社サーバーのgitlabとか会社独自のバージョン管理システムにばかりプッシュしてるとcontributionはそれはもう虚しく荒野なわけです。
心まで荒れ果てます・・・
・
・
・
・
待てよ？
・
・
・
・
・
・
・
草がないなら生やせばいいじゃない！！！！
contributionの色を逆転させてみました！！！！！！！！！！！！！！！！！
使い方
- 拡張機能にフォルダごとドラッグアンドドロップする(デベロッパーモードにチェック入れるのを忘れずに)
オプションをクリックすると下記ページが出る
アカウント名を入れてniwashiになる！！！
結果
ここに荒野があるじゃろ？ ( ＾ω＾)
niwashiになって( ＾ω＾) ≡⊃⊂≡ こうじゃ！
( ＾ω＾)
∪ ∪
めでたく草が生えたじゃろ？
これでみんな圧倒的コントリビューター気分が味わえるはずじゃ！
深夜テンションで作りました！後悔しかしてない！！！！！！！！！！！！
やってること
全然大したことやってないけど一応
{
"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ページの指定
}
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
(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も逆転させてるのは仕様です
これに気がついて虚しくなりましょう…