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

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

概要

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

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

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

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

DevTools 拡張機能のサンプルでは、DevTools にカスタムツールが表示されます。これには、アクティビティバーの [カスタム] タブと、タブに接続されているパネルが含まれます。

カスタムタブ

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

関連項目:

ファイルの概要

DevTools 拡張機能のサンプルには、次のファイルがあります。

ファイル	説明
`manifest.json`	拡張機能に関する情報: DevTools に表示する名前、説明、バージョン、マニフェストバージョン、HTML ページ。
`panel.html`	DevTools のカスタムパネルに表示する Web ページ。
`devtools.html`	DevTools を開いたときに実行され、拡張機能の JavaScript ファイルを読み込む、レンダリングされていない 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 にアクセスでき、変更できます。

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 Custom ツールの両方に表示されます。

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

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

カスタム DevTools ツールでメモリ情報を表示します。
Web ページがクリックされたときに、 カスタム DevTools ツールのマウスクリック位置を表示します。
カスタム DevTools ツールで [Hello と言う] ボタンがクリックされたときに、検査された Web ページに案内応答アラートを表示します。

`manifest.json`

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

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

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

メンバー	説明
`name`	`edge://extensions/`の下に表示される拡張機能の名前。
`description`	拡張機能の名前の下に表示される拡張機能の説明。
`version`	拡張機能の名前の横に表示される拡張機能のバージョン。
`manifest_version`	ネットワーク要求の変更など、拡張機能が使用する機能のセットを決定します。現在のバージョンはバージョン `3`です。このバージョンとバージョン `2`との違いの詳細については、「 Manifest 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 - リポジトリ内のソースファイル。
Extensions 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 から取得されます。
パネルが表示された後、1 秒ごとにコードを実行するタイマーを設定します。
タイマーが起動すると、 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.jssayHello ボタンにイベントリスナーを追加し、panel.html ファイルで定義されているラベルをyouClickedOnします。

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

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

関連項目:

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

`content_script.js`

検査された Web ページにカスタム DevTools ツールが挿入するコード。検査された Web ページ (任意の Web ページ) に挿入される JavaScript が含まれます。

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

chrome.runtime.sendMessageを呼び出して、マウスクリック位置を含むメッセージを送信する、検査された Web ページにクリックイベントリスナーを追加します。
イベントリスナーを介してページクリックイベントをリッスンします。

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

コンテンツスクリプトは、検査された Web ページのコンテキストで実行されます。 Web ページによって他のスクリプトが読み込まれるのと同じ方法で、コンテンツスクリプトは 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-06-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`