Webサイトの見た目を変更するChrome拡張機能

Chromeロゴ

Google ChromeでWebサイトの見た目を変更(カスタマイズ)する拡張機能といえば、StylishStylusStylebotが定番だとは思いますが、よさげな拡張を見つけたのでメモしておきます。

User JavaScript and CSS(サイズ:1.01MiB)

User JavaScript and CSS CRX 1.2.8
Userscript's and userstyle's — simple extension to inject own JavaScript or CSS rules to any page. Features: - Instant execution - Custom libs include - URL masking allows use one script or CSS on many pages

Webサイトごとに、独自のCSS(スタイルシート)だけでなく、独自のJavaScriptも適用(反映、設定)させることができるすぐれものです。

User JavaScript and CSS

上に適用するWebサイトのURL、左にJavaScript、右にスタイルシートを入力する、わかりやすいオプション画面。拡張アイコンのクリックでオンオフ(適用の切り替え)が可能。

例えば、次のように設定すると、YouTubeの余計な項目を消してシンプルに表示できます。

適用するWebサイト:youtube.com

CSS
/* 説明を消す */
ytd-expander {
    display: none !important;
}

/* 好き、嫌いボタンを消す */
ytd-toggle-button-renderer,
#sentiment {
    display: none !important;
}

/* コメントを消す */
#comments {
    display: none !important;
}

ytd-video-secondary-info-renderer {
    border: none !important;
}

/* ライブチャットを消す */
#chat {
    display: none !important;
}

/* サイドバーの関連動画を消す */
#related {
    display: none !important;
}

/* プレイリストを消す */
#playlist {
    display: none !important;
}

/* 自動再生ボタンを消す */
.ytp-promotooltip-content,
.ytp-promotooltip-buttons {
    display: none !important;
}

#spinnerContainer {
    display: none !important;
}

- 追記1 -
User JavaScript and CSSの使いかたの例として、次の記事が参考になるかもしれません。

はてなブログのデザインCSSの編集画面を大きくする
はてなブログのデザインCSSの編集画面は、ウィンドウが狭く文字も小さく使いづらかったのですが、Google Chromeの拡張機能を使って、大きく見やすくしたいと思います。

- 追記2 -
User JavaScript and CSSに全く不満はありませんが、CSSを適用するだけならUser CSSがシンプルで使いやすそうです。

参考になるブログ・Webサイト

ユーザースタイルシートをサイト単位に設定できるChrome拡張…
この手の拡張機能で有名ドコロと云えば、「Stylish」か「Stylebot」である。 しかしながら、「Stylish」はバックアップ機能がない、「Stylebot」は最近挙動がおかしいなど、どちらもイマイチと云ったところである。そこで、同様の機能を持つ他の拡張機能を探して…