DevTools 拡張機能を作成し、カスタムツールタブとパネルを追加する

[アーティクル]
11/22/2024

この記事では、DevTools でツールタブとパネルを追加する Microsoft Edge 拡張機能のサンプルとコードチュートリアルを提供します。

この記事では、まず、提供された DevTools 拡張機能サンプルをインストールして実行する方法について説明します。これにより、Microsoft Edge 内の DevTools に [サンプルパネル ] ツールタブが追加されます。このサンプルは、独自のパネルを作成し、DevTools API と対話する、動作する DevTools 拡張機能です。

次に、この記事では、必要に応じてそのサンプルをゼロから作成する方法を示すチュートリアルを示し、サンプルを開発する各手順と、追加されたコードのしくみについて説明します。これらのチュートリアル手順は、一般的な開発に必要なすべてのものを体験する良い方法です。

関連項目:

DevTools の概要

DevTools 拡張機能サンプルをダウンロード、インストール、実行する

提供された完成した DevTools 拡張機能サンプルをダウンロード、インストール、実行、テストするには、次の手順を実行します。

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

DevTools 拡張機能が読み込まれます。
Microsoft Edge で、新しいタブを開きます。
DevTools (F12) を開きます。
[サンプルパネル] ツール (タブ) を選択します。

サンプルパネル ツールが開きます。
[検査されたページにHelloを読み上げ] ボタンをクリックします。

検査されたページにアラートが表示されます。
[ OK ] ボタンをクリックしてアラートを閉じます。
検査されたページ内の任意の場所をクリックします。

拡張パネルにメッセージが表示されます。 検査されたページの位置 (199、509) をクリックしました。
コンソールツールを選択 します 。

コンソール ツール:受信応答>{xPosition: 199、yPosition: 509}にメッセージが表示されます。

提供された完成した DevTools 拡張機能サンプルをダウンロード、インストール、実行、テストしました。次の手順では、空のディレクトリから開始して、同じサンプルを作成します。次のセクションでは、コードのしくみについて説明します。

手順 1: DevTools Web ページを含む基本的な Microsoft Edge 拡張機能を作成する

以下の主要な手順ごとにファイルを作成する場合は、 Visual Studio Code などのコードエディターをインストールして、以下のチュートリアル手順に従って、上記のサンプル DevTools 拡張機能を手動で再作成します。 4 つの主要な手順またはフェーズとして示されている、以下のコードチュートリアルを読むことができます。

Microsoft Edge の基本的な拡張機能は、マニフェストファイル (manifest.json) で構成されます。この特定の拡張機能は DevTools を拡張するため、この拡張機能には Web ページファイル devtools.htmlも含まれます。 2 つのファイルは、 Microsoft Edge / Demos リポジトリ >/devtools-extension/sample 1/ ディレクトリで提供されます。ディレクトリには、次のファイルが含まれています。

devtools.html
manifest.json

manifest.json

manifest.json は、キーと値のペアを含むマニフェストファイルです。最上位のキーは メンバーと呼ばれます。

{
    "name": "DevTools Sample Extension",
    "description": "A Basic DevTools Extension",
    "manifest_version": 3,
    "version": "1.0",
    "devtools_page": "devtools.html"
}

メンバー	説明
`name`	`edge://extensions/`の下に表示される拡張機能の名前。
`description`	拡張機能の名前の下に表示される拡張機能の説明。
`version`	拡張機能の名前の横に表示される拡張機能のバージョン。
`manifest_version`	サービスワーカーやネットワーク要求の変更など、拡張機能が使用する機能のセットを決定します。現在のバージョンはバージョン `3`です。このバージョンとバージョン `2`との違いの詳細については、「 Manifest V3 に移行するための概要とタイムライン」を参照してください。
`devtools_page`	DevTools が開かれるたびに実行され、拡張機能の JavaScript ファイルが読み込まれる HTML ファイルへのパス。このページは DevTools ではレンダリングされません。

devtools.html

devtools.html は、マニフェストファイル内の devtools_page メンバーと一致します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    A Basic DevTools Extension.
  </body>
</html>

後の手順では、上記のファイルに <script> 要素を追加して、JavaScript ファイルを読み込みます。この HTML ファイルは DevTools には表示されません。

基本的な Microsoft Edge 拡張機能をインストールしてテストする

Edge 拡張機能をローカルで読み込んでテストすることは、拡張機能をユーザーに配布するのではなく、 拡張機能のサイドローディング と呼ばれることもあります。

Microsoft Edge で基本的な拡張機能をローカルで読み込んでテストするには:

Microsoft Edge で、[ edge://extensions/] に移動します。
[開発者モード] トグルをオンにします。
[ 開梱を読み込む] をクリックし、拡張機能のコードを作成したフォルダーに移動し、[ フォルダーの選択 ] ボタンをクリックします。

DevTools 拡張機能が読み込まれます。
新しいタブを開きます。
DevTools (F12) を開きます。

拡張機能は読み込まれますが、拡張機能のパネルを作成していないため、DevTools にはまだ表示されません。

関連項目:

拡張機能をサイドロードしてローカルにインストールしてテストする

手順 2: DevTools にカスタムツールを追加する

この手順では、DevTools で新しいパネル (ツールタブ) を作成します。以下のどちらかの方法で実行できます。

Microsoft Edge / Demos リポジトリの >/devtools-extension/sample 2/ ディレクトリからコードをコピーして貼り付けます。そのディレクトリには、次のファイルが含まれています。
- devtools.html
- devtools.js - 手順 2 で追加しました。
- manifest.json
- panel.html - 手順 2 で追加しました。
次のコード一覧からコードをコピーして貼り付けます。

パネルは、DevTools のメインツールバーのツールタブで、次に示す [要素]、[コンソール]、[ソース] ツールと同様です。

DevTools パネルとサイドバー

サンプルパネルを使用して基本的な DevTools 拡張機能を作成するには:

devtools.jsという名前のファイルを作成します。

次のコードをコピーして devtools.jsに貼り付けます。

chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
    // code invoked on panel creation
});

create メソッドには、次のシグネチャがあります。

chrome.devtools.panels.create(
    title: string, // Tool tab's label in Activity bar.
    iconPath: string, // Icon to display in tool's tab.
    pagePath: string, // Webpage to display in tool's panel.
    callback: function // Code to run when tool is opened.
)

参考：

chrome.devtools.panels
- create()

devtools.html:

devtools.htmlという名前のファイルを作成します。
次のコードをコピーして devtools.htmlに貼り付けます。
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script src="devtools.js"></script>
  </body>
</html>
```
マニフェストファイル (manifest.json) で、 devtools_page フィールドは上記のファイル (devtools.html) を指定します。 devtools.html上記のには、devtools.jsを読み込む<script>要素が含まれています。

panel.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>
```

DevTools 拡張機能を再読み込みしてテストする

Microsoft Edge で変更をテストするには、 edge://extensions/ ページから拡張機能を再読み込みします。

edge://extensions/に移動します。
独自のコードを記述する前にインストールした DevTools 拡張機能サンプルの横にある [ 再読み込み] をクリックします。

DevTools 拡張機能が再読み込みされ、ダウンロードしたサンプルではなく、上記で作成したファイルが使用されるようになりました。
Microsoft Edge で新しいタブを開きます。
DevTools (F12) を開きます。
アクティビティバーで、[サンプルパネル] ツール (タブ) を選択します。

手順 3: 拡張 API を呼び出してメモリ情報を表示する

この手順では、拡張機能 API を使用して、DevTools パネルにメモリ情報を表示します。これを行うには、マニフェストファイル、パネルインターフェイス、および devtools スクリプトの permissions を更新する必要があります。この手順のソースコードファイルは、 Microsoft Edge / Demos リポジトリ >/devtools-extension/sample 3/ ディレクトリからコピーするか、次の手順に従って自分でファイルを作成できます。ディレクトリには、次のファイルが含まれています。

devtools.html
devtools.js - 手順 3 で更新しました。
manifest.json - 手順 3 で更新しました。
panel.html - 手順 3 で更新しました。

manifest.json ファイルで permissions マニフェストメンバーを使用します。このメンバーは、拡張機能がユーザーに必要とするアクセス許可を定義します。特定の拡張機能 API を使用するには、一部のアクセス許可が必要です。
```
"permissions": [
  "system.memory",
]
```
このチュートリアルの後半で使用する拡張 API を使用するには、 system-memory アクセス許可が必要です。使用可能な API と関連するアクセス許可の詳細については、「拡張 API の API リファレンス」を参照してください。

panel.html:

panel.html ファイルの本文に次を追加して、パネルにデータを表示します。

<div>
  Available Memory Capacity: <span id="availableMemoryCapacity"></span>
</div>
<div>
  Total Memory Capacity: <span id="totalMemoryCapacity"></span>
</div>

devtools.js:

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

DevTools 拡張機能を再読み込みしてテストする

Microsoft Edge で変更をテストするには、 edge://extensions/ ページから拡張機能を再読み込みします。

edge://extensions/に移動します。
DevTools 拡張機能の横にある [ 再読み込み] をクリックします。

DevTools 拡張機能が再読み込みされます。
新しいタブを開きます。
DevTools (F12) を開きます。
[サンプルパネル] ツールを選択します。

DevTools 拡張機能には、使用可能なメモリ容量と合計メモリ容量が表示されます。

関連項目:

API リファレンス

手順 4: Web ページと DevTools の間で対話する

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

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

この手順の最終結果であるファイルは、 Microsoft Edge / Demos リポジトリ >/devtools-extension/sample 4/ ディレクトリからコピーするか、次の手順に従って自分でファイルを作成できます。ディレクトリには、次のファイルが含まれています。

background.js - 手順 4 で追加しました。
content_script.js - 手順 4 で追加しました。
devtools.html
devtools.js - 手順 4 で更新されました。
manifest.json - 手順 4 で更新されました。
panel.html - 手順 4 で更新されました。

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

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

DevTools ページ、検査済みページ、コンテンツスクリプト、バックグラウンドサービスワーカーは、拡張機能にまとめられます。

DevTools 拡張機能の構造を示す図

チュートリアルのこの部分では、コンテンツスクリプトを使用してユーザーが Web ページをクリックした場合を検出します。コンテンツスクリプトは、この情報を devtools.js ファイルに中継します。ここで、データはコンソールと DevTools 拡張機能パネルの両方に表示されます。

manifest.json ファイルに次のコードを追加します。

"content_scripts": [{
  "matches": [
    "http://*/*",
    "https://*/*"
  ],
  "run_at": "document_idle",
  "js": [
    "content_script.js"
  ]
}],
"background": {
    "service_worker": "background.js"
}

キー	値
`matches`	このコンテンツスクリプトを挿入するページを指定します。
`run_at`	ブラウザーがスクリプトをページに挿入するタイミングを示します。
`js`	挿入する javascript ファイル。

content_script.js:

content_script.jsという名前のファイルを作成します。
次のコードをコピーして 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:
panel.html ファイルに、次のように、sayHello ボタンとyouClickedOn ラベルを追加します。
```
<button id="sayHello">Say Hello to the inspected page!</button>
<h2><span id="youClickedOn"></span></h2>
```
上記の 2 つの要素を使用して、検査されたページ、DevTools パネル、およびバックグラウンドサービスワーカー間の相互作用をデモします。 DevTools 拡張機能の [ sayHello ] ボタンをクリックすると、検査されたウィンドウにあいさつメッセージが表示されます。ユーザーが検査されたページ内の任意の場所をクリックすると、DevTools 拡張機能パネルにマウスクリック位置を示すメッセージが表示されます。

devtools.js:

devtools.js ファイル (次に示すように) で、chrome.runtime.connect メソッドを使用してバックグラウンドサービスワーカーへの接続を作成し、検査されたウィンドウ tabIdを backgroundPageConnection.postMessage メソッドを使用してサービスワーカーに送信します。最後に、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:

background.jsという名前のファイルを作成します。

次のコードをコピーして 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 拡張機能で使用できるようにするデータを収集したり、バックグラウンドでタスクを実行したりする場合に便利です。

DevTools 拡張機能を再読み込みしてテストする

新しい [ sayHello ] ボタンをテストするには:

edge://extensions/に移動します。
手順 1 で読み込んだアンパックされた拡張機能エントリを見つけます。
[ 再読み込み ] ボタンをクリックします。
新しいブラウザータブを開き、DevTools (F12) を開き、[ サンプルパネル ] ツール (タブ) をクリックします。
[検査済みページにHelloと言う] ボタンをクリックします。

検査されたページにアラートが表示されます。
[ OK ] ボタンをクリックしてアラートを閉じます。
検査されたページ内の任意の場所をクリックします。

拡張パネルにメッセージが表示されます。 検査されたページの位置 (199、509) をクリックしました。
コンソールツールを選択 します 。

コンソール ツール:受信応答>{xPosition: 199、yPosition: 509}にメッセージが表示されます。

これで、Microsoft Edge の DevTools でツールタブとパネルを追加する DevTools 拡張機能を作成するためのチュートリアルとコードチュートリアルが完了します。

関連項目:

Chrome 拡張機能ドキュメントのコンテンツスクリプト。

次の方法で共有

DevTools 拡張機能を作成し、カスタムツールタブとパネルを追加する

DevTools 拡張機能サンプルをダウンロード、インストール、実行する

手順 1: DevTools Web ページを含む基本的な Microsoft Edge 拡張機能を作成する

manifest.json

devtools.html

基本的な Microsoft Edge 拡張機能をインストールしてテストする

手順 2: DevTools にカスタムツールを追加する

DevTools 拡張機能を再読み込みしてテストする

手順 3: 拡張 API を呼び出してメモリ情報を表示する

DevTools 拡張機能を再読み込みしてテストする

手順 4: Web ページと DevTools の間で対話する

DevTools 拡張機能を再読み込みしてテストする

関連項目

フィードバック

その他のリソース

次の方法で共有

DevTools 拡張機能を作成し、カスタム ツール タブとパネルを追加する

DevTools 拡張機能サンプルをダウンロード、インストール、実行する

手順 1: DevTools Web ページを含む基本的な Microsoft Edge 拡張機能を作成する

manifest.json

devtools.html

基本的な Microsoft Edge 拡張機能をインストールしてテストする

手順 2: DevTools にカスタム ツールを追加する

DevTools 拡張機能を再読み込みしてテストする

手順 3: 拡張 API を呼び出してメモリ情報を表示する

DevTools 拡張機能を再読み込みしてテストする

手順 4: Web ページと DevTools の間で対話する

DevTools 拡張機能を再読み込みしてテストする

関連項目

フィードバック

その他のリソース

DevTools 拡張機能を作成し、カスタムツールタブとパネルを追加する

手順 2: DevTools にカスタムツールを追加する