--- title: 開発ツールパネル slug: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels tags: - Beginner - Guide - User Interface - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels ---
{{AddonSidebar}}

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

拡張機能が開発者に使われるツールを提供するとき、ブラウザーの開発ツールに、新しいパネルとしてUIを追加できます。

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

開発ツールパネルを指定する

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

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

"devtools_page": "devtools-page.html"

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

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

スクリプトの中では、パネルのタイトル、アイコン、そのコンテンツを与える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() を使うか、バックグラウンドスクリプトからメッセージを渡してコンテンツスクリプトに挿入することで、コードを実行できます。この方法のより詳しくは Extending the developer tools を見てください。

開発パネルのデザイン

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

アイコン

開発ツールパネルに使うアイコン作成方法の詳細は Photon Design System の文書のIconography を見てください。

例

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