DevTools UI をカスタマイズする拡張機能を作成する
このチュートリアルでは、独自の DevTools 拡張機能を最初からビルドする方法について説明します。 これは、一般的な開発に必要なすべてのものを体験する良い方法です。 チュートリアルの最後には、独自のパネルを作成し、DevTools API と対話する作業拡張機能があります。
最初に前提条件を確認します。 次に、[ ソリューション ] セクションから最後の拡張機能をダウンロードして実行し、このチュートリアルで構築する内容を確認します。 それ以外の場合は、「 手順 1 - Basic DevTools 拡張機能を作成 する」から開始して、拡張機能をゼロからビルドします。
前提条件
- Microsoft Edge Browser を使用して拡張機能を実行します。
- チュートリアルに従う Visual Studio Code などのコード エディター。
ソリューション
このセクションでは、このチュートリアルの残りの部分でビルドを教える拡張機能の最終的な状態をダウンロードして実行します。 後で、最初から始めて、独自の拡張機能を作成するコードを記述する方法を学習します。
この zip ファイルをダウンロードし、その内容をコンピューター上のフォルダーに抽出して、最終的な拡張コードを取得します。
Microsoft Edge を開き、[
edge://extensions/
] に移動します。[開発者モード] トグルをオンにします。
[ 開梱を読み込む ] をクリックし、zip ファイルを抽出したフォルダーに移動します。 このフォルダーで、[ Demos-main>devtools-extension>sample 4] を選択し、[ フォルダーの選択] をクリックします。
DevTools 拡張機能が読み込まれるようになりました。 Microsoft Edge で新しいタブを開き、 F12 キーを押して DevTools を開きます。
拡張機能は、DevTools ウィンドウに [サンプル パネル ] タブを作成します。
手順 1 - 基本的な DevTools 拡張機能を作成する
基本的な DevTools 拡張機能は、 手順 1 のコードに示すように、2 つのファイルで構成されます。
マニフェスト ファイル。
{ "name": "DevTools Sample Extension", "description": "A Basic DevTools Extension", "manifest_version": 3, "version": "1.0", "devtools_page": "devtools.html" }
プロパティ 説明 name edge://extensions/
の下に表示される拡張機能の名前。説明 拡張機能の名前の下に表示される拡張機能の説明。 version 拡張機能の名前の横に表示される拡張機能のバージョン。 manifest_version サービス ワーカーやネットワーク要求の変更など、拡張機能が使用する機能のセットを決定します。 現在のバージョンはバージョン 3
です。 このバージョンとバージョン2
との違いの詳細については、「 Manifest V3 に移行するための概要とタイムライン」を参照してください。devtools_page DevTools UI が開かれるたびに実行される HTML ファイルへのパス。 ページは DevTools ではレンダリングされませんが、拡張機能に必要な JavaScript ファイルを読み込むのに使用されます。 マニフェスト ファイル内の
devtools_page
フィールドと一致する html ファイル。<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> A Basic DevTools Extension. </body> </html>
Microsoft Edge で DevTools 拡張機能を読み込んでテストするには、 開発者モードを使用します。
Microsoft Edge で、[
edge://extensions/
] に移動します。[開発者モード] トグルをオンにします。
[ 開梱された読み込み] をクリックし、拡張機能のコードを作成したフォルダーに移動し、[ フォルダーの選択] をクリックします。
DevTools 拡張機能が読み込まれるようになりました。 新しいタブを開き、DevTools (F12) を開きます。
拡張機能は読み込まれますが、拡張機能のパネルを作成していないため、DevTools にはまだ表示されません。
手順 2 - DevTools パネルを追加する
この手順では、DevTools で新しいパネルを作成します。 この手順のコードについては、 手順 2 のコードを参照するか、以下の手順に従って自分で記述します。
パネルは、DevTools のメイン ツール バーのタブで、次に示す [要素]、[コンソール]、[ソース] ツールと同様です。
この手順では、サンプル パネルを含む基本的な DevTools 拡張機能を作成します。
次のコードを使用して
devtools.js
ファイルを作成します。chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => { // code invoked on panel creation });
create
メソッドには、title
、iconpath
、pagePath
、コールバック関数の 4 つのパラメーターが必要です。 パネルのアイコンは必須のパラメーターですが、現在 Microsoft Edge DevTools には表示されないことに注意してください。chrome.devtools.panels
拡張機能 API の詳細については、chrome.devtools.panels API リファレンスを参照してください。ソース コードに
script
要素を追加して、前のdevtools_page
マニフェスト フィールド (devtools.html
ファイル) で指定した HTML ページからファイルを読み込みます。<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <script src="devtools.js"></script> </body> </html>
前の
chrome.devtools.panels.create
メソッド呼び出しで参照したpanel.html
ファイルを作成します。 この Web ページには、拡張機能が DevTools に追加するパネルのユーザー インターフェイスが含まれます。<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <h1>A Basic DevTools Extension with Panel</h1> </body> </html>
Microsoft Edge で変更をテストするには、 edge://extensions/
ページから拡張機能を再読み込みします。
edge://extensions/
ページに移動 (または戻ります)。手順 1 で読み込んだアンパックされた拡張機能エントリを見つけます。
[ 再読み込み] をクリックします。
DevTools 拡張機能を再読み込みする必要があります。 Microsoft Edge で新しいタブを開き、DevTools (F12) を開きます。 DevTools 拡張機能パネルが DevTools に表示されます。
手順 3 - DevTools 拡張機能から拡張機能 API を呼び出す
この手順では、拡張機能 API を使用して、DevTools パネルにメモリ情報を表示します。 これを行うには、マニフェスト ファイル、パネル インターフェイス、および devtools スクリプトの permissions
を更新する必要があります。 この手順のソース コードは、 手順 3 のコードにあります。または、次の手順に従って自分で記述します。
manifest.json
ファイルでpermissions
マニフェスト メンバーを使用します。 このメンバーは、拡張機能がユーザーに必要とするアクセス許可を定義します。 特定の拡張機能 API を使用するには、一部のアクセス許可が必要です。"permissions": [ "system.memory", ]
このチュートリアルの後半で使用する拡張機能 API を使用するには、
system-memory
アクセス許可が必要です。 使用可能な API と関連するアクセス許可の詳細については、 API リファレンスを参照してください。panel.html
ファイルの本文に次を追加して、パネルにデータを表示します。<div> Available Memory Capacity: <span id="availableMemoryCapacity"></span> </div> <div> Total Memory Capacity: <span id="totalMemoryCapacity"></span> </div>
次のコードを使用して、
devtools.js
ファイルを更新します。let availableMemoryCapacity; let totalMemoryCapacity; chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => { // code invoked on panel creation panel.onShown.addListener((extPanelWindow) => { availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity'); totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity'); }); }); setInterval(() => { chrome.system.memory.getInfo((data) => { if (availableMemoryCapacity) { availableMemoryCapacity.innerHTML = data.availableCapacity; } if (totalMemoryCapacity) { totalMemoryCapacity.innerHTML = data.capacity; } }); }, 1000);
上記のコード スニペットでは、次の処理が行われます。
DevTools に新しいパネル
Sample Panel
が作成されます。パネルが表示されると (リスナー
panel.onShown
)、availableMemoryCapacity
要素とtotalMemoryCapacity
要素が DOM から取得されます。次に、パネルが表示された後、1 秒ごとにコードを実行するようにタイマーが設定されます。
タイマーが起動すると、
chrome.system.memory.getInfo
メソッドを使用してデバイスの使用可能なメモリ容量と合計メモリ容量を取得し、これらの値が対応する DOM 要素に表示されます。
Microsoft Edge で変更をテストするには、 edge://extensions/
ページから拡張機能を再読み込みします。
edge://extensions/
ページに移動 (または戻ります)。手順 1 で読み込んだアンパックされた拡張機能エントリを見つけます。
[ 再読み込み] をクリックします。
DevTools 拡張機能を再読み込みする必要があります。 新しいタブを開き、DevTools (F12) を開きます。 DevTools 拡張機能パネルに、使用可能なメモリ容量と合計メモリ容量が表示されます。
その他の拡張 API については、「 API リファレンス」ページを参照してください 。
手順 4 - 検査された Web ページを操作する
チュートリアルのこの手順では、検査された Web ページと対話するコードを追加します。 そのコードでは、次のことが行われます。
- Web ページで発生したクリック イベントをリッスンし、DevTools コンソール ツールにログインします。
- DevTools 拡張機能パネルでマウス クリック位置を表示します。
- ユーザーが DevTools 拡張機能パネルのボタンをクリックしたときに、検査されたページに案内応答アラートを表示します。
この手順のソース コードは、 手順 4 のコードにあります。または、次の手順に従って自分で記述します。
残念ながら、先ほど作成した DevTools パネルは、検査された Web ページに直接アクセスする必要がないため、DevTools が開くまで実行されません。 このためには、コンテンツ スクリプトとバックグラウンド サービス ワーカーを使用します。
- コンテンツ スクリプトは、検査された Web ページのコンテキストで実行され、他のスクリプトがページによって読み込まれるのと同じ方法で、DOM にアクセスでき、変更できます。
- バックグラウンド サービス ワーカーは、ブラウザーが別のスレッドで実行され、拡張 API にアクセスできるスクリプトです。
次の図は、DevTools ページ、検査済みページ、コンテンツ スクリプト、バックグラウンド サービス ワーカーが拡張機能にどのように組み合わされているかの概要を示しています。
チュートリアルのこの部分では、コンテンツ スクリプトを使用してユーザーが Web ページをクリックすることを検出します。 コンテンツ スクリプトは、この情報を、コンソールと DevTools 拡張機能パネルの両方にデータが表示される devtools.js
ファイルに中継します。
manifest.json
ファイルに次を追加します"content_scripts": [{ "matches": [ "http://*/*", "https://*/*" ], "run_at": "document_idle", "js": [ "content_script.js" ] }], "background": { "service_worker": "background.js" }
プロパティ 値 一致 このコンテンツ スクリプトを挿入するページを指定します。 run_at ブラウザーがスクリプトをページに挿入するタイミングを示します。 js 挿入する javascript ファイル。 次の内容を含むファイル
content_script.js
を作成します。document.addEventListener("click", (event) => { chrome.runtime.sendMessage({ click: true, xPosition: event.clientX + document.body.scrollLeft, yPosition: event.clientY + document.body.scrollTop }, response => { console.log("Received response", response); } ); });
上記のコード スニペットは、スクリプトがページに挿入されると、コンソールにメッセージを出力します。 また、クリック イベント リスナーがページに追加され、
chrome.runtime.sendMessage
API を使用して、検査されたページ内のマウス クリック位置を含むメッセージが送信されます。panel.html
ファイルに、sayHello
ボタンとyouClickedOn
ラベル を追加します。 これら 2 つの要素は、検査されたページ、DevTools パネル、およびバックグラウンド サービス ワーカー間の相互作用をデモするために使用されます。 DevTools 拡張機能の [sayHello
] ボタンをクリックすると、検査されたウィンドウにあいさつメッセージが表示されます。 ユーザーが検査されたページ内の任意の場所をクリックすると、DevTools 拡張機能パネルにマウス クリック位置を示すメッセージが表示されます。<button id="sayHello">Say Hello to the inspected page!</button> <h2><span id="youClickedOn"></span></h2>
devtools.js
ファイルで、chrome.runtime.connect
メソッドを使用してバックグラウンド サービス ワーカーへの接続を作成し、backgroundPageConnection.postMessage
メソッドを使用して、検査されたウィンドウtabId
をサービス ワーカーに送信します。 最後に、イベント リスナーを [sayHello
] ボタンに追加し、panel.html
ファイルで定義されているラベルをyouClickedOn
します。let youClickedOn; chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => { // code invoked on panel creation panel.onShown.addListener( (extPanelWindow) => { let sayHello = extPanelWindow.document.querySelector('#sayHello'); youClickedOn = extPanelWindow.document.querySelector('#youClickedOn'); sayHello.addEventListener("click", () => { // show a greeting alert in the inspected page chrome.devtools.inspectedWindow.eval('alert("Hello from the DevTools extension");'); }); }); }); chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { // Messages from content scripts should have sender.tab set if (sender.tab && request.click == true) { console.log('I am here!'); if (youClickedOn) { youClickedOn.innerHTML = `You clicked on position (${request.xPosition}, ${request.yPosition}) in the inspected page.`; } sendResponse({ xPosition: request.xPosition, yPosition: request.yPosition }); } }); // Create a connection to the background service worker const backgroundPageConnection = chrome.runtime.connect({ name: "devtools-page" }); // Relay the tab ID to the background service worker backgroundPageConnection.postMessage({ name: 'init', tabId: chrome.devtools.inspectedWindow.tabId });
ユーザーが [
sayHello
] ボタンをクリックすると、DevTools 拡張機能は、検査されたウィンドウchrome.devtools.inspectedWindow
のeval()
メソッドを呼び出すことによって、検査されたウィンドウでalert("Hello from the DevTools Extension");
のコード スニペットを実行します。ユーザーが検査されたウィンドウ内の任意の場所をクリックすると、DevTools 拡張機能はバックグラウンド サービス ワーカーから、
request.click == true
とマウスの位置情報を含むメッセージを受け取ります。background.js
ファイルを作成し、次のコードを追加します。let id = null; const connections = {}; chrome.runtime.onConnect.addListener(devToolsConnection => { // Assign the listener function to a variable so we can remove it later let devToolsListener = (message, sender, sendResponse) => { if (message.name == "init") { id = message.tabId; connections[id] = devToolsConnection; // Send a message back to DevTools connections[id].postMessage("Connected!"); } }; // Listen to messages sent from the DevTools page devToolsConnection.onMessage.addListener(devToolsListener); devToolsConnection.onDisconnect.addListener(() => { devToolsConnection.onMessage.removeListener(devToolsListener); }); });
上記のコード スニペットは、バックグラウンド サービス ワーカーを DevTools ページに接続します。 DevTools ページが接続し、接続を保存し、応答を DevTools ページに送り返すタイミングをリッスンします。
これは、バックグラウンド サービス ワーカーが DevTools 拡張機能で使用できるようにするデータを収集したり、バックグラウンドでタスクを実行したりする場合に便利です。
新しい [ sayHello
] ボタンをテストするには:
edge://extensions/
に移動します。手順 1 で読み込んだアンパックされた拡張機能エントリを見つけます。
[ 再読み込み ] ボタンをクリックします。
新しいブラウザー タブを開き、DevTools (F12) を開き、[ サンプル パネル ] タブをクリックします。
パネルの [
"Say Hello to The Inspected Page!"
] ボタンをクリックします。 次に示すように、検査されたページにアラートが表示されます。
コンテンツ スクリプトの詳細については、 コンテンツ スクリプトのドキュメントを参照してください。
youClickedOn
ラベルをテストするには:
[ OK] を クリックして、前の手順で開いたアラート ウィンドウを閉じます。
検査されたページ内の任意の場所をクリックします。 A 検査されたページ メッセージの位置 (x,y) をクリック すると、拡張パネルに表示されます。
コンソール ツールを開きます。 前の手順と同様のメッセージが コンソール ツールにも表示されます。