記事を検索

初めてChrome拡張機能を開発する人。

コンソールに「Hello World」と表示するだけのシンプルな拡張機能を作る。

※この記事ではChromeウェブストアに公開はせず、ローカルで動かすところまで解説する。

✅「manifest.json」と「main.js」の2ファイルさえあれば拡張機能として動く。

✅コピペするだけでOKなので3分もあれば拡張機能が作れる。

1. 任意の場所に「HelloWorld」という名前のフォルダを作る。

   （フォルダ名は何でもいい）

   

2. このフォルダを「VSCode」や「Cursor」などのエディタで開く。

   

✅まず初めに、必須の設定ファイル「manifest.json」を作る。

1. 「manifest.json」という名前の空のファイルを作る。

   （ファイル名は必ずmanifest.jsonにする）

   

2. 「manifest.json」に以下をコピペする。

   （このまま貼り付けるだけでOK！）

   Copy

   {
     "name": "Hello Worldのテスト用拡張機能！",
     "version": "1.0.0",
     "manifest_version": 3,
     "description": "これはテスト用の拡張機能です。",
     "content_scripts": [{
       "matches": [
         "<all_urls>"
       ],
       "js": [
         "main.js"
       ]
     }]
   }

✅拡張機能の処理を書く場所「main.js」を作る。

1. 「main.json」という名前の空のファイルを作る。

   （先ほどmanifest.jsonで"main.js"というファイル名を指定したので、それに合わせる。）

   

2. 「main.json」に以下をコピペする。

   （このまま貼り付けるだけでOK！）

   Copy

   console.log("Hello World");

   【補足】もう少し本格的な処理も書ける！

   今回はコンソールにHello Worldを表示するだけだが、通常のJavaScriptと同様querySelectorやgetElementByIdなどを使ってDOMを操作することもできる。

   例：bodyタグの背景色を赤色にする。

   Copy

   // ページのbody要素を取得
   const body = document.querySelector("body");
   
   // ページの背景色を変更
   body.style.backgroundColor = "red";

   このコードのまま以降の手順を進めると、最終的に「bodyタグの背景色が赤色になる拡張機能」が作れる。

   

✅自作した拡張機能をChromeに読み込ませる（＝有効化する）。

1. Chromeで拡張機能ページを開く。

   chrome://extensions/

   （アドレスバーに↑をコピペしてEnter）

2. 画面右上の「デベロッパーモード」をオンにする。

   

3. 画面左上の「パッケージ化されていない拡張機能を読み込む」をクリックする。

   

4. HelloWorldフォルダを選択すると、自作の拡張機能が有効になる！

   

   こうなっていたら成功！

   

✅main.jsに書いたプログラムが動いているか確認する。

1. Chromeで任意のページを開く。

   （今回はQiitaを開いた）

   

2. [F12]キーでデベロッパーツールを開き、コンソールを開く。

   →Hello Worldと表示されていれば、正常に自作の拡張機能が動いている！

   （スクリプトエラーが出ているが、これはもともとQiitaのページで発生しているエラー。今回作った拡張機能とは関係ないので無視してOK！）