BETA

Chrome拡張で自作CSS/JSを適用

投稿日:2019-02-24
最終更新:2019-02-25

前提

社内で開発する際のデバッグメッセージ、自分だったら(文字色や文字サイズなどが)こういう風なデザインで見たい…なんてことがあり、そのサイトのみデザインを変えることができないかな〜と探した結果発見したのでそちらのメモ。

Google Chrome拡張を利用し、自作のCSSとJsavaScriptを適用させる方法です。

 

準備物

  • 必要なもの
    • manifest.json(設定ファイル)
    • CSS
    • JavaScript

好きな場所に好きな名前のフォルダを作成し、その中に上記のファイルを収納していきます。

 

manifest.json

{  
  "name": "chrome-stylize-design",  //拡張機能名  
  "author": "Tanakashi",  //あなたの名前  
  "description": "chrome extension for customize CSS and JS.",  //説明  
  "version": "1.0.0",  
  "manifest_version": 2,  
  "web_accessible_resources": ["*"],  
  "permissions": ["storage"],  
  "content_scripts": [  
    {  
      "matches": ["http://www.yahoo.co.jp/*"],  
      "css": ["yahoo/style.css"],  
      "js": ["yahoo/script.js"]  
    },  
    {  
      "matches": ["https://www.google.co.jp/*"],  
      "css": ["google/style.css"],  
      "js": ["google/script.js"]  
    }  
  ]  
}

 
詳細な説明はChrome公式サイトにあるけど、手っ取り早く設定したい場合は上記のみでOK。

項目を軽くまとめると、

項目名 説明
name 拡張機能の名前(45文字まで)
description 拡張機能の説明文(132文字まで)
manifest_version とにかく2だそうです(思考停止)。これが有効なバージョンなんだとか。
content_scripts matchesにURLの設定、css,jsにそれぞれファイル名を設定

content_scripts の URLについて、*はワイルドカードを示し、それ以降はどんな値でも構わないという意味になります。その他の詳しい設定方法はこちらを参照。

 

css, jsの準備

yahooとgoogleのフォルダそれぞれに以下のファイルを準備(実際は適用させたいように独自で設定)

style.css

body { background: red; }

script.js

console.log('Hello!');

今回はテストなのでこんな感じで。

 

準備したファイル

こんな感じにファイルが作成されている筈です。

  • chrome-stylize/ (適当なフォルダ名)
    • manifest.json
    • yahoo/
      • style.css
      • script.js
    • google/
      • style.css
      • script.js

これらを以下のようなやり方でGoogle Chromeの拡張機能に追加します。

 

Chromeに追加

  1. Chromeの拡張機能ページchrome://extensions/を開きます。
  2. 右上の「デベロッパーモード」をONにします。
  3. 先ほどまで作成していたフォルダ(例:chrome-stylize)を、この画面にドラッグ&ドロップ

これで追加は完了です!
YahooやGoogleのページに飛ぶと、背景が赤だったりdevツールのコンソールで「Hello!」の文言が確認できるようになったかと思います。


↑無事追加されるとこんな感じで並びます。

※更新はすぐには反映されないので、拡張機能ページで再度読み込む必要があります。
画面中のリロードアイコンをクリックして再読み込みさせましょう!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

web中心のメモ置き場。プログラミングからデザインまで。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!