-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
92 lines (66 loc) · 5.06 KB
/
index.md
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
---
title: アドレスバーボタン
slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions
---
{{AddonSidebar}}
このユーザーインターフェイスオプションは、ブラウザーのアドレスバーに追加されるボタンで、よく[ページアクション](/ja/docs/Mozilla/Add-ons/WebExtensions/API/pageAction)と呼ばれます。ユーザーはボタンをクリックして拡張機能を操作します。
![](address_bar_button.png)
## ページアクションとブラウザーアクション
アドレスバーボタン(またはページアクション)は、ツールバーボタン(またはブラウザーアクション)と似ています。
違いは次の通りです。
- **ボタンの位置**
- ページアクションは、ブラウザーのアドレスバーの中に表示されます。
- ブラウザーアクションは、ブラウザーのツールバー内で、アドレスバーの外側に表示されます。
- **ボタンの表示の有無**
- ページアクションは既定で非表示であり(この既定値は `show_matches` および `hide_matches` [マニフェストキー](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action)プロパティで変更できます)、 [`pageAction.show()`](/ja/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/show) および [`pageAction.hide()`](/ja/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/hide) を呼び出すことで、特定のタブを表示と非表示を切り替えることができます。
- ブラウザーアクションは常に表示されます。
ページアクションは、現在のページに関連するアクションのときに使用します。ブラウザーアクションは、ブラウザー全体または複数のページに関連するアクションを実行するときに使用します。たとえば、以下のようになります。
<table class="fullwidth-table standard-table">
<thead>
<tr>
<th scope="row">種別</th>
<th scope="col">ブックマークアクション</th>
<th scope="col">コンテンツアクション</th>
<th scope="col">タブ操作</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">ページアクション</th>
<td>このページをブックマーク</td>
<td>再編集の拡張</td>
<td>タブの送信</td>
</tr>
<tr>
<th scope="row">ブラウザーアクション</th>
<td>すべてのブックマークの表示</td>
<td>広告ブロックの有効化</td>
<td>すべての開いているタブを同期</td>
</tr>
</tbody>
</table>
## ページアクションの設定
ページアクションのプロパティは manifest.json の [`page_action`](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action) キーで定義します。
```json
"page_action": {
"browser_style": true,
"default_icon": {
"19": "button/geo-19.png",
"38": "button/geo-38.png"
},
"default_title": "Whereami?"
}
```
唯一不可欠なキーは `default_icon` です。
ページアクションの設定には 2 つの方法があります。[ポップアップ](/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups)があるものと、ないものです。
- **ポップアップがない**場合、ユーザーがボタンをクリックした時に、拡張機能にイベントが配信され、これを拡張機能が [`pageAction.onClicked`](/ja/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/onClicked)を使って待ち受けします。
```js
browser.pageAction.onClicked.addListener(handleClick);
```
- **ポップアップがある**場合、クリックイベントは配信されません。その代わりに、ユーザーがボタンをクリックした時にポップアップが表示されます。ユーザーはポップアップを操作することができます。ユーザーがポップアップの外をクリックした場合は、自動的に閉じます。ポップアップを作成したり管理したりすることについての詳細は、[ポップアップ](/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups)の記事を参照してください。
なお、拡張機能が持つことができるページアクションは 1 つだけです。
ページアクションのプロパティはすべて、 [`pageAction`](/ja/docs/Mozilla/Add-ons/WebExtensions/API/pageAction)` API を使用してプログラムから変更することができます。
## アイコン
For details on how to create icons to use with your page action, see [Iconography](https://design.firefox.com/photon/visuals/iconography.html) in the [Photon Design System](https://design.firefox.com/photon/index.html) documentation.
## 例
GitHub の [webextensions-examples](https://github.com/mdn/webextensions-examples) リポジトリーには、ページアクションを使う拡張機能の例がいくつかあります。 [chill-out](https://github.com/mdn/webextensions-examples/tree/master/chill-out) はポップアップなしのページアクションを使います。