5.1 開発環境構築

必要なツール

VS Code拡張機能

• Chrome Extension Manifest: manifest.jsonの補完
• ESLint: コード品質チェック
• Prettier: コード整形

拡張機能の読み込み

1. chrome://extensions を開く
2. 「デベロッパーモード」をON
3. 「パッケージ化されていない拡張機能を読み込む」
4. 拡張機能のフォルダを選択

推奨フォルダ構成

my-extension/
├── manifest.json
├── service-worker.js
├── content.js
├── popup/
│   ├── popup.html
│   ├── popup.js
│   └── popup.css
├── options/
│   └── options.html
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png