diff options
Diffstat (limited to 'files/ja/mozilla/add-ons/webextensions/user_interface')
10 files changed, 621 insertions, 0 deletions
diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/browser_action/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/browser_action/index.html new file mode 100644 index 0000000000..64b172591a --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/browser_action/index.html @@ -0,0 +1,49 @@ +--- +title: ツールバーボタン +slug: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action +tags: + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action +--- +<div>{{AddonSidebar}}</div> + +<p>よく<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">ブラウザーアクション</a>として参照され、 このユーザーインターフェイスオプションはブラウザーのツールバーに追加されるボタンです。 ユーザーはボタンをクリックして拡張機能とやりとりします。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="display: block; height: 182px; margin-left: auto; margin-right: auto; width: 350px;"> ツールバーボタン (ブラウザーアクション) はアドレスバーボタン (ページアクション)とよく似ています。違いといつ使うかについてのガイダンスは、<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/user_interface/Page_actions#Page_actions_and_browser_actions">ページアクションとブラウザーアクション</a>を見てください。</p> + +<h2 id="Specifying_the_browser_action" name="Specifying_the_browser_action">ブラウザーアクションを指定する</h2> + +<p>ブラウザーアクションのプロパティは manifest.json の <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> キーで定義します。</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"browser_action":</span> <span class="punctuation token">{</span> + <span class="key token">"default_icon":</span> <span class="punctuation token">{</span> + <span class="key token">"19":</span> <span class="string token">"button/geo-19.png"</span><span class="punctuation token">,</span> + <span class="key token">"38":</span> <span class="string token">"button/geo-38.png"</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="key token">"default_title":</span> <span class="string token">"Whereami?"</span> +<span class="punctuation token">}</span></code></pre> + +<p>唯一不可欠なキーは <code>default_icon</code> です。</p> + +<p>ブラウザーアクションの指定には 2 つの方法があります: <a href="/ja/Add-ons/WebExtensions/Popups">ポップアップ</a>がつくのとつかないのです。 ポップアップを指定しないと、ユーザーがボタンをクリックした時に、拡張機能にイベントがディスパッチされ、これを拡張機能が <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/BrowserAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>browserAction.onClicked</code></a> を使ってリッスンします:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>browserAction<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>ポップアップを指定すると、クリックイベントはディスパッチされません: その代わりに、ユーザーがボタンをクリックした時にポップアップが表示されます。ユーザーはポップアップとやりとりできて、ユーザーが範囲外をクリックした時に自動的にポップアップが閉じます。ポップアップを作成、管理することの詳細は<a href="/ja/Add-ons/WebExtensions/Popups">ポップアップ</a>の記事を見てください。</p> + +<p>拡張機能は 1 つだけのブラウザーアクションを持つ必要があります。</p> + +<p>なお、上に示されている任意のプロパティは <code><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/browserAction">browserAction</a></code> API を使ったコードからも変更できます。</p> + +<h2 id="Icons" name="Icons">アイコン</h2> + +<p>ブラウザーアクションのアイコンを作る詳細は、<a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a> 文書の <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconography</a> を見てください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>Github の <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> リポジトリには、ブラウザーアクションを使う拡張機能の例がいくつかあります。</p> + +<ul> + <li><a href="https://github.com/mdn/webextensions-examples/blob/master/bookmark-it/">bookmark-it</a> はポップアップなしのブラウザーアクションを使います。</li> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a> はポップアップ付きのブラウザーアクションを使います。</li> +</ul> diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html new file mode 100644 index 0000000000..0744bf9d1f --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html @@ -0,0 +1,54 @@ +--- +title: コンテキストメニュー項目 +slug: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items +--- +<div>{{AddonSidebar}}</div> + +<div> +<p>このユーザーインターフェイスオプションは、ブラウザーのコンテキストメニューに1つ以上の項目を追加します。これはユーザーがウェブページを右クリックした時に利用できるコンテキストメニューです。タブも <a href="/ja/Add-ons/WebExtensions/API/menus">browser.menus API</a> を通じてコンテキストメニューを持つことができます。</p> + +<p><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="display: block; height: 382px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<p>このオプションを、特定のブラウザーやウェブページコンテンツに関連する機能をさらすのに使います。例えば、ユーザーが画像をクリックした時にグラフィックエディターを開いたり、ページの一部分が選択されている時にページコンテンツを保存したりする機能を表示できます。メニューにはプレーンなメニュー項目や、チェックボックスや、ラジオボタングループや、 セパレータを追加できます。コンテキストメニュー項目が {{WebExtAPIRef("contextMenus.create")}} を使って追加されたら、すべてのブラウザータブで表示されますが、{{WebExtAPIRef("contextMenus.remove")}} にて削除することで隠すこともできます。</p> + +<h2 id="Specifying_context_menu_items" name="Specifying_context_menu_items">コンテキストメニュー項目を指定する</h2> + +<p>コンテキストメニューを、{{WebExtAPIRef("contextMenus")}} API を使ってブログラム的に管理できます。しかし、このAPIの恩恵を受けるには、manifest.json にて <code>contextMenus</code> パーミッションを要求する必要があります。</p> + +<pre class="brush: json">"permissions": ["contextMenus"]</pre> + +<p>次に、拡張機能のバックグラウンドスクリプト内にコンテキストメニューを追加 (と更新、削除) することもできます。メニュー項目を作成するには id、タイトル、表示するコンテキストメニューを指定します。</p> + +<pre class="brush: js">browser.contextMenus.create({ + id: "log-selection", + title: browser.i18n.getMessage("contextMenuItemSelectionLogger"), + contexts: ["selection"] +}, onCreated);</pre> + +<p>拡張機能はメニュー項目のクリックをリッスンします。項目がクリックされたことや、どのコンテキストメニューでクリックされたかや、クリックが行われたタブの詳細などの情報が渡されて、適切に拡張機能の機能が実行されるのに使われます。</p> + +<pre class="brush: js">browser.contextMenus.onClicked.addListener(function(info, tab) { + switch (info.menuItemId) { + case "log-selection": + console.log(info.selectionText); + break; + ... + } +})</pre> + +<h2 id="アイコン">アイコン</h2> + +<p>コンテキストメニューで使うアイコンの作り方の詳細は、<a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a>の文書内の <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconography</a> を見てください。</p> + +<h2 id="例">例</h2> + +<p>GitHub の <a class="external external-icon" href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> リポジトリには、コンテキストメニュー項目を実装した2つの拡張機能の実例があります:</p> + +<ul> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/menu-demo">menu-demo</a> ではブラウザーのコンテキストメニューにいくつかの項目を追加しています。</li> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/context-menu-copy-link-with-types">context-menu-copy-link-with-types</a> では、リンクの URL を、プレーンテキストとリッチ HTML としてクリップボードにコピーするコンテキストメニュー項目を追加してます。</li> +</ul> +</div> diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html new file mode 100644 index 0000000000..2df3fb0641 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html @@ -0,0 +1,66 @@ +--- +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 +--- +<div>{{AddonSidebar}}</div> + +<div class="note"> +<p>この機能は Firefox 54 以降で利用できます。</p> +</div> + +<p>拡張機能が開発者に使われるツールを提供するとき、ブラウザーの開発ツールに、新しいパネルとしてUIを追加できます。</p> + +<p><img alt='Simple example showing the addition of "My panel" to the Developer Tools tabs.' src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="display: block; height: 112px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<h2 id="Specifying_a_developer_tools_panel" name="Specifying_a_developer_tools_panel">開発ツールパネルを指定する</h2> + +<p>開発ツールパネルは <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels">devtools.panels</a></code> API を使って追加され、特別な開発ツールページから順番に実行されます。</p> + +<p>開発ツールのページを追加するには、拡張機能の <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> に <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page">devtools_page</a></code> キーを入れて、 拡張機能内のそのページの HTML ファイルの場所を与えます:</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"devtools_page":</span> <span class="string token">"devtools-page.html"</span></code></pre> + +<p>開発ツールのページから、開発ツールパネルに追加するスクリプトを呼び出します:</p> + +<pre class="brush: html"><body> + <script src="devtools.js"></script> +</body></pre> + +<p>スクリプトの中では、パネルのタイトル、アイコン、そのコンテンツを与えるHTMLファイルを指定して、開発ツールパネルを作成します:</p> + +<pre class="brush: 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); +});</pre> + +<p>拡張機能はインスペクターウィンドウの中で <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval"><code>devtools</code>.inspectedWindow.eval()</a></code> を使うか、バックグラウンドスクリプトからメッセージを渡してコンテンツスクリプトに挿入することで、コードを実行できます。この方法のより詳しくは <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> を見てください。</p> + +<h2 id="Examples" name="Examples">開発パネルのデザイン</h2> + +<p>開発パネルのウェブページを Firefox のスタイルにマッチさせる方法の詳細は <a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a> の文書を見てください。</p> + +<h2 id="アイコン">アイコン</h2> + +<p>開発ツールパネルに使うアイコン作成方法の詳細は <a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a> の文書の<a href="https://design.firefox.com/photon/visuals/iconography.html">Iconography</a> を見てください。</p> + +<h2 id="例">例</h2> + +<p>GitHub の <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> リポジトリには開発ツールパネルを実装した <a href="https://github.com/mdn/webextensions-examples/blob/master/devtools-panels/">devtools-panels</a> の例があります。</p> diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html new file mode 100644 index 0000000000..a945d4d1fc --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html @@ -0,0 +1,70 @@ +--- +title: Extension pages +slug: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages +tags: + - Beginner + - User Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages +--- +<div>{{AddonSidebar()}}</div> + +<p><span class="seoSummary">拡張機能にはフォームやヘルプなど拡張機能が必要とするコンテンツを提供するためのHTMlを含めることができます。</span></p> + +<p><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="display: block; height: 216px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<p>拡張機能に含められた HTML ページは拡張機能がバックグラウンドで動作するのと同じ特権を持った JavaScript の API を利用できますが、これらのページはそれぞれのタブ、JavaScriptイベントキュー、グローバル変数を持ちます。</p> + +<p>バックグラウンドのページは「隠れた拡張ページ」と考えてください。</p> + +<h2 id="拡張ページを指定をする">拡張ページを指定をする</h2> + +<p>HTMLファイルと関連づけられた CSS や JavaScript ファイルを拡張機能に含めることができます。これらのファイルはルートに置くこともできますし、サブディレクトリに分けることもできます。</p> + +<pre>/my-extension + /manifest.json + /my-page.html + /my-page.js</pre> + +<h2 id="拡張ページを表示する">拡張ページを表示する</h2> + +<p>拡張ページを表示する際に2つの選択肢があります。それは、 {{WebExtAPIRef("windows.create()")}} と {{WebExtAPIRef("tabs.create()")}} です。</p> + +<p><code>windows.create()</code> を使うと、例えば、HTML ファイルを detached panel (アドレスバー、ブックマークバーなどといったブラウザ UI がないウィンドウ) 開くことができ、ダイアログのようなユーザーエクスペリエンスを実現できます:</p> + +<pre class="brush: js">var createData = { + type: "detached_panel", + url: "panel.html", + width: 250, + height: 100 +}; +var creating = browser.windows.create(createData);</pre> + +<p>ウィンドウが必要なくなったときは JavaScript で閉じることができます。例えば、以下の例では、ユーザーがボタンをクリックしたときに {{WebExtAPIRef("windows.remove()")}} にウィンドウ の ID を渡しています:</p> + +<pre class="brush: js">document.getElementById("closeme").addEventListener("click", function(){ + var winId = browser.windows.WINDOW_ID_CURRENT; + var removing = browser.windows.remove(winId); +}); </pre> + +<h2 id="拡張ページと履歴">拡張ページと履歴</h2> + +<p>デフォルトではこの方法で開かれたページは普通のウェブページを開いたときと同じように履歴に保存されます。履歴に保存したくない場合、 {{WebExtAPIRef("history.deleteUrl()")}} を使ってブラウザから履歴のレコードを削除することができます。</p> + +<pre class="brush: js" id="ct-4">function onVisited(historyItem) { + if (historyItem.url == browser.extension.getURL(myPage)) { + browser.history.deleteUrl({url: historyItem.url}); + } +} + +browser.history.onVisited.addListener(onVisited);</pre> + +<p>History API を使には <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a></code> で "history" <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a> をリクエストする必要があります。</p> + +<h2 id="ウェブページのデザイン">ウェブページのデザイン</h2> + +<p>Firefox のスタイルとマッチするようなデザインの方法の詳細は<a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a> と <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">browser styles</a> をお読みください。</p> + +<h2 id="例">例</h2> + +<p>GitHubの <a class="external external-icon" href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> リポジトリにはウィンドウの作成を実装する例である <a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/window-manipulator">window-manipulator</a> が含まれています。</p> diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/index.html new file mode 100644 index 0000000000..0ce45c98db --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/index.html @@ -0,0 +1,103 @@ +--- +title: ユーザーインターフェイス +slug: Mozilla/Add-ons/WebExtensions/user_interface +tags: + - Landing + - User Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface +--- +<div>{{AddonSidebar}}</div> + +<p>WebExtension API を使った機能拡張にはいくつかのユーザーインターフェイスオプションが提供されていて、ユーザーがこれによって機能を利用できます。この節では、下記にこのオプションの要約と、各ユーザーインターフェイスオプションの詳細な導入とがあります。</p> + +<div class="note"> +<p>あなたの機能拡張で、これらの UI コンポーネントを使って優れたユーザー体験を生むためのアドバイスとして、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">ユーザー体験のベストプラクティス</a> の記事を見てください。</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">UI オプション</th> + <th scope="col">記述</th> + <th scope="col" style="width: 350px;">例</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <p><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">ブラウザーツールバーボタン</a>(ブラウザーアクション)</p> + </td> + <td>ブラウザーツールバーのボタンで、クリック時に機能拡張にイベントを送る。既定では全てのタブででこのボタンが表示されている。</td> + <td><img alt="Example showing a toolbar button (browser action)." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></td> + </tr> + <tr> + <td> + <p><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">ポップアップ</a>付きのツールバーボタン</p> + </td> + <td>ボタンがクリックされた時の、ブラウザーツールバーのボタン上のポップアップ。ポップアップは、ユーザーインタラクションを扱う HTML 文書内で定義される。</td> + <td><img alt="Example of the pop-up on a toolbar button" src="https://mdn.mozillademos.org/files/15753/popup-shadow.png" style="height: 624px; width: 700px;"></td> + </tr> + <tr> + <td> + <p><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">アドレスバーボタン</a>(ページアクション)</p> + </td> + <td>ブラウザーアドレスバー上のボタンで、クリック時に機能拡張にイベントを送る。既定では、全てのタブでこのボタンは非表示。</td> + <td><img alt="Example showing an address bar button (page action) " src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="height: 348px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">ポップアップ</a>付きのアドレスバーボタン</td> + <td> + <p>ブラウザーアドレスバーのボタン上のポップアップで、クリック時に開く。ポップアップは、ユーザーインタラクションを扱う HTML 文書内で定義される。</p> + </td> + <td><img alt="Example of a popup on the address bar button" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="height: 524px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">コンテキストメニュー項目</a></td> + <td>ブラウザーのコンテキストメニュー上の、メニュー項目や、チェックボックスや、ラジオボタン。また、メニューはセパレーターを追加して構造化もできる。メニュー項目がクリックされたとき、機能拡張にイベントが送られる。</td> + <td><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="height: 942px; width: 864px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">サイドバー</a></td> + <td> + <p dir="ltr">ウェブページの隣に表示される HTML 文書で、ページ毎に固有なコンテンツを持つ。サイドバーは機能拡張がインストールされた時に開かれて、ユーザーのサイドバー可視化の選択に従う。サイドバー内のユーザーインタラクションは HTML 文書によって扱われる。</p> + </td> + <td><img alt="Example of a sidebar" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="height: 846px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">オプションページ</a></td> + <td>機能拡張に対してユーザーが変更できる設定値を決めるページ。ユーザーはブラウザーのアドオンマネージャーからこのページにアクセスできる。</td> + <td><img alt="Example showing the options page content added in the favorite colors example." src="https://mdn.mozillademos.org/files/15748/options_page.png"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/Add-ons/WebExtensions/user_interface/Extension_pages">Extension page</a></td> + <td>ウィンドウやタブの中で、フォームやヘルプやその他必要となるあらゆるコンテンツを提供するには、機能拡張に含めたウェブページを使います。</td> + <td><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="height: 432px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">通知</a></td> + <td>OS の通知の仕組みを通じてユーザーに表示される一時的な通知。ユーザーが通知をクリックした時や、(自動的に、あるいはユーザーが要求した場合の両方に)通知が閉じた時、機能拡張にイベントを送る。</td> + <td><img alt="Example of an extension triggered system notification" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="height: 294px; width: 780px;"></td> + </tr> + <tr> + <td><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">アドレスバーサジェスト</a></td> + <td>ユーザーがキーワードを入力した時のカスタムアドレスバーサジェスト</td> + <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="height: 464px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">開発ツールパネル</a></td> + <td>ブラウザーの開発ツール内で表示される、タブと関連 HTML 文書。</td> + <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></td> + </tr> + </tbody> +</table> + +<p>下記の方法ガイドにはユーザーインターフェイスオプションを作成するためのステップバイステップのガイドがあります。:</p> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Accessibility_guidelines">アクセシビリティガイドライン</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">ツールバーにボタンを追加する</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">ブラウザースタイル</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">開発ツールを拡張する</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">設定ページの実装</a></li> +</ul> diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/notifications/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/notifications/index.html new file mode 100644 index 0000000000..94658de2e8 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/notifications/index.html @@ -0,0 +1,50 @@ +--- +title: 通知 +slug: Mozilla/Add-ons/WebExtensions/user_interface/Notifications +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Notifications +--- +<div>{{AddonSidebar}}</div> + +<div> +<p><span class="seoSummary">通知では、OS の通知サービスを使って、拡張機能やそのコンテンツについての情報を通信することができます:</span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="display: block; height: 147px; margin-left: auto; margin-right: auto; width: 390px;"></p> + +<p>通知にはユーザーへのアクションの呼びかけを入れることができて、アドオンではユーザーによる通知のクリックや通知を閉じるのをリッスンできます。</p> + +<h2 id="Specifying_notifications" name="Specifying_notifications">通知を指定する</h2> + +<p>{{WebExtAPIRef("notifications")}} API を使って通知をプログラム的に管理できます。この API を使うには manifest.json 内で <code>notifications</code> パーミッションを要求する必要があります:</p> + +<pre class="brush: json"><span class="pl-s"><span class="pl-pds">"</span>permissions<span class="pl-pds">"</span></span>: [<span class="pl-s"><span class="pl-pds">"</span>notifications<span class="pl-pds">"</span></span>]</pre> + +<p>次に {{WebExtAPIRef("notifications.create")}} を使って通知を作成します。<a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> の例では次の通り:</p> + +<pre class="brush: js">var title = browser.i18n.getMessage("notificationTitle"); +var content = browser.i18n.getMessage("notificationContent", message.url); +browser.notifications.create({ + "type": "basic", + "iconUrl": browser.extension.getURL("icons/link-48.png"), + "title": title, + "message": content +});</pre> + +<p>このコードはアイコンや、タイトルや、メッセージつきの通知を作成します。</p> + +<p>通知にアクションの要求が含まれている場合、通知のクリックをリッスンしてアクションハンドラの関数を呼び出せます:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>notifications<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span> +</code></pre> + +<p>通知にてアクションの要求を発行している場合、オプションの通知の <code>id</code> を定義して、どのアクションをユーザーが選択したかがわかるようにすると良いでしょう。</p> + +<h2 id="Icons" name="Icons">アイコン</h2> + +<p>通知に使うアイコン作成方法の詳細は、<a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a>文書内の <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconography</a> を見てください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>GitHub の <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> リポジトリには通知を実装した <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> の実例があります。</p> +</div> diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/options_pages/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/options_pages/index.html new file mode 100644 index 0000000000..524223bc00 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/options_pages/index.html @@ -0,0 +1,65 @@ +--- +title: オプションページ +slug: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages +--- +<div>{{AddonSidebar}}</div> + +<div> +<p>オプションページでは、ユーザーから変更できるような拡張機能の設定画面を定義します。ユーザーはアドオンマネージャを通じて、アドオンのオプションページにアクセスできます。</p> + +<p>{{EmbedYouTube("eODy24csH5M")}}</p> + +<p>このページにユーザーがアクセスする方法や、ブラウザー UI との連携については各ブラウザーによって異なります。</p> + +<ul> +</ul> + +<p>このページは、プログラムから <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/Runtime/openOptionsPage" title="If your add-on does not have an options page, or the browser failed to create one for some other reason, runtime.lastError will be set."><code>runtime.openOptionsPage()</code></a> を呼び出して開くこともできます。</p> +オプションページにおけるリソースの読み込み元や、<code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> のように安全でない処理は Content Security Policy によって制限されます。詳細は <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a> を参照してください。 + +<h2 id="Specifying_the_options_page" name="Specifying_the_options_page">オプションページを指定する</h2> + +<p>オプションページを作成するには、ページを定義する HTML を書きます。このページは通常のページと同様に、CSS と JavaScript ファイルを入れることができます。このページは、 <a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a> の例から取ってきていて、JavaScript ファイルが含まれます:</p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + <head> + <meta charset="utf-8"> + </head> + +<body> + <form> + <label>Favourite colour</label> + <input type="text" id="colour" > + <button type="submit">Save</button> + </form> + <script src="options.js"></script> +</body> + +</html></pre> + +<p>ページ内で動く JavaScript はアドオンが<a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">権限</a>を持つすべての <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API">WebExtension APIs</a> を使うことができます。特に、設定を保管する <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/Storage" title="Enables WebExtensions to store and retrieve data, and listen for changes to stored items."><code>storage</code></a> API を使えます。</p> + +<p>ページファイルを拡張機能の中にパッケージします.</p> + +<p>manifest.json 内に <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> キーも必要です、ここではページの URL を与えます。</p> + +<pre class="brush: json">"options_ui": { + "page": "options.html", + "browser_style": true +},</pre> + +<p><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> ページを見てオプションページとバックグラウンド/コンテンツスクリプトとの間で<strong>オプションを共有する</strong>ことができます。</p> + +<h2 id="Examples" name="Examples">オプションコンテンツのデザイン</h2> + +<p>Firefox のスタイルにマッチするオプションコンテンツをデザインする方法は <a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a> の文書を見てください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>GitHub の <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> リポジトリでは、オプションページを使う拡張機能の <a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a> の例があります。</p> +</div> diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/page_actions/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/page_actions/index.html new file mode 100644 index 0000000000..c285ad2670 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/page_actions/index.html @@ -0,0 +1,50 @@ +--- +title: アドレスバーボタン +slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +tags: + - User Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +--- +<div>{{AddonSidebar}}</div> + +<p>よく<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">ページアクション</a>として参照され、このユーザーインターフェイスオプションはブラウザーのアドレスバーに追加されるボタンです。ユーザーはボタンをクリックして拡張機能とやりとりします。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12960/page-action.png" style="display: block; height: 262px; margin-left: auto; margin-right: auto; width: 850px;"></p> + +<p>ウェブページに関係する機能のある時だけにこのボタンを使ってください。既定ではアドレスバーのボタンはすべてのタブにて隠されていて、<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/show" title="Shows the page action for a given tab. The page action is shown whenever the given tab is the active tab."><code>pageAction.show()</code></a> と <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/hide" title="Hides the page action for a given tab."><code>pageAction.hide()</code></a> を呼び出すことで、特定のタブ上での表示・非表示を制御します。</p> + +<p><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Browser_action">ツールバーボタン</a>と比較して、似た振る舞いをしますが、そちらは拡張機能の機能が大抵のウェブページに適用できる状況で使われます。</p> + +<h2 id="Specifying_the_page_action" name="Specifying_the_page_action">ページアクションを指定する</h2> + +<p>ページアクションのプロパティは manifest.json の <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> キーで定義します。</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"page_action":</span> <span class="punctuation token">{</span> + <span class="key token">"browser_style":</span> <span class="keyword token">true</span><span class="punctuation token">,</span> + <span class="key token">"default_icon":</span> <span class="punctuation token">{</span> + <span class="key token">"19":</span> <span class="string token">"button/geo-19.png"</span><span class="punctuation token">,</span> + <span class="key token">"38":</span> <span class="string token">"button/geo-38.png"</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="key token">"default_title":</span> <span class="string token">"Whereami?"</span> +<span class="punctuation token">}</span></code></pre> + +<p>唯一不可欠なキーは <code>default_icon</code> です。</p> + +<p>ページアクションの指定には2つの方法があります: <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Popups">ポップアップ</a>がつくのとつかないのです。 ポップアップを指定しないと、ユーザーがボタンをクリックした時に、拡張機能にイベントがディスパッチされ、これを拡張機能が <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>pageAction.onClicked</code></a>を使ってリッスンします:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>ポップアップを指定すると、クリックイベントはディスパッチされません: その代わりに、ユーザーがボタンをクリックした時にポップアップが表示されます。ユーザーはポップアップとやりとりできて、ユーザーが範囲外をクリックした時に自動的にポップアップが閉じます。ポップアップを作成、管理することの詳細は<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Popups">ポップアップ</a>の記事を見てください。</p> + +<p>拡張機能は1つだけのページアクションを持つ必要があります。</p> + +<p>なお、上に示されている任意のプロパティは<code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a></code> API を使ったコードからも変更できます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>GitHub の <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> リポジトリには、ページアクションを使う拡張機能の例がいくつかあります:</p> + +<ul> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/chill-out">chill-out</a> はポップアップなしのページアクションを使います。</li> +</ul> diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/popups/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/popups/index.html new file mode 100644 index 0000000000..7ca9f6f69d --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/popups/index.html @@ -0,0 +1,59 @@ +--- +title: ポップアップ +slug: Mozilla/Add-ons/WebExtensions/user_interface/Popups +tags: + - UI + - User Interface + - WebExtensions + - popup +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Popups +--- +<div>{{AddonSidebar}}</div> + +<div> +<p>ポップアップは<a href="/ja/Add-ons/WebExtensions/Browser_action">ツールバーボタン</a>や<a href="/ja/Add-ons/WebExtensions/Page_actions">アドレスバーボタン</a>に関連したダイアログです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="display: block; height: 282px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<p>ユーザーがボタンをクリックした時、ポップアップが表示されます。ポップアップの外をクリックすると、ポップアップは閉じます。ポップアップは、そこで実行しているスクリプトから <code><a href="https://developer.mozilla.org/ja/docs/Web/API/Window/close">window.close()</a></code> を呼ぶとプログラム的に閉じられます。しかし、拡張機能の JavaScript からプログラム的に開くことはできません。つまりユーザー操作への反応としてだけ開きます。</p> + +<p><code>"_execute_browser_action"</code> と <code>"_execute_page_action"</code> ショートカットを使って、ポップアップを開くキーボードショートカットを定義できます。manifest.json の <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands">commands</a></code><span style="display: none;"> </span> キーの文書を見てください。</p> + +<h2 id="Specifying_a_popup" name="Specifying_a_popup">ポップアップを指定する</h2> + +<p>通常の Web ページと同じく、ポップアップは HTML ファイルで定義されます(ここに CSS や JavaScript も含めることが可能です)。 ただし、拡張機能が持つ<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/permissions">パーミッション</a>の範囲で JavaScript から <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API">WebExtension API</a> にアクセスできる点で通常のものとは異なります。</p> + +<p>ポップアップの文書はポップアップが表示されるたびに読み込まれて、ポップアップが閉じるたびに開放されます。</p> + +<p>HTML ファイルを拡張機能に入れるには、manifest.json内の <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> か <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a> キーの <code>"default_popup"</code> にて指定します:</p> + +<pre class="brush: json"> "browser_action": { + "default_icon": "icons/beasts-32.png", + "default_title": "Beastify", + "default_popup": "popup/choose_beast.html" + }</pre> + +<p>ブラウザーの UI と統一感を持たせるスタイルシートをポップアップに組み込めるようになりました。これを利用するためには、<code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> か <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a> キーで <code>"browser_style": true</code> を指定してください。</p> + +<p>ポップアップにおけるリソースの読み込み元や、<code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> のように安全でない処理は Content Security Policy によって制限されます。詳細は <a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a> を参照してください。</p> + +<h2 id="Debugging_popups" name="Debugging_popups">ポップアップのデバッグ</h2> + +<p>ポップアップのマークアップと JavaScript をアドオンデバッガーを使ってデバッグできます。しかしポップアップの自動非表示を不可として、ポップアップの外をクリックした時に隠れてしまうのを防ぐ必要があります。<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Debugging#Debugging_popups">ポップアップのデバッグを読んでください</a>。</p> + +<h2 id="Popup_resizing" name="Popup_resizing">ポップアップのリサイズ</h2> + +<p>ポップアップはその中身に合わせて自動的にリサイズされます。ブラウザーごとにこのアルゴリズムは違う場合があります。</p> + +<p>Firefox では、サイズはポップアップが表示される直前に計算されて、最大で毎秒10回のDOM変形があります。strict モードの文書では、サイズは <code><a href="/ja/docs/Web/HTML/Element/body"><body></a></code> 要素のレイアウトサイズに基いて計算されます。quirks モードでは、これは <code><a href="/ja/docs/Web/HTML/Element/html"><html></a></code> 要素です。Firefox はその要素の好ましい幅を計算して、その幅にリフローして、縦のスクロールがないようにリサイズします。最大で <strong><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1434177">800</a></strong><strong>x600 ピクセル</strong> の範囲でユーザーの画面にフィットさせます。(Firefox 60以前では680ピクセルまでとなります。)ユーザーが<a href="https://support.mozilla.org/en-US/kb/customize-firefox-controls-buttons-and-toolbars#w_customize-the-menu-or-the-toolbar">拡張機能のボタンをメニューに動かした</a>り、ツールバーからオーバーフローした場合、ポップアップはメニューのパネル内に出てきて、固定の幅となります。</p> + +<p>Firefox Android 57 では、ポップアップは新規タブの通常ページとして表示されます。</p> + +<h2 id="Popup_design" name="Popup_design">ポップアップのデザイン</h2> + +<p>Firefox のスタイルにマッチするポップアップのウェブページをデザインする方法は、<a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a> の文書を見てください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>GitHub の <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> リポジトリには、ポップアップ付きブラウザーアクションを使う拡張機能の <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a> の例があります。</p> +</div> diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/sidebars/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/sidebars/index.html new file mode 100644 index 0000000000..2034198dc6 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/sidebars/index.html @@ -0,0 +1,55 @@ +--- +title: サイドバー +slug: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars +--- +<div>{{AddonSidebar}}</div> + +<div> +<p>サイドバーはブラウザーウィンドウの横側の、ウェブページの隣に表示されるペイン(枠)です。ブラウザーはユーザーに、 現在利用しているサイドバーを表示するUIと表示させるサイドバーを選ぶUIを提供します。例えば、Firefox には"表示 > サイドバー" メニューがあります。サイドバーは同時に一つだけ表示できて、すべてのタブとすべてのブラウザーウィンドウに表示されます。</p> + +<p>ブラウザーにはいくつかの組み込み済みのサイドバーがあります。例えば、Firefox にはブックマークと連携するサイドバーがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="display: block; height: 423px; margin-left: auto; margin-right: auto; width: 350px;"> <code>sidebar_action</code> というmanifest.json キーを使って、拡張機能はブラウザーに独自のサイドバーを追加できます。それは組み込みのサイドバーと一緒に一覧表示され、ユーザーが組み込みサイドバーと同じメカニズムで開くことができます。</p> + +<p>"browser action"ポップアップと同様に、サイドバーのコンテンツを HTML 文書で指定できます。ユーザーがサイドバーを開く時、サイドバーの文書がブラウザーである各ウィンドウへと読み込まれます。各ウィンドウは独立した環境のインスタンスを保持します。新しいウィンドウが開いた時も同様に独自にサイドバー文書を保持します。</p> + +<p>{{WebExtAPIRef("sidebarAction.setPanel()")}} 関数を使って特定のタブに文書をセットできます。サイドバーはどこのウィンドウに所属しているのかを、 {{WebExtAPIRef("windows.getCurrent()")}} APIを使ってできます。</p> + +<pre class="brush: js">// sidebar.js +browser.windows.getCurrent({populate: true}).then((windowInfo) => { + myWindowId = windowInfo.id; +});</pre> + +<p>これは、windowごとに出しわけしたいときに有用な方法です。参考例としてこちらを参照してください。 <a href="https://github.com/mdn/webextensions-examples/tree/master/annotate-page">"annotate-page"</a>.</p> + +<p>Sidebar documents は backgroundや popupスクリプトと同じ特権のJavaScript APIs にアクセスできます。 background page に{{WebExtAPIRef("runtime.getBackgroundPage()")}}を使いアクセスできます(incognito mode windowでなければ(訳注:プライベートタブのことかと思います))。そして {{WebExtAPIRef("tabs.sendMessage()")}} や {{WebExtAPIRef("runtime.sendNativeMessage()")}}のように messeagin APIを使って、 content scripts や ネイティブアプリケーションと連携することが可能です。</p> + +<p>Sidebar documents はウィンドウのクローズ時かユーザがサイドバーを閉じた時にunloadされます。このように backgroundと違って常に生きているわけではありませんがポップアップと違い、ユーザがWebページと連携している間読み込まれたままでいられます。</p> + +<p>サイドバーは初回インストール時に自動で開きます。これは拡張機能にサイドバーがあることをユーザに理解させてくれます。ただしプログラム的にサイドバーを開くことはできません。ユーザのみが開くことができます(訳注:ちなみにブラウザのツールバーボタンを押したときにサイドバーを開くプログラムは動作する)。</p> + +<h2 id="Specifying_sidebars" name="Specifying_sidebars">サイドバーを指定する</h2> + +<p>サイドバーを使うには初期起動documentを <code><a href="/ja/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code> セクションとしてmanifest.json に a default title とiconとともに設定します。</p> + +<pre class="brush: json">"sidebar_action": { + "default_title": "My sidebar", + "default_panel": "sidebar.html", + "default_icon": "sidebar_icon.png" +}</pre> + +<p>これら3つは同時に、{{WebExtAPIRef("sidebarAction")}} API を使ってプログラム的に変更可能です。</p> + +<p>Title とicon は UIとしてブラウザがサイドバーのリストアップをするときユーザに示す内容です。例えば Firefoxの "表示> サイドバー" メニューで見ることができます。</p> + +<h2 id="Examples" name="Examples">サイドバーデザイン</h2> + +<p>Firefox スタイルにサイドバーをマッチさせる方法の詳細は次の文書を参考にしてください。 <a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a>.</p> + +<h2 id="例">例</h2> + +<p>GitHub 上の<a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repository に、サイドバーを実装した例として<a href="https://github.com/mdn/webextensions-examples/tree/master/annotate-page">annotate-page</a> があります(訳注:annotateは注釈を意味します。サンプルはざっと見たところサイドバー上のメモ機能のようです)。</p> +</div> |