<article lang="ja"><header><h1>サイドバー</h1></header><div><p>サイドバーはブラウザーウィンドウの横、ウェブページの隣に表示されるペイン（枠）です。サイドバーについて、その指定方法、デザイン、使用例などを説明します。</p>
<p>ブラウザーには、表示するサイドバーを選択するための UI が用意されています。例えば、 Firefox には「表示」→「サイドバー」のメニューがあります。それぞれのブラウザーウィンドウには独自のサイドバーを表示することができ、ウィンドウ内のすべてのタブに表示されます。</p>
<p>ブラウザーは、いくつかの組み込みサイドバーを含むことができます。たとえば Firefox には、ブックマークを操作するためのサイドバーが含まれています。</p>
<p>
  <img alt width="700" height="846">
</p>
<p><a><code>sidebar_action</code></a> というmanifest.json のキーを使って、拡張機能はブラウザーに独自のサイドバーを追加できます。それは組み込みのサイドバーと一緒に一覧表示され、ユーザーが組み込みサイドバーと同じメカニズムで開くことができます。</p>
<p>ブラウザーアクションのポップアップと同様に、サイドバーのコンテンツを HTML 文書で指定することができます。ユーザーがサイドバーを開く時、サイドバーの文書がブラウザーである各ウィンドウへと読み込まれます。各ウィンドウは独立した環境のインスタンスを保持します。新しいウィンドウが開いた時も同様に独自にサイドバー文書を保持します。</p>
<p><a title="このページは現在、英語のみで利用可能です。"><code>sidebarAction.setPanel()</code></a> 関数を使って特定のタブに文書をセットできます。サイドバーはどこのウィンドウに所属しているのかを、 <a title="このページは現在、英語のみで利用可能です。"><code>windows.getCurrent()</code></a> API を使って実現できます。</p>
<div><div><span>js</span></div><pre data-signature="6uAjkel2fSgxYfqS+KmV4QOvET+KIaQA0zsG+UhnMs4="><code>// sidebar.js
browser.windows.getCurrent({ populate: true }).then((windowInfo) => {
  myWindowId = windowInfo.id;
});
</code></pre></div>
<p>これは、サイドバーが異なるウィンドウのために異なるコンテンツを表示したい場合に便利です。この例については、 <a>"annotate-page" の例</a>を参照してください。</p>
<p>サイドバーの文書は、拡張機能のバックグラウンドとポップアップスクリプトが取得するのと同じ特権的な JavaScript API のセットにアクセスすることができます。また、<a title="このページは現在、英語のみで利用可能です。"><code>runtime.getBackgroundPage()</code></a> や <a title="このページは現在、英語のみで利用可能です。"><code>runtime.sendNativeMessage()</code></a> などのメッセージング API を使ってコンテンツのスクリプトやネイティブアプリケーションと連携することが可能です。</p>
<p>サイドバーの文書は、そのブラウザーウィンドウが閉じられたとき、またはユーザーがサイドバーを閉じたときに、アンロードされます。つまり、バックグラウンドページとは異なり、サイドバー文書は常に読み込まれたままであるというわけではありませんが、ブラウザーアクションのポップアップとは異なり、ユーザーがウェブページを走査している間は読み込まれたままであるということです。</p>
<p>サイドバーを定義する拡張機能が最初にインストールされたとき、そのサイドバーは自動的に開かれます。これは、拡張機能がサイドバーを含んでいることをユーザーが理解しやすくするためです。拡張機能がプログラムからサイドバーを開くことはできないことに注意してください。サイドバーはユーザーのみが開くことができます。</p></div><section aria-labelledby="サイドバーの設定"><h2><a>サイドバーの設定</a></h2><div><p>サイドバーを設定するには、 <a><code>sidebar_action</code></a> キーを manifest.json に設定して、既定のドキュメントを、既定ののタイトルおよびアイコンとともに設定してください。</p>
<div><div><span>json</span></div><pre data-signature="0lJq7VHI+t2MC4HU4ZSiqjE3kM8nLpYLFbNnHQcn3vE="><code>"sidebar_action": {
  "default_title": "My sidebar",
  "default_panel": "sidebar.html",
  "default_icon": "sidebar_icon.png"
}
</code></pre></div>
<p>これら 3 つは同時に、 <a><code>sidebarAction</code></a> API を使ってプログラム的に変更可能です。</p>
<p>タイトルとアイコンは、 UI としてブラウザーがサイドバーのリストアップをするときユーザーに示す内容です。例えば Firefox の「表示 → サイドバー」メニューで見ることができます。</p></div></section><section aria-labelledby="サイドバーのデザイン"><h2><a>サイドバーのデザイン</a></h2><div><p>サイドバーウェブページを Firefox のスタイルに合わせてデザインする方法については、 <a>Photon Design System</a> のドキュメントを参照してください。</p></div></section><section aria-labelledby="例"><h2><a>例</a></h2><div><p>GitHub 上の <a>webextensions-examples</a> リポジトリーに、サイドバーを実装した例として <a>annotate-page</a> があります。</p></div></section></article>

ブラウザーウィンドウが閉じられたとき

ユーザーがページを移動したとき