開発者ツールパネル

メモ: この機能は Firefox 54 以降で利用できます。

拡張機能が開発者にとって有用なツールを提供する場合、その UI をブラウザーの開発者ツールに新しいパネルとして追加することが可能です。

Simple example showing the addition of "My panel" to the Developer Tools tabs.

開発ツールパネルの設定

開発ツールパネルは devtools.panels API を使って追加され、特別な開発ツールページから順番に実行されます。

開発ツールのページを追加するには、拡張機能の manifest.json に devtools_page キーを設定して、拡張機能内のそのページの HTML ファイルの場所を与えます。

json

"devtools_page": "devtools-page.html"

開発ツールのページから、開発ツールパネルに追加するスクリプトを呼び出します。

html

<body>
  <script src="devtools.js"></script>
</body>

スクリプトでは devtools パネルを、パネルのタイトル、アイコン、パネルのコンテンツを提供する HTML ファイルを指定して、作成します。

function handleShown() {
  console.log("panel is being shown");
}

function handleHidden() {
  console.log("panel is being hidden");
}

browser.devtools.panels
  .create(
    "My Panel", // title
    "icons/star.png", // icon
    "devtools/panel/panel.html", // content
  )
  .then((newPanel) => {
    newPanel.onShown.addListener(handleShown);
    newPanel.onHidden.addListener(handleHidden);
  });

拡張機能はインスペクターウィンドウの中で devtools.inspectedWindow.eval() を使うか、バックグラウンドスクリプトからメッセージを渡してコンテンツスクリプトに挿入することで、コードを実行することができます。この方法のより詳しくは開発ツールの拡張を参照してください。

開発パネルのデザイン

開発パネルのウェブページを Firefox のスタイルに適合させる方法の詳細は Photon Design System の文書を参照してください。

アイコン

開発ツールパネルに使うアイコン作成方法の詳細は Iconography を Photon Design System のドキュメントで参照してください。

例

GitHub の webextensions-examples リポジトリーには、開発ツールパネルを実装した devtools-panels の例があります。