開発者ツールパネル
メモ: この機能は Firefox 54 以降で利用できます。
拡張機能が開発者にとって有用なツールを提供する場合、その UI をブラウザーの開発者ツールに新しいパネルとして追加することが可能です。
開発ツールパネルの設定
開発ツールパネルは devtools.panels
API を使って追加され、特別な開発ツールページから順番に実行されます。
開発ツールのページを追加するには、拡張機能の manifest.json に devtools_page
キーを設定して、 拡張機能内のそのページの HTML ファイルの場所を与えます。
"devtools_page": "devtools-page.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 の例があります。