@tanakashiの技術ブログ

前提

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

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!」の文言が確認できるようになったかと思います。


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

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

この記事へのコメント

まだコメントはありません