Chrome ExtensionをVSCodeで開発するための環境構築

環境構築

1. launch.jsonの作成

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Lunch My Chrome Extension",
            "url": "https://XXXXXXXX/XXXXXX",
            "runtimeArgs": ["--load-extension=${workspaceFolder}"],
            "runtimeExecutable": "stable"
        }
    ]
}

• typeは起動設定に使用するデバッカーの種類
  • ほかにも、nodeやphpなどがある
• requestはデバッカーのモード選択
  • ほかにも、attachがある
  • 違いは、launchがアプリをデバックモードで起動する。attachは実行中のプロセスにデバッカーを接続する
• nameは設定名
  • わかりやすい名前を付ける
• urlはブラウザが自動で表示する
• runtimeArgsは実行時の引数
  • --load-extension=${workspaceFolder} が今回Chrome Extensionをデバックする際必要な引数
  • workspaceFolderは現在VsCodeが開いているフォルダー
• runtimeExecutableはここではChromeの絶対Pathを記述する
  • stableはデフォルトを使用する

デバック設定Document
https://code.visualstudio.com/docs/editor/debugging
ブラウザーのデバック設定Document
https://code.visualstudio.com/docs/nodejs/browser-debugging

2. manifest.jsonの作成

{
    "manifest_version": 3,
    "name": "プロジェクト名",
    "version": "1.0.0",
    "description": "説明"
    "content_scripts": [
        {
            "js": [
                "scripts/content.js"
            ],
            "css": [
                "css/styles.css"
            ],
            "matches": [
                "https://XXXXXXXX/XXXXXX/*"
            ]
        }
    ]
}

• VScodeで開いているフォルダーの下に配置する
• manifest_version、name、versionが必ず必要な設定項目
• action、default_locale、description、iconsが推奨させている設定項目
• content_scriptsはmatchesで指定したURLで動作するJsとCssのパスを記述する

manifes.jsonの項目について
　https://developer.chrome.com/docs/extensions/mv3/manifest/

まとめ

• 残りは、content_scriptsで指定したパスにJsとCssを配置して実行したいプログラムを記述する