folderfront-endlocal_offerChromeweb-design概要PCでいろいろなwebページを見るとき、YouTubeやTwitterのダークモードのように背景を暗くしてみたいと思ったことはありませんか。特定の要素を消したり大きくしたり、フォントを変えるなど、自分独自のCSSを自由にあてたいと思いませんか。これらはChromeの拡張機能を使うことで実現でき、これまではStylishという拡張機能が定番で多くの人に使われていました。先日、Stylishはユーザの閲覧履歴を勝手に収集していた理由から、ChromeのWebストアから削除されました。そこでこの記事では、非公開になったStylishのかわりに、自分で好きなCSSとJSを、好きなWebページに当てる方法を紹介します。ローカル上に拡張機能を作ってしまう方法で、以下のような長所・短所があります。GOOD任意のページに、自分で書いたCSSとJavascriptを読み込むことができるローカルでCSSやJSファイルを管理するので、SASSやTypeScriptなど自分の使い慣れた環境を使い放題ローカルでCSSやJSファイルを管理するので、GitやDropboxなどで管理可能サードパーティのエクステンションに依存してないので、廃止される心配・プライバシーの心配がない。BAD若干導入が面倒くさいChrome間でアカウント同期してくれないStylishのように、他のユーザが作成・公開しているCSSをワンボタン導入はできない。上記のように、デメリットもありますが基本的には自由度が高く、できることが多くなります。それではさっそく手順をみていきましょう。楽にやりたい人はめんどくさいひとむけの手順をご確認ください。(あまりオススメしませんが。JSファイルと、設定ファイルであるmanifest.jsonファイルを置くだけでできあがります。このフォルダをzip圧縮してアップロードすることでストア公開ができますし、ローカルで個人的に使うだけならこのフォルダをchrome://extensions/のページで読み込むだけです。面倒な人用にテンプレートを作っておくので、そちらをダウンロードして改造していただくのがおすすめです。Pagesなど、いろいろできる機能があります。Scriptという機能を利用します。manifest.jsonの作成まず、好きな場所・名前でフォルダを作り、その中にmanifest.jsonファイルを作ります。manifest.jsonファイルの中身は以下のような感じです。]}今回、上記の中で気にしなければいけないのはcontent_scriptsの設定項目です。他は基本的にそのままで大丈夫です。nameやauthorの項目は自由に変えて頂いても構いません。JSを読み込ませたいページを指定します。manifest.json中のcontent_scriptsの部分にURLのパターンを指定しましょう。今回はGoole検索とニコニコ動画の視聴ページを改造してみます。対象となるWEBページのURLパターン、css,jsがそのページに読み込ませるCSS,JSファイルの指定です。*はワイルドカードです。上記の例であれば、https://www.google.co.jp/から始まるURLすべてにマッチングします。CSS,JSファイルを対象ページごとにフォルダ分けして作成しておきましょう。css,jsは複数指定可能です。上記で作成したCSS,JSを記述していきましょう。そのページのHTMLで、どの要素にどんなクラス名が使われているかはDevツールで地道に調べていくしかありません。細かいやり方は後述しますが、とりあえず以下のように/google/style.cssと/google/script.jsを書いてみてください。Chromeに読み込ませるChromeの拡張機能ページを開きます。右上に「デベロッパーモード」のスイッチがあるので、ONにします。先程まで作成していたフォルダを、この画面にドラッグ&ドロップすれば完了です。適当にGoogle検索ページを開いてみてください。背景がグレーになり、Devツールのコンソールでメッセージが確認できるようになったかと思います。これ以降、CSSやJSファイルをさらに変更した場合、更新はすぐには反映されず、拡張機能ページで再読込する必要があります。アイコンをクリックすることで再読込されます。効率よくCSSを書くには上記が基本手順となりますが、やってみるとわかる通り、リアルタイムに結果を見ながらCSSを作成してくのは非常に面倒です。ここでは実際にどのようにCSSやJSファイルを書いていくのがよいか、2通りまとめてみます。DevToolで結果を見ながら作成する地道にそのページで使われているクラスを調べてCSSを書いていく方法です。面倒な上に、初心者には結構厳しいかもしれません。Devツールを開きます。任意のページ上で右クリックし、「検証」を選択するか、⌘⌥I(Mac)・F12(Win)のショートカットでも起動できます。Devツール左上のカーソルアイコンをクリックして、要素選択モードにします。⌘⇧C(Mac)・Ctrl+Shift+C(Win)のショートカットでも起動できます。カーソルでクラス名を調べたい要素をクリックすると、Devツール上で該当要素がハイライト表示されます。ここでクラス名を確認できます。基本的にカスタマイズしたCSSは詳細度の関係から優先されないことが多いです。反映されてない場合は!importantをつけて無理やり優先させてしまうのが簡単です。公開されているスタイルをコピペするこちらが圧倒的に楽ですね。ネット上には有志が作成したユーザースタイルシートがいろいろ公開されています。これをコピペしてしまうのが簡単です。利用の際にはライセンスを確認して、著作権にご注意ください。(ローカルで個人的に使うだけなら大丈夫な場合がほとんどです。)いままでStylihsを使っていた方は、公式サイトでCSSを探すのが楽かもしれません。open_in_newめんどくさいひとむけの手順テンプレートをダウンロードして解答します。manifest.jsonに対象のページと、読み込ませたいCSSを書きます。[詳しく]ネットに公開されているイカすCSSをコピペするか、Devツールを使ってがんばってCSSを書きます。[詳しく]Chromeの拡張機能ページで開発者モードをオンにして、フォルダをD&Dします。cloud_download最小のファイル構成で作成した例です。ダウンロードして解凍後、好きなように改造してください。cloud_downloadNPMに慣れている方はこちらをおすすめします。startするだけです。srcフォルダ内のSCSSファイルとJSファイルが監視されてdocsフォルダにビルドされます。今回触ってみた方はわかると思いますが、Chrome拡張機能はHTML,CSS,JSの知識だけあればかなり簡単に作れます。今回の例の他に、新しいタブにカスタムページを表示する系も簡単に作れて楽しいです。拡張機能の作成に興味を持った方は以下のエントリーが参考になるかもです。良いものが作れたらぜひChromeWebStoreに公開しましょう。NOTES少し古いページですが、ChromeExtensionの情報を全体的に俯瞰して理解するにはよくまとまっているページです。Edgeなどでも使える拡張機能がほぼ同じコードで作れるようです。(Firefoxがこれに対応したせいで、それまでの多くのFirefoxプラグインが使えなり話題になりましたね。