開発者ツールパネル
メモ: この機能は 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 ファイルを指定して、作成します。
js
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 の例があります。