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

DevTools の拡張

DevTools 拡張機能は、DevTools 固有のアクセスによって、Chrome DevTools に機能を追加します。拡張機能 API を追加できます。

DevTools 固有の拡張機能 API には次のものがあります。

DevTools ページ

DevTools ウィンドウが開くと、DevTools 拡張機能がその DevTools ページのインスタンスを作成します。ウィンドウが開いている限り存続します。このページから DevTools API と拡張機能 API にアクセスし、次のことができます。

devtools.panels API を使用してパネルを作成し、操作します。たとえば、他の拡張機能ページをパネルやサイドバーとして DevTools ウィンドウに追加します。
検査対象のウィンドウに関する情報を取得し、 devtools.inspectedWindow API。
devtools.network API を使用して、ネットワークリクエストに関する情報を取得します。
devtools.recorder API を使用して、レコーダーパネルを拡張します。
devtools.performance API を使用して、[Performance] パネルの記録ステータスに関する情報を取得します。

DevTools ページから拡張機能 API に直接アクセスできます。たとえば使用して Service Worker と通信し、メッセージの受け渡し。

DevTools 拡張機能を作成する

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

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

devtools_page フィールドは HTML ページを指している必要があります。DevTools はページは拡張機能に対してローカルである必要があります。相対 URL を使用して指定することをおすすめします。

chrome.devtools API のメンバーは、DevTools 内で読み込まれたページでのみ使用できます。そのウィンドウを開いたままにします。コンテンツスクリプトやその他の拡張機能ページはアクセスできません説明します。

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

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

パネルは、[Elements]、[Sources]、[Network] パネルなどの最上位のタブです。
サイドバーペインは、パネルに関連する補足の UI です。スタイル、計算されたスタイル、 [要素] パネルの [イベントリスナー] ペインは、サイドバーペインの例です。影響 DevTools ウィンドウが固定されている場合、サイドバーペインが次のサンプル画像のようになります。

で確認できます。 <ph type="x-smartling-placeholder">

[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 にアクセスできます。

基本的なサイドバーペインを作成するには、次のコードを使用します。

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 拡張機能コンポーネントが相互に通信します。

コンテンツスクリプトを挿入する

コンテンツスクリプトを挿入するには、scripting.executeScript() を使用します。

// DevTools page -- devtools.js
chrome.scripting.executeScript({
  target: {
    tabId: chrome.devtools.inspectedWindow.tabId
  },
  files: ["content_script.js"]
});

検査対象のウィンドウのタブ ID を取得するには、 inspectedWindow.tabId プロパティ。

コンテンツスクリプトがすでに挿入されている場合は、メッセージング API を使用して通信できます。

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

inspectedWindow.eval() メソッドを使用して JavaScript を実行できます。インスペクションされるページのコンテキストでコードを配置しますeval() メソッドは、DevTools ページから呼び出すことができます。またはサイドバーペインに移動することもできます

注意: eval() は、検査対象ページの JavaScript コンテンツにアクセスする必要がある場合にのみ使用してください。それ以外の場合は scripting.executeScript() メソッドを使用してスクリプトを実行することをおすすめします。詳細については、inspectedWindow をご覧ください。

デフォルトでは、式はページのメインフレームのコンテキストで評価されます。 inspectedWindow.eval() は、コードと同じスクリプト実行コンテキストとオプションを使用します。 DevTools コンソールで入力した名前。これにより、DevTools の [Console Utilities] にアクセスできます。 API 機能（eval() を使用する場合）たとえば、SOAK はこれを使用して要素を検査します。

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

また、inspectedWindow.eval() を呼び出して useContentScriptContext を true に設定して、コンテンツスクリプトと同じコンテキストで式を評価します。このオプションを使用するには、eval() を呼び出す前に静的コンテンツスクリプトの宣言を使用します。そのためには、executeScript() を呼び出すか、コンテンツを指定します。 manifest.json ファイルに記述します。コンテキストスクリプトのコンテキストが読み込まれた後に、このオプションを使用して追加のコンテンツスクリプトを挿入できます。

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

コンテンツスクリプトは、現在選択されている要素に直接アクセスできません。ただし、 DevTools へのアクセス権がある inspectedWindow.eval() を使用して実行すること Console Utilities API を使用します。たとえば、評価されたコードでは、$0 を使用して以下にアクセスできます。選択します。

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

選択した要素を引数として受け取るメソッドをコンテンツスクリプトに作成します。
```
function setSelectedElement(el) {
    // do something with the selected element
}
```
inspectedWindow.eval() を使用して、DevTools ページからメソッドを呼び出す useContentScriptContext: true オプションで指定します。
```
chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });
```

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

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

devtools パネルから postMessage() を呼び出すには、その window オブジェクトへの参照が必要です。手に入れよう: パネルの iframe ウィンドウを panel.onShown イベントハンドラから呼び出す必要があります。

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

挿入されたスクリプトから DevTools ページにメッセージを送信する

<script> の追加などにより、コンテンツスクリプトなしでページに直接挿入されるコード inspectedWindow.eval() の呼び出しにより、 runtime.sendMessage() を使用した DevTools ページ。代わりに挿入されたスクリプトを、仲介役として機能できるコンテンツスクリプトと組み合わせ、 window.postMessage() メソッド次の例では、バックグラウンドスクリプトを使用します。確認します。

// 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. Note that this is not foolproof
  // and the page can easily spoof messages if it wants to.
  if (typeof message !== 'object' || message === null ||
      message.source !== 'my-devtools-extension') {
    return;
  }

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

その他のメッセージを渡す方法については、GitHub をご覧ください。

DevTools の開閉を検出する

DevTools ウィンドウが開いているかどうかを追跡するには、onConnect リスナーを追加します。 Service Worker に接続し、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 service worker
const serviceWorkerConnection = chrome.runtime.connect({
    name: "devtools-page"
});

// Send a periodic heartbeat to keep the port open.
setInterval(() => {
  port.postMessage("heartbeat");
}, 15000);

DevTools 拡張機能の例

このページの例は、次のページから抜粋したものです。

Polymer Devtools 拡張機能 - ホストページで実行されている多くのヘルパーを使用してクエリを実行します。カスタムパネルに返送する DOM/JS 状態。
React DevTools 拡張機能 - レンダラのサブモジュールを使用して DevTools UI を再利用します。説明します。
Ember Inspector - Chrome と Firefox の両方に対応したアダプターを備えた共有拡張機能コアです。
Coquette-inspect - デバッグエージェントが挿入された、クリーンな React ベースの拡張機能ホストページにユーザーを誘導します。
拡張機能のサンプル: インストールして試す価値のある拡張機能が揃っています選択します。

詳細

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

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

例

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

DevTools の拡張

DevTools ページ

DevTools 拡張機能を作成する

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

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

コンテンツ スクリプトを挿入する

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

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

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

挿入されたスクリプトから DevTools ページにメッセージを送信する

DevTools の開閉を検出する

DevTools 拡張機能の例

詳細

例

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

コンテンツスクリプトを挿入する

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

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