開発者ツールパネル

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

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

開発ツールパネルの設定

開発ツールパネルは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() を使うか、バックグラウンドスクリプトからメッセージを渡してコンテンツスクリプトに挿入することで、コードを実行することができます。この方法のより詳しくは開発ツールの拡張を参照してください。