twitterをw*rdっぽくするchrome拡張を作ろう

　
クリスマス関係なくてすいません。

初めに

皆さん、職務中にTwiiterを堂々とやりたいと思ったことはありませんか？
或いは上司に見つかるリスクに怯えながら人知れずやっていたりした事はありませんか？

私はないです。
Twitter見る専ですし。

でも実際そう思ってた方は多いんじゃないでしょうか。
実は先日、そんな皆さんにとって衝撃的なニュースが飛び込んできました。

業務中に堂々Twitterしたい！→TwitterをSlack風に表示できるChrome拡張を開発する天才的サボリ

これはすごい。作者さんは天才に違いないですね。
ただ残念な事に、このChrome拡張はまだ一般公開されていないとの事。残念。我々にはやはり職務中にTwitterをやる権利はないのか。
...否、我々はプログラマです。原理が分かればこれと同じようなものを自前で作れるのだ！
というわけで作っていきましょう。

なぜW*rd？

全く同じもの作っても面白くないのと、あとSlackって導入してない会社も有るんじゃないかと思って信頼と安心の某M社製品にしました。某M社から怒られないように表向きはLibreOfficeを参考にしたということにしましょう。(裏向きは2016)

完成イメージ

完成品はこちらにおいて置きますが...自分で作ったということにしておいて下さい。これから作り方教えるので。

制作開始

まず作業用のフォルダを作りましょう。で、配下にtwitterフォルダとimgフォルダを置きます。
そしてmanifest.jsonを置きます。
manifest.jsonには以下みたいな感じで書いて下さい。これでこのディレクトリは拡張機能として認識出来るようになります。

{
    "name": "t2w",
    "author": "gmshiba",
    "description": "Make Twitter's screen look like w*rd.",
    "version": "0.1.0",
    "manifest_version": 2,
    "web_accessible_resources": ["img/*"],
    "permissions": ["storage"],
    "content_scripts": [
        {
            "matches": ["https://twitter.com/*"],
            "css": ["twitter/style.css"],"js": ["twitter/script.js"]
        }
    ]
}

そしたらCSSとJSのファイルをtwitterフォルダに置きます。
基本的には書き換えたい要素のスタイルを検証で探して、それをCSSで上書きしていく形になります。スタイルがかち合う場合は元のスタイルが優先されるようなので!importantをつけましょう。

/* twitter臭がするのでハッシュタグは色なしにしてしまいましょう */
b, s {
    font-weight: bold !important;
    color: #000 !important;
}

問題は既に!importantが付いている要素の書き換えです。これは仕方ないのでJSでDOMごと書き換えてしまいましょう。
jQueryとか引っ張ってきて使うのも面倒なので生のJSのメソッドを使います。

document.head.insertAdjacentHTML('beforeend', '<style>.u-size1of3 { width: initial !important; }</style>');

で、色々書き換えたものがこちら。(途中の書き換えたCSSはgithubにあがってるやつを参考にしてください)

まぁ最初に比べればだいぶそれらしくなりましたが、やっぱりW*ordのナビゲーションバーがないとまだ全然ですね。
でも流石にあれをCSSで作るのはきついのでハリボテの画像を貼り付けましょう。どうせダミーですし。画像などのリソースを使用するにはmanifest.jsonのweb_accessible_resourcesに使用したいリソースを追加すれば良いです。さっきのmanifest.jsonにすでに記述されています。
で、画像を差し込むためのコードです。Chrome専用のAPIを使用します。

var nav = document.querySelector('.global-nav-inner');
nav.insertAdjacentHTML('afterend','<div id="navbar-w"></div>');
var image = document.createElement('img');
image.src = chrome.extension.getURL('img/navbar.png');
image.style.width = '100%';
image.alt = 'navbar';
document.getElementById('navbar-w').appendChild(image);

imgフォルダに画像があればこれで表示されるはずです。
ナビゲーションバーと、あと横のメモリも画像として貼り付けましょう。

これで最初の完成イメージになります。
chrome://extensionsから拡張機能の管理画面に飛んで、デベロッパモードにしてからフォルダを画面にドラッグアンドドロップすると拡張機能として登録できます。
F11で全画面表示にするとさらにそれっぽくなりますよ。
それでは皆さん良きツイ廃ライ...クリスマスを。