blob: afdf61f340e20a284f79a17d15d8160caa64aad1 (
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/Browser_action
tags:
- 擴充套件
translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action
---
<div>{{AddonSidebar}}</div>
<p>根據<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">工具列按鈕</a>，這個用戶介面是一個加到瀏覽器工具列的按鈕。用戶透過點擊按鈕來與你的套件互動。<br>
<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;"></p>
<p>工具列按鈕與網址列按鈕非常相似。關於差別以及何時該使用的指引，詳閱<a href="/en-US/Add-ons/WebExtensions/user_interface/Page_actions#Page_actions_and_browser_actions">工具列按鈕。</a></p>
<h2 id="詳細指定工具列按鈕">詳細指定工具列按鈕</h2>
<p>透過在 manifest.json 中使用 <code><a href="https://developer.mozilla.org/en-US/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">"我在哪？"</span>
<span class="punctuation token">}</span></code></pre>
<p>唯一一個強制的鍵只有 <code>default_icon</code>。</p>
<p>指定工具列按鈕的方式有兩種： 有<a href="/en-US/Add-ons/WebExtensions/Popups">彈出視窗</a>跟沒有<a href="/en-US/Add-ons/WebExtensions/Popups">彈出視窗</a>。如果你不指定彈出視窗，當用戶點擊按鈕事件會被傳送到套件，而套件透過 <a href="https://developer.mozilla.org/en-US/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="/en-US/Add-ons/WebExtensions/Popups">彈出視窗</a>文章。</p>
<p>註： 你的套件只能有一個工具列按鈕。</p>
<p>你可以透過 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code> API 程式化地更改任何工具列按鈕的屬性。</p>
<h2 id="圖示">圖示</h2>
<p>更多關於建立工具列按鈕使用的圖示，請查看文件<a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">光子設計系統</a>裡的<a href="https://design.firefox.com/photon/visuals/iconography.html">圖示學</a>。</p>
<h2 id="範例">範例</h2>
<p>GitHub上的<a href="https://github.com/mdn/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>
|
