このページは Cloud Translation API によって翻訳されました。

DevTools の拡張

概要

DevTools 拡張機能は、Chrome DevTools に機能を追加します。新しい UI パネルを追加し、サイドバーの表示、検査対象ページの操作、ネットワークリクエストに関する情報の取得などを行います。表示注目の DevTools 拡張機能。DevTools の拡張機能は、追加の DevTools 固有の拡張機能 API:

DevTools 拡張機能は他の拡張機能と同様に構成されており、バックグラウンドページ、コンテンツスクリプトなどのアイテムです。さらに、各 DevTools 拡張機能には DevTools ページがあり、ここから DevTools API に追加します

DevTools ページが
バックグラウンドページが切り替わります。バックグラウンドページが表示されます。
コンテンツスクリプトとの通信や拡張機能 API へのアクセスなどです。
[DevTools] ページから、パネルの作成など、DevTools API にアクセスできます。

DevTools ページ

DevTools ウィンドウが開くたびに、拡張機能の DevTools ページのインスタンスが作成されます。「 [DevTools] ページは、DevTools ウィンドウの存続期間中に存在します。[DevTools] ページでは、 DevTools API と一部の拡張機能 API のセット。具体的には、DevTools ページでは次のことができます。

devtools.panels API を使用して、パネルの作成と操作を行います。
検査対象のウィンドウに関する情報を取得し、 devtools.inspectedWindow API。
devtools.network API を使用して、ネットワークリクエストに関する情報を取得します。

DevTools ページでは、ほとんどの拡張機能 API を直接使用することはできません。同じサブセットやコンテンツスクリプトがアクセスできる extension API と runtime API。コンテンツに高評価を付ける DevTools のページがメッセージの受け渡しを使用してバックグラウンドページと通信できます。1 つの例については、コンテンツスクリプトの挿入をご覧ください。

DevTools 拡張機能の作成

拡張機能の DevTools ページを作成するには、拡張機能に devtools_page フィールドを追加します。 manifest:

{
  "name": ...
  "version": "1.0",
  "minimum_chrome_version": "10.0",
  "devtools_page": "devtools.html",
  ...
}

拡張機能のマニフェストで指定された devtools_page のインスタンスは、 DevTools ウィンドウを開きました。このページには、他の拡張機能ページをパネルやサイドバーとして devtools.panels API を使用する [DevTools] ウィンドウ。

注: devtools_page フィールドは HTML ページを指す必要があります。これは、background フィールドとは異なります。では、JavaScript ファイルを直接指定できます。DevTools ページは拡張機能のローカルなものにする必要があるため、相対 URL を使用して指定することをおすすめします。

chrome.devtools.* API モジュールは、DevTools 内で読み込まれたページでのみ使用できます。クリックします。コンテンツスクリプトやその他の拡張機能ページには、これらの API はありません。そのため API は DevTools ウィンドウの存続期間中のみ利用可能です。

まだ試験運用版の DevTools API もあります。詳しくは、chrome.experimental.* をご覧ください。 API をご覧ください。

DevTools UI 要素: パネルとサイドバーペイン

ブラウザのアクション、コンテキストメニュー、ポップアップといった通常の拡張機能 UI 要素に加え、 DevTools 拡張機能を使用すると、DevTools ウィンドウに UI 要素を追加できます。

パネルは、[Elements]、[Sources]、[Network] パネルなどの最上位のタブです。
サイドバーペインは、パネルに関連する補足の UI です。スタイル、計算されたスタイル、 [要素] パネルの [イベントリスナー] ペインは、サイドバーペインの例です。（ Chrome のバージョンによっては、サイドバーペインの外観が画像と一致しない場合があります DevTools ウィンドウがドッキングされている場所を示します）。

[Elements] パネルと [Styles] サイドバーペインが表示された [DevTools] ウィンドウ。

各パネルは独自の HTML ファイルであり、他のリソース（JavaScript、CSS、画像など）を含めることができます。オン）。基本的なパネルの作成は次のようになります。

chrome.devtools.panels.create("My Panel",
    "MyPanelIcon.png",
    "Panel.html",
    function(panel) {
      // code invoked on panel creation
    }
);

パネルまたはサイドバーペインで実行される JavaScript は、DevTools ページと同じ API にアクセスできます。

[Elements] パネル用の基本的なサイドバーペインを作成すると、次のようになります。

chrome.devtools.panels.elements.createSidebarPane("My Sidebar",
    function(sidebar) {
        // sidebar initialization code here
        sidebar.setObject({ some_data: "Some data to show" });
});

サイドバーペインにコンテンツを表示する方法はいくつかあります。

HTML コンテンツ。setPage を呼び出して、ペインに表示する HTML ページを指定します。
JSON データ。JSON オブジェクトを setObject に渡します。
JavaScript 式。式を setExpression に渡します。DevTools は式を検査対象ページのコンテキストで指定し、戻り値を表示します。

setObject と setExpression の両方で、ペインには、 DevTools コンソール。ただし、setExpression を使用すると DOM 要素と任意の JavaScript を表示できます。 setObject は JSON オブジェクトのみをサポートしています。

拡張機能コンポーネント間の通信

以下のセクションでは、異なるクラウドプロバイダ間での通信の一般的なシナリオについて説明します。コンポーネントについて説明します。

コンテンツスクリプトの挿入

DevTools ページから tabs.executeScript を直接呼び出すことはできません。コンテンツスクリプトの挿入: ] を使用して、検査対象のウィンドウのタブの ID を取得する必要があります。 inspectedWindow.tabId プロパティを作成し、バックグラウンドページにメッセージを送信します。取得元: バックグラウンドページに追加するには、tabs.executeScript を呼び出してスクリプトを挿入します。

注: コンテンツスクリプトがすでに挿入されている場合は、 eval メソッドを使用します。詳しくは、選択した要素をコンテンツスクリプトに渡すをご覧ください。

次のコードスニペットは、executeScript を使用してコンテンツスクリプトを挿入する方法を示しています。

// DevTools page -- devtools.js
// Create a connection to the background page
var backgroundPageConnection = chrome.runtime.connect({
    name: "devtools-page"
});

backgroundPageConnection.onMessage.addListener(function (message) {
    // Handle responses from the background page, if any
});

// Relay the tab ID to the background page
chrome.runtime.sendMessage({
    tabId: chrome.devtools.inspectedWindow.tabId,
    scriptToInject: "content_script.js"
});

バックグラウンドページのコード:

// Background page -- background.js
chrome.runtime.onConnect.addListener(function(devToolsConnection) {
    // assign the listener function to a variable so we can remove it later
    var devToolsListener = function(message, sender, sendResponse) {
        // Inject a content script into the identified tab
        chrome.tabs.executeScript(message.tabId,
            { file: message.scriptToInject });
    }
    // add the listener
    devToolsConnection.onMessage.addListener(devToolsListener);

    devToolsConnection.onDisconnect.addListener(function() {
         devToolsConnection.onMessage.removeListener(devToolsListener);
    });
});

検査対象のウィンドウで JavaScript を評価する

inspectedWindow.eval メソッドを使用すると、表示されます。eval メソッドは、DevTools のページ、パネル、サイドバーペインから呼び出すことができます。

デフォルトでは、式はページのメインフレームのコンテキストで評価されます。ここで、要素検査などの DevTools コマンドライン API 機能に精通していること（inspect(elem)）、関数の中断（debug(fn)）、クリップボードへのコピー（copy()）など。 inspectedWindow.eval() は、 DevTools コンソール。評価内でこれらの API にアクセスできます。たとえば、SOAK ではこれを使用します。を使用して確認できます。

chrome.devtools.inspectedWindow.eval(
  "inspect($$('head script[data-soak=main]')[0])",
  function(result, isException) { }
);

または、inspectedWindow.eval() に useContentScriptContext: true オプションを使用して、コンテンツスクリプトと同じコンテキストで式を評価します。eval に発信中: useContentScriptContext: true はコンテンツスクリプトのコンテキストを作成しないため、コンテキストスクリプト。eval を呼び出す前に、executeScript を呼び出すか、コンテンツを指定します。スクリプトを manifest.json ファイルに記述します。

コンテキストスクリプトのコンテキストが存在する場合は、このオプションを使用して追加のコンテンツを挿入できます。使用できます。

eval メソッドは、適切なコンテキストで使用すると効果的ですが、使用すると危険です除外しますアクセスする必要がない場合は、tabs.executeScript メソッドを使用します。検査対象ページの JavaScript コンテキスト。詳細な注意事項と 2 つの方法の比較については、 inspectedWindow をご覧ください。

選択した要素をコンテンツスクリプトに渡す

コンテンツスクリプトは、現在選択されている要素に直接アクセスできません。ただし、 inspectedWindow.eval を使用して実行する場合、DevTools コンソールとコマンドライン API にアクセスできます。たとえば、評価されたコードでは、$0 を使用して選択した要素にアクセスできます。

選択した要素をコンテンツスクリプトに渡すには:

選択した要素を引数として受け取るメソッドをコンテンツスクリプトに作成します。
次のように inspectedWindow.eval を使用して、DevTools ページからメソッドを呼び出します。 useContentScriptContext: true オプション。

コンテンツスクリプトのコードは次のようになります。

function setSelectedElement(el) {
    // do something with the selected element
}

次のように、DevTools ページからメソッドを呼び出します。

chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });

useContentScriptContext: true オプションは、式を評価する必要があることを指定します。コンテンツスクリプトと同じコンテキストなので、setSelectedElement メソッドにアクセスできます。

参照パネルの `window` を取得する

devtools パネルから postMessage を行うには、その window オブジェクトへの参照が必要です。 panel.onShown イベントハンドラからパネルの iframe ウィンドウを取得します。

onShown.addListener(function callback)
extensionPanel.onShown.addListener(function (extPanelWindow) {
    extPanelWindow instanceof Window; // true
    extPanelWindow.postMessage( // …
});

コンテンツスクリプトから DevTools ページへのメッセージ

DevTools ページとコンテンツスクリプトの間のメッセージは、バックグラウンドページを介した間接的なメッセージです。

コンテンツスクリプトにメッセージを送信する際、バックグラウンドページでは tabs.sendMessage メソッドは、特定のタブのコンテンツスクリプトにメッセージを転送します。コンテンツスクリプトの挿入をご覧ください。

コンテンツスクリプトからメッセージを送信する場合、メッセージを配信するための既製のメソッドはありません。現在のタブに関連付けられた正しい DevTools ページインスタンスに移動します。回避策として、 DevTools ページでは、バックグラウンドページとの長期的な接続が確立され、バックグラウンドページでは、タブ ID と接続のマップが維持されるため、各メッセージを正しい宛先にルーティングできます。接続します

// background.js
var connections = {};

chrome.runtime.onConnect.addListener(function (port) {

    var extensionListener = function (message, sender, sendResponse) {

        // The original connection event doesn't include the tab ID of the
        // DevTools page, so we need to send it explicitly.
        if (message.name == "init") {
          connections[message.tabId] = port;
          return;
        }

    // other message handling
    }

    // Listen to messages sent from the DevTools page
    port.onMessage.addListener(extensionListener);

    port.onDisconnect.addListener(function(port) {
        port.onMessage.removeListener(extensionListener);

        var tabs = Object.keys(connections);
        for (var i=0, len=tabs.length; i < len; i++) {
          if (connections[tabs[i]] == port) {
            delete connections[tabs[i]]
            break;
          }
        }
    });
});

// Receive message from content script and relay to the devTools page for the
// current tab
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    // Messages from content scripts should have sender.tab set
    if (sender.tab) {
      var tabId = sender.tab.id;
      if (tabId in connections) {
        connections[tabId].postMessage(request);
      } else {
        console.log("Tab not found in connection list.");
      }
    } else {
      console.log("sender.tab not defined.");
    }
    return true;
});

DevTools ページ（またはパネルまたはサイドバーペイン）は、次のように接続を確立します。

// Create a connection to the background page
var backgroundPageConnection = chrome.runtime.connect({
    name: "panel"
});

backgroundPageConnection.postMessage({
    name: 'init',
    tabId: chrome.devtools.inspectedWindow.tabId
});

挿入されたスクリプトから DevTools ページへのメッセージ

上記の解決策はコンテンツスクリプトでは機能しますが、コードがページに直接挿入される場合、（<script> タグの追加や inspectedWindow.eval などを通じて）使用する場合は、戦略も異なります。この場合、runtime.sendMessage はメッセージを想定どおりに動作していることが

回避策として、挿入されたスクリプトをコンテンツスクリプトと組み合わせることで、使用します。コンテンツスクリプトにメッセージを渡すには、window.postMessage を使用します。 API前のセクションのバックグラウンドスクリプトを想定した例を次に示します。

// injected-script.js

window.postMessage({
  greeting: 'hello there!',
  source: 'my-devtools-extension'
}, '*');

// content-script.js

window.addEventListener('message', function(event) {
  // Only accept messages from the same frame
  if (event.source !== window) {
    return;
  }

  var message = event.data;

  // Only accept messages that we know are ours
  if (typeof message !== 'object' || message === null ||
      !message.source === 'my-devtools-extension') {
    return;
  }

  chrome.runtime.sendMessage(message);
});

メッセージが挿入されたスクリプトからコンテンツスクリプト、バックグラウンドへと流れるようになりました最後に [DevTools] ページに移動します。

また、こちらの 2 つのメッセージ受け渡し方法も検討してください。

DevTools の開閉のタイミングを検出する

拡張機能で DevTools ウィンドウが開いているかどうかをトラッキングする必要がある場合は、onConnect を追加できます。リスナーをバックグラウンドページに追加し、DevTools ページから connect を呼び出します。各タブには固有の DevTools ウィンドウが開いていると、複数の接続イベントが表示されることがあります。ファイアウォールルールで [DevTools] ウィンドウが開いているので、以下のように接続イベントと接続解除イベントをカウントする必要があります。

// background.js
var openCount = 0;
chrome.runtime.onConnect.addListener(function (port) {
    if (port.name == "devtools-page") {
      if (openCount == 0) {
        alert("DevTools window opening.");
      }
      openCount++;

      port.onDisconnect.addListener(function(port) {
          openCount--;
          if (openCount == 0) {
            alert("Last DevTools window closing.");
          }
      });
    }
});

DevTools のページでは、次のような接続が作成されます。

// devtools.js

// Create a connection to the background page
var backgroundPageConnection = chrome.runtime.connect({
    name: "devtools-page"
});

DevTools 拡張機能の例

これらの DevTools 拡張機能の例のソースをご覧ください。

Polymer Devtools 拡張機能 - ホストページで実行されている多くのヘルパーを使用して DOM/JS をクエリします。カスタムパネルに返送します
React DevTools 拡張機能 - Blink のサブモジュールを使用して、DevTools UI コンポーネントを再利用します。
Ember Inspector - Chrome と Firefox の両方に対応したアダプターを備えた共有拡張機能コアです。
Coquette-inspect - デバッグエージェントが挿入された、React ベースのクリーンな拡張機能。表示されます。
DevTools 拡張機能ギャラリーとサンプル拡張機能では、インストール、試して、学びましょう。

詳細

拡張機能で使用できる標準 API については、chrome.*API とウェブ API。

フィードバックをお寄せくださいお寄せいただいたご意見やご提案は、API の改善に活用させていただきます。

例

DevTools API を使用する例については、サンプルをご覧ください。

DevTools の拡張

概要

DevTools ページ

DevTools 拡張機能の作成

DevTools UI 要素: パネルとサイドバー ペイン

拡張機能コンポーネント間の通信

コンテンツ スクリプトの挿入

検査対象のウィンドウで JavaScript を評価する

選択した要素をコンテンツ スクリプトに渡す

参照パネルの window を取得する

コンテンツ スクリプトから DevTools ページへのメッセージ

挿入されたスクリプトから DevTools ページへのメッセージ

DevTools の開閉のタイミングを検出する

DevTools 拡張機能の例

詳細

例

DevTools UI 要素: パネルとサイドバーペイン

コンテンツスクリプトの挿入

選択した要素をコンテンツスクリプトに渡す

参照パネルの `window` を取得する

コンテンツスクリプトから DevTools ページへのメッセージ