ポップアップインタラクションを備えた Chrome 拡張機能ボイラープレート (マニフェスト V3)

目標

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

新着情報

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

特徴

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

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

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

インストール

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

テスト方法

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

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

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

以上がポップアップインタラクションを備えた Chrome 拡張機能ボイラープレート (マニフェスト V3)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。