Microsoft Edge DevTools にカスタムツールを追加する

この記事では、カスタム DevTools サンプルのコードについて説明します。最初にサンプルをインストールして実行するには、「サンプル: カスタム DevTools ツール」を参照してください。

概要

通常の拡張機能と同様に、DevTools 拡張機能にはマニフェストファイルがあります。これについては、「拡張機能の開発を開始する」で説明されています。これには、開始できる基本的な拡張機能のサンプルが示されています。

DevTools を拡張する拡張機能には、次のものが含まれます。

DevTools のツールのパネルに表示するレンダリングされた HTML ファイル。
DevTools が開かれたときに実行される非レンダリング HTML ファイル。通常は、カスタム DevTools ツールと検査対象の Web ページ間の通信を処理します。

この DevTools 拡張機能サンプルは、DevTools と検査対象の Web ページの間で通信し、DevTools API を呼び出します。

DevTools 拡張機能のサンプルには、アクティビティバーのカスタム タブとタブに接続されたパネルなど、DevTools のカスタムツールが表示されます。

カスタムタブ

パネルは、Microsoft Edge DevTools のツールページであり、アクティビティバーのツールのタブもあります。

関連項目:

ファイルの概要

DevTools 拡張機能サンプルには、次のファイルが含まれています。

ファイル	説明
`manifest.json`	拡張機能に関する情報: 名前、説明、バージョン、マニフェストバージョン、DevTools に表示する HTML ページ。
`panel.html`	DevTools のカスタムパネルに表示する Web ページ。
`devtools.html`	拡張機能の JavaScript ファイルを読み込むために DevTools を開くときに実行される、レンダリングされていない HTML ファイル。
`devtools.js`	カスタム DevTools ページの主なロジック。
`content_script.js`	拡張機能が検査対象の Web ページに挿入するコード。マウスクリック位置でメッセージを送信するページにクリックイベントリスナーを追加します。 `devtools.js` このメッセージを聞き、カスタムパネルに位置を表示します。
`icon.png`	DevTools のアクティビティバーにあるツールのタブと、[ その他のツール ] メニューに表示するアイコン。
`README.md`	サンプルの使用方法に関する開発者向けの基本情報。

詳細は以下です。

Web ページと DevTools 間の対話

検査対象の Web ページと DevTools 間の相互作用を有効にするには、複数のファイルが必要です。これらのファイルは、さまざまなコンテキストで実行されます。

devtools.js は、DevTools のカスタムツールパネルのコンテキストで実行されます。
content_script.js は コンテンツスクリプトです。つまり、検査対象の Web ページのコンテキストで実行されます。他のスクリプトが Web ページによって読み込まれるのと同じように、コンテンツスクリプトは DOM にアクセスでき、DOM を変更できます。

DevTools ページ、検査対象ページ、コンテンツスクリプトは、拡張機能に組み合わされます。

DevTools 拡張機能の分析調査を示す図

content_script.jsは、検査対象の Web ページのユーザークリックした場所を検出します。

document.addEventListener("click", event => {
  chrome.runtime.sendMessage({
    click: true,
    xPosition: event.clientX + document.body.scrollLeft,
    yPosition: event.clientY + document.body.scrollTop
  });
});

コンテンツスクリプトによってこの情報が devtools.js ファイルに中継されます。このファイルでは、 データはカスタム ツールの DevTools と コンソール ツールに表示されます。

コンテンツスクリプトを使用して、Web ページのユーザークリックを検出します。コンテンツスクリプトはこの情報を devtools.js ファイルに中継します。ここでデータは、DevTools コンソール と Microsoft Edge 拡張機能である DevTools カスタム ツールの両方に表示されます。

カスタム DevTools ツールのコード

カスタム DevTools サンプルは、次のファイルとコードで構成されています。検査対象の Web ページと対話するコードは、次の処理を行います。

カスタム DevTools ツールでメモリ情報を表示します。
Web ページがクリックされたときの カスタム DevTools ツールでのマウスクリック位置を表示します。
カスタム DevTools ツールで [Say Hello] ボタンをクリックすると、検査対象の Web ページに案内通知が表示されます。

`manifest.json`

拡張機能に関する情報: 名前、説明、バージョン、マニフェストバージョン、DevTools に表示する HTML ページ。

マニフェストファイルには、キーと値のペアが含まれています。最上位のキーは メンバーと呼ばれます。

このファイルは拡張子に必要です。マニフェストには、拡張機能に関する次の情報が含まれています。

メンバー	説明
`name`	[ `edge://extensions/`] の下に表示される広告表示オプションの名前。
`description`	拡張機能の名前の下に表示される拡張機能の説明。
`version`	拡張機能の名前の横に表示される拡張機能のバージョン。
`manifest_version`	ネットワーク要求の変更など、拡張機能が使用する機能セットを決定します。現在のバージョンはバージョン `3` です。このバージョンとバージョン `2` との違いの詳細については、「マニフェスト V3 への移行のタイムライン」を参照してください。
`devtools_page`	DevTools を開くたびに実行され、拡張機能の JavaScript ファイルを読み込む HTML ファイルへのパス。このページは DevTools では表示されません。
`content_scripts`	ユーザーが指定した Web ページを開くときに使用する JavaScript ファイルまたは CSS ファイル。 Chrome ドキュメントのコンテンツスクリプトを参照してください。
`permissions`	ローカルデバイスでは、システムメモリ容量を表示するためのアクセス許可が必要です。スクリプトはそのための API を呼び出すためです。

manifest.json:

{
    "name": "Custom DevTools Tool",
    "description": "A DevTools extension interacting with the inspected page",
    "manifest_version": 3,
    "version": "1.0",
    "devtools_page": "devtools.html",
    "content_scripts": [{
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "run_at": "document_idle",
        "js": [
            "content_script.js"
        ]
    }],
    "permissions": [
        "system.memory"
    ]
}

manifest.json のpermissions マニフェストメンバーは、拡張機能がユーザーに必要とするアクセス許可を定義します。特定の拡張機能 API を使用するには、いくつかのアクセス許可が必要です。拡張機能 API を使用するには、 system-memory アクセス許可が必要です。特定の API には、アクセス許可が関連付けられています。

content_scripts メンバー内のキー:

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

関連項目:

manifest.json - リポジトリ内のソースファイル。
拡張機能 API リファレンス

`panel.html`

DevTools のカスタムパネルに表示する Web ページ。

このファイルは必須です。これは、DevTools のカスタムパネルに表示する Web ページです。

panel.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h2>Custom DevTools tool</h2>

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

    <h3>Send message from DevTools to inspected page</h3>
    <input type="button" id="sayHello" value="Say hello to the inspected page">
    <h3>Send message from inspected page to DevTools</h3>
    <p>Click somewhere in the inspected webpage.</p>
    <div>
      <b>Coordinates:</b> <span id="youClickedOn"></span>
    </div>

  </body>
</html>

panel.htmlは、devtools.js の chrome.devtools.panels.create メソッド呼び出しで参照されます。 panel.html Web ページには、カスタムツールのパネルのユーザーインターフェイスが含まれています。

上記の要素は、検査対象ページと DevTools パネル間の相互作用を示しています。

ユーザーが DevTools 拡張機能の [ sayHello ] ボタンをクリックすると、検査対象ウィンドウに警告が表示されます。

ユーザーが検査対象ページの任意の場所をクリックすると、マウスクリック座標が DevTools カスタムツールに表示されます。

関連項目:

panel.html - リポジトリ内のソースファイル。

`devtools.html`

DevTools が開かれたときに実行される、レンダリングされていない HTML ファイル。このファイルは必須です。

ファイル名 devtools.html は、マニフェストファイル内の devtools_page メンバーの値と一致する必要があります。

devtools.html devtools.jsを読み込む <script> 要素が含まれています。

devtools.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script src="devtools.js"></script>
  </body>
</html>

関連項目:

devtools.html - リポジトリ内のソースファイル。

`devtools.js`

devtools.js には、カスタム DevTools ページのメインロジックが含まれています。 devtools.js 次の操作を行います。

chrome.devtools.panels.create() を使用して、DevTools に新しいカスタム ツールタブとパネルを作成します。
ツールが表示される (panel.onShown リスナー) と、 availableMemoryCapacity 要素と totalMemoryCapacity 要素が DOM から取得されます。
パネルが表示された後、毎秒コードを実行するタイマーを設定します。
タイマーが発生すると、 chrome.system.memory.getInfo メソッドを使用してデバイスの使用可能な合計メモリ容量が取得され、これらの値は対応する DOM 要素に表示されます。

devtools.js:

let availableMemoryCapacity;
let totalMemoryCapacity;
let youClickedOn;

chrome.devtools.panels.create("Custom", "icon.png", "panel.html", panel => {
    // Code invoked on panel creation.
    panel.onShown.addListener( (extPanelWindow) => {
        // Memory API.
        availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity');
        totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity');
        // 2-way message sending.
        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!");');
        });
    });
});

// Update the Memory display.
setInterval(() => {
    chrome.system.memory.getInfo((data) => {
        if (availableMemoryCapacity) {
            availableMemoryCapacity.innerHTML = data.availableCapacity;
        }
        if (totalMemoryCapacity) {
            totalMemoryCapacity.innerHTML = data.capacity;
        }
    });
}, 1000);

// Send a message from the inspected page to DevTools.
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 = `(${request.xPosition}, ${request.yPosition})`;
        }
        sendResponse({
            xPosition: request.xPosition,
            yPosition: request.yPosition
        });
    }
});

devtools.js でのcreateメソッド呼び出し:

chrome.devtools.panels.create("Custom", "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.
)

検査対象の Web ページと通信するために、devtools.js はpanel.html ファイルで定義されているsayHello ボタンとラベルyouClickedOnイベントリスナーを追加します。

ユーザーが [ sayHello ] ボタンをクリックすると、 devtools.js は chrome.devtools.inspectedWindow.eval() メソッドを使用して、検査対象ウィンドウでコードを直接実行します。

ユーザーが検査対象ウィンドウ内の任意の場所をクリックすると、DevTools 拡張機能は request.click == true とマウスの位置情報を含むメッセージを受け取ります。

関連項目:

devtools.js - リポジトリ内のソースファイル。
Microsoft Edge 拡張機能でサポートされている API
- chrome.devtools.panels
  - create()

`content_script.js`

カスタム DevTools ツールによって検査対象の Web ページに挿入されるコード。検査対象の Web ページ (任意の Web ページ) に挿入される JavaScript を含みます。

このファイルは次の処理を実行します。

chrome.runtime.sendMessage を呼び出すことにより、検査対象の Web ページにクリックイベントリスナーを追加して、マウスのクリック位置を含むメッセージを送信します。
イベントリスナーを介してページクリックイベントをリッスンします。

コンテンツスクリプトは、マウスクリック座標を devtools.js ファイルに中継します。このファイルでは、 コンソールツールと DevTools の カスタム ツールの両方に座標が表示されます。

コンテンツスクリプトは、検査対象の Web ページのコンテキストで実行されます。他のスクリプトが Web ページによって読み込まれるのと同じように、コンテンツスクリプトは DOM にアクセスでき、DOM を変更できます。

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);
    }
  );
});

関連項目:

content_script.js - リポジトリ内のソースファイル。
コンテンツスクリプト - Chrome ドキュメント

`icon.png`

DevTools のアクティビティバーにあるツールのタブと、[ その他のツール ] メニューに表示するアイコン。

icon.png は、DevTools の アクティビティバー にあるツールのタブと 、[その他のツール ] メニューに表示するアイコンです。

関連項目:

icon.png - リポジトリ内のソースファイル。

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-08-13

Microsoft Edge DevTools にカスタム ツールを追加する

概要

ファイルの概要

Web ページと DevTools 間の対話

カスタム DevTools ツールのコード

manifest.json

panel.html

devtools.html

devtools.js

content_script.js

icon.png

関連項目

フィードバック

その他のリソース

Microsoft Edge DevTools にカスタムツールを追加する

`manifest.json`

`panel.html`

`devtools.html`

`devtools.js`

`content_script.js`

`icon.png`