blob: 1ec5a5acedb577485def513017ad9b593ec84a9b (
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: Toolbar button
slug: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action
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">浏览器动作（browser action）</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>工具栏按钮（browser action）与地址栏按钮（page action）极为相似。区分其不同点及使用，请参看 <a href="/en-US/Add-ons/WebExtensions/user_interface/Page_actions#Page_actions_and_browser_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">"Whereami?"</span>
<span class="punctuation token">}</span></code></pre>
<p>必须定义的键是 <code>default_icon</code>.</p>
<p>有两种方法来指定浏览器动作：带弹出框（<a href="/en-US/Add-ons/WebExtensions/Popups">popup</a>）和不带弹出框（<a href="/en-US/Add-ons/WebExtensions/Popups">popup</a>）。</p>
<p>如果不指定弹出框，当用户点击按钮时，点击事件将被发送至扩展，而扩展可用以下函数来捕获 <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">Popup </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">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> 中有两个实现浏览器动作的例子：</p>
<ul>
<li><a href="https://github.com/mdn/webextensions-examples/blob/master/bookmark-it/">bookmark-it</a> uses a browser action without a popup.</li>
<li><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a> uses a browser action with a popup.</li>
</ul>
|
