Chrome と Edge 向けの本物のブラウザ拡張機能を構築する
ブラウザ拡張機能を使うと、Web ページを改変したり、ブラウザの動作を自動化したり、ネットワークリクエストをインターセプトしたり、Chrome Web Store と Edge Add-ons マーケットプレイスを通じてカスタムツールをユーザーに直接配布できます。このトラックでは、現在必須のフォーマットである Manifest V3 を、最初の manifest.json からクロスブラウザ配布とプロダクション環境でのセキュリティまで、すべて学びます。すべての概念は、Chrome と Edge が実際に提供している API に基づいています。
学べること
Manifest V3 がパーミッション、Service Worker、コンポーネントライフサイクルをどのように構成するかを学びます。そこから実際の UI をポップアップとオプションページで構築し、ページの DOM を読み書きするコンテンツスクリプトをインジェクトし、コンテキストメニューとオムニボックスのようなブラウザ UI サーフェスにフックします。データの側面では、拡張機能のメッセージング、ストレージ API、広範なホストパーミッションなしで Web リクエストを変更する declarativeNetRequest をマスターします。プログラマティックなブラウザ制御、デバッグとパフォーマンスプロファイリング、セキュリティに重点を置いた高度なパーミッションモデルもカバーします。トラックの最後は、クロスブラウザ互換性技術と、拡張機能のビルドパイプラインへの最新 JavaScript フレームワークの統合です。
学習パス
A1 から C1 までの 12 コースが揃っています。最初のコースは無料で、Manifest V3 の基礎を紹介します。A1〜A2 では、マニフェスト構造とコアパーミッションモデルを確立します。B1 コースは実践的なスキルを習得します。UI 構築、コンテンツスクリプトのインジェクション、ブラウザ UI 統合、Chrome Web Store と Edge マーケットプレイスへの公開です。4 つの B2 コースはさらに深掘ります。メッセージングと永続化、宣言型ネットワークリクエスト変更、ブラウザオートメーション、パフォーマンス最適化を含むデバッグです。最後の 2 つの C1 コースは、高度なパーミッション、セキュリティ強化、そして最新フレームワークの使用に並行した真のクロスブラウザ互換性の実現をカバーします。
学習方法
各コースは短い実践的なレッスンに分かれており、ビルトインエディタで完了できます。リアルタイムフィードバックと、行き詰まったときに利用できる AI チューターがあります。実際の拡張機能コード（マニフェストファイル、バックグラウンド Service Worker、コンテンツスクリプト、オプションページ）を書くので、すべてのレッスンが Chrome または Edge で直接ロードして動作させられる拡張機能を生成します。