Google Chromeのデフォルトcssをカスタマイズ！

chrome

chromeでcssをカスタマイズしてみます。
作戦は、以下の2通り

  1. Extensionsを使う：Chrome Stylist https://chrome.google.com/extensions/detail/pabfempgigicdjjlccdgnbmeggkbjdhd
  2. コマンドラインを活用：custom.css + コマンドラインオプション

ではいってみましょう。

Extensionsを使う

Chrome Stylistをインストールします。
https://chrome.google.com/extensions/detail/pabfempgigicdjjlccdgnbmeggkbjdhd

とりあえず最初は、常時表示できるように、設定を変更しましょう。

chrome://extensions/　を開いて、
Chrome Stylistのoptionsをクリック。
iconを常時表示にすれば、いつでも楽ちんに編集できます。

そしたならば、次に適当なサイトを開いて、Chrome Stylistのアイコンをクリック
サイトは、限定したくなければ、http://*とかでOK
そして、編集。
例えば、text field（一行テキストの入力フォーム）のフォントサイズを20pxにするならば、

input[type="text"] {
  font-size: 20px;
}

とかします。設定はお好みで( ´艸｀)
Chrome Stylistのoptionsから他の人が作ったstyleを適用することもできます。
http://userstyles.org/

コマンドラインを活用。

extensionsに頼るもんか！なんて人はどうぞ。（Macを基準に書いていきます。ごめんなさい(´；ω；｀)）

まずは、custom.cssの編集。

vi ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/custom.css

適当に編集します。編集は普通のcssと同じ。

次に、chromeをコマンドラインオプション付きで起動します！

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-user-stylesheet

full pathで実行ファイルを指定して、オプションとして、--enable-user-stylesheetを指定します。

上記のコマンドで実行中のchromeは、custom.cssの編集と同時にcssが反映される！ので操作性抜群です。

AppleScriptにしたいというときは、

do shell script "/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --enable-user-stylesheet"

っていう感じでOK。

enjoy!