【簡単】Chrome拡張機能の作り方

フォルダを作る
manifestファイルを作る
本体を作る
Chromeに追加する
動作を確認する

1. フォルダを作る

デスクトップでも何処でも良いので、フォルダ(ディレクトリ)を一つ作ってください。

フォルダの名前はとりあえず「Chrome拡張」で。

そうすると、以下の感じになります。

C:\Users\<user>\Desktop\
　└ Chrome拡張\

<user>の部分は、自身のユーザ名に置き換えて読んでください。

Cドライブの下の、Usersフォルダの下の、ユーザフォルダの下のデスクトップに、「Chrome拡張」というフォルダがある。ということになります。

2. manifestファイルを作る

先程の「Chrome拡張」フォルダに、manifest.jsonを作成します。

manifest.jsonを作成するには、「新しいテキストドキュメント.txt」を作成し、ファイル名を編集してmanifest.jsonに変更します。

もし「.txt」が表示されていない場合は、以下を参照して拡張子を表示してからファイル名を変更してください。

【入門】ファイル拡張子を表示しよう - 仁和歌ブログ

manifest.jsonが作成できたら、そのファイルをダブルクリックして、内容を編集。

以下の内容をコピーして貼り付けて、保存してください。

{
  "name": "Test",
  "description": "test",
  "version": "0.1.0",
  "content_scripts": [{
    "matches": ["https://mail.google.com/mail/*"],
    "css": ["style.css"]
  }],
  "action": {
    "default_title": "TEST"
  },
  "manifest_version": 3
}

【2022/08/07追記】manifestバージョンを3にしました。どのサイトでも使用するにはcontent_scriptsのmatchesを"matches": ["<all_urls>"],にしてください。

もし、Sublime TextやVisual Studio Codeなどのテキストエディタを使っていたなら、エディタの方で新規ファイル作成し、保存する際にmanifest.jsonというファイル名で保存しても大丈夫です。

現状、以下の感じになっていると思います。

C:\Users\<user>\Desktop\
　└ Chrome拡張\
　　└ manifest.json

3. 本体を作る

拡張機能として実際に機能する本体を用意する必要があります。

今回は画面にCSSを適用するだけの拡張機能にしたいと思います。

CSSはこちらのGmailのツールチップを非表示にするCSSを使用したいと思います。

Gmailの受信トレイでメール一覧にマウスカーソルを合わせると現れるツールチップが鬱陶しいので非表示にしてみた - 仁和歌ブログ

先程の「Chrome拡張」フォルダに、style.cssを作成し、以下をコピーして貼り付けて保存してください。

/* ツールバー非表示 */
ul[role=toolbar]{display:none;}
/* ルールバーに合わせて件名の幅が変更されるスタイルを上書き */
body .Zs .zA:hover>.WA+.yX{max-width:calc(100% - 76px - 110px);}
/* ルールバーに合わせて受信日時の表示が変更されるスタイルを上書き */
body .zA.aqw>.xW{display:flex;}
/* ルールバーに合わせて受信日時の表示が変更されるスタイルと一緒に指定されていたスタイルを上書き */
body .zA.aqw>.yf,body .zA.buL>.xW,body .zA.buL>.yf,body .zA.cP>.xW,body .zA.cP>.yf{display:flex;}

これで、以下のようになっているはずです。

C:\Users\<user>\Desktop\
　└ Chrome拡張\
　　├ manifest.json
　　└ style.css

ここれでChrome 拡張機能としては完成です。

あとはChromeに追加して、動作確認をしてみましょう。

4. Chromeに追加する

自作のChrome 拡張機能を追加する方法は別途記事を用意しているので、そちらを参照してください。

【目次】拡張機能を作ってみないか？【Google Chrome】 - 仁和歌ブログ

5. 動作を確認する

Chrome 拡張機能を入れ、画面を再読込すると以下のように変わります。

【入れる前】

【入れた後】

Chrome 拡張機能を使って、CSSを常に反映させることができました。

おわりに

ちゃんとコードを動かしたいという人の為の記事は別途書こうかなと思っています。