chromeにて特定のページに指定したcssを適用する

この記事は何

chromeにて特定のページに独自に指定したcssを適用したいので、そのための手順と適用した例を示します。

解決法

手法1: 既存のchrome拡張を使う

いろいろな拡張が存在しますが、stylusを使用します。

---

インストール後、拡張機能をクリック→ [管理]をクリック。

[管理]ボタンの位置.

---

[新スタイルを作成] > 右側に表示されるエディタに独自cssを指定します。

エディタにcssを記述します.

エディタ編集中もリアルタイムでcssがページに適用されるので、 想定したcssが適用されているか確認しながら編集できます。 cssを指定しても反映されない場合は「!important」をつけてください。

Only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css).

引用元：Specificity - CSS: Cascading Style Sheets | MDN

特定のURLでのみ有効になるcssも指定することができます。 特定ドメインやパターンマッチしたurlにのみ独自cssを適用する場合は、拡張機能管理画面の「サイトへのアクセス」に拡張機能が有効になるurlを個別に指定してください。

手法2: 自分で拡張機能を作成しdeveloperモードにて拡張を読み込む

以下を参照してください。

Chrome で開いたページに任意のスタイルシートを適用する - Qiita

また、公式のチュートリアル

では {code: 'document.body.style.backgroundColor = "' + color + '";'}); の箇所で背景色を変えるような拡張を作成しています。

作成した理由

なぜ必要になったかを一応書いておくと、courseraにてページをスクロールした際の動画の位置が

デフォルトの動画の位置

となっていて、できれば右上に大きく表示して欲しい、ということで自分で指定しました。最終的に、

courseraの講義動画の配置箇所

のような表示にできました。

また動画内に字幕表示機能があるのですが、スライドと重なってみにくいことがよくあるので動画外に字幕を表示するように調整しました。

字幕表示の例

作成例1: courseraの動画配置

courseraの動画・ボタン配置・字幕表示位置を上記画像のように修正します。

作成例2: youtubeで関連動画を表示しない

youtubeでやコメント欄の表示を消します、なんかたまにだらだら見てしまうことを避けるために設定してます。