目標

この定型拡張機能は、マニフェスト V3 を使用して独自の Chrome 拡張機能を作成するための開始点を開発者に提供します。

新着情報

このバージョンの最大の改良点は、ポップアップ インターフェイスの追加です。現在、ユーザーがブラウザの上部バーにある拡張機能ボタンをクリックすると、コンソールにメッセージを記録するだけでなく、インタラクティブなポップアップが表示されます。

特徴

この定型文は、3 つの主要な拡張動作を示しています:

1. ページの読み込み前: ページが読み込まれる前に DevTools コンソールにメッセージを出力します。
2. ページの読み込み後: ページが読み込まれる前に DevTools コンソールにメッセージを出力します。
3. ポップアップ インタラクション: ユーザーが拡張機能ボタンをクリックするとポップアップが表示され、より複雑なユーザー インタラクションが可能になります。

この拡張機能では、ポップアップ内にボタンが追加されました。このボタンをクリックすると、アクティブなタブにスクリプトが挿入され、DOM が変更され、メッセージがコンソールに記録されます。

インストール

1. github.com/llagerlof/fresh-chrome-extension からファイルをクローンまたはダウンロードし、ディレクトリに配置します。
2. ブラウザの拡張機能ページを開きます: chrome://extensions
3. 右上隅の「開発者モード」を有効にします。
4. [解凍してロード]をクリックし、拡張機能のディレクトリを選択します。

テスト方法

1. 任意のウェブサイトを開きます。
2. ブラウザの上部バーにある拡張機能ボタンをクリックします。ボタンのあるポップアップが表示されます。
3. 「このボタンをクリックしてオレンジ色の div をページに追加します」というラベルのポップアップ内のボタンをクリックします。
4. 次の変化を観察します。
   • ページの上部にオレンジ色の div が表示され、「DOM が変更されました!」というメッセージが表示されます。
   • 開発者ツール (F12) を開き、コンソールを確認します。 「ポップアップからアクションが実行されました!」というメッセージが表示されます。

この定型文は、より複雑な Chrome 拡張機能を構築するための強固な基盤を提供します。特定のニーズに合わせて自由に変更および拡張してください。

コーディングを楽しんでください!