blob: 94658de2e8698204eb53397d8085dfaf633228c2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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>
|
