DevTools UI をカスタマイズする拡張機能を作成する

[アーティクル]
03/29/2023

このチュートリアルでは、独自の DevTools 拡張機能を最初からビルドする方法について説明します。これは、一般的な開発に必要なすべてのものを体験する良い方法です。チュートリアルの最後には、独自のパネルを作成し、DevTools API と対話する作業拡張機能があります。

最初に前提条件を確認します。次に、[ ソリューション ] セクションから最後の拡張機能をダウンロードして実行し、このチュートリアルで構築する内容を確認します。それ以外の場合は、「手順 1 - Basic DevTools 拡張機能を作成する」から開始して、拡張機能をゼロからビルドします。

前提条件

Microsoft Edge Browser を使用して拡張機能を実行します。
チュートリアルに従う Visual Studio Code などのコードエディター。

ソリューション

このセクションでは、このチュートリアルの残りの部分でビルドを教える拡張機能の最終的な状態をダウンロードして実行します。後で、最初から始めて、独自の拡張機能を作成するコードを記述する方法を学習します。

この zip ファイルをダウンロードし、その内容をコンピューター上のフォルダーに抽出して、最終的な拡張コードを取得します。
Microsoft Edge を開き、[ edge://extensions/] に移動します。
[開発者モード] トグルをオンにします。
[ 開梱を読み込む ] をクリックし、zip ファイルを抽出したフォルダーに移動します。このフォルダーで、[ Demos-main>devtools-extension>sample 4] を選択し、[ フォルダーの選択] をクリックします。

Microsoft Edge の [edge://extensions] ページに、[開発者モード] ボタンと [開梱された読み込み] ボタンが表示されます。

DevTools 拡張機能が読み込まれるようになりました。 Microsoft Edge で新しいタブを開き、 F12 キーを押して DevTools を開きます。

拡張機能は、DevTools ウィンドウに [サンプルパネル ] タブを作成します。

Microsoft Edge で、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 拡張機能を作成します。

次のコードを使用して 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 に表示されます。

Microsoft Edge で、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 拡張機能パネルに、使用可能なメモリ容量と合計メモリ容量が表示されます。

メモリ情報を示す DevTools の新しい拡張機能パネル

その他の拡張 API については、「 API リファレンス」ページを参照してください。

手順 4 - 検査された Web ページを操作する

チュートリアルのこの手順では、検査された Web ページと対話するコードを追加します。そのコードでは、次のことが行われます。

Web ページで発生したクリックイベントをリッスンし、DevTools コンソール ツールにログインします。
DevTools 拡張機能パネルでマウスクリック位置を表示します。
ユーザーが DevTools 拡張機能パネルのボタンをクリックしたときに、検査されたページに案内応答アラートを表示します。

この手順のソースコードは、手順 4 のコードにあります。または、次の手順に従って自分で記述します。

残念ながら、先ほど作成した DevTools パネルは、検査された Web ページに直接アクセスする必要がないため、DevTools が開くまで実行されません。このためには、コンテンツスクリプトとバックグラウンドサービスワーカーを使用します。

コンテンツスクリプトは、検査された Web ページのコンテキストで実行され、他のスクリプトがページによって読み込まれるのと同じ方法で、DOM にアクセスでき、変更できます。
バックグラウンドサービスワーカーは、ブラウザーが別のスレッドで実行され、拡張 API にアクセスできるスクリプトです。

次の図は、DevTools ページ、検査済みページ、コンテンツスクリプト、バックグラウンドサービスワーカーが拡張機能にどのように組み合わされているかの概要を示しています。

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!" ] ボタンをクリックします。次に示すように、検査されたページにアラートが表示されます。