path: root/files/zh-cn/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html

---
title: Add a button to the toolbar
slug: Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar
translation_of: Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar
---
<div>{{AddonSidebar}}</div>

<div>工具栏按钮是webextensions的一种主要UI组件，它在浏览器的工具栏中作为图标显示。当用户点击图标时，就会发生下面两种事件中的一样：</div>

<ul>
 <li>如果按钮有弹出菜单，则显示该弹出。 弹出菜单是一个临时对话，它必须使用HTML，CSS，JavaScript语言表示。</li>
 <li>如果没有弹出菜单, 则生成一个单击事件, 你可以在代码中监听该事件并执行其他响应。</li>
</ul>

<p>在WebExtensions中这种按钮被称为浏览器行为按钮，它们可以像下面这样生成：</p>

<ul>
 <li>manifest.json 文件中的键 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> 被用来定义按钮。</li>
 <li>JavaScript 接口 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code> 被用来监听单击和更改按钮，或通过代码执行操作。</li>
</ul>

<h2 id="一个简单的按钮">一个简单的按钮</h2>

<p>在这一节中我们将创建一个工具栏按钮的 WebExtension 。当用户单击按钮时，会打开一个<a href="https://developer.mozilla.org">https://developer.mozilla.org</a> 的新标签页.</p>

<p>首先，新建名为 "button"的文件夹, 在该文件夹下创建名为"manifest.json" 的文件，内容如下:</p>

<pre class="brush: json">{

  "description": "Demonstrating toolbar buttons",
  "manifest_version": 2,
  "name": "button-demo",
  "version": "1.0",

  "background": {
    "scripts": ["background.js"]
  },

  "browser_action": {
    "default_icon": {
      "16": "icons/page-16.png",
      "32": "icons/page-32.png"
    }
  }

}</pre>

<p>上面内容显示有一个名为“ background .js ”后台脚本，以及在“ icons ”文件夹下的浏览器行为按钮图标。</p>

<div class="pull-aside">
<div class="moreinfo">These icons are from the <a href="https://www.iconfinder.com/iconsets/bitsies">bitsies!</a> iconset created by Recep Kütük.</div>
</div>

<p>接下来，在"buttons" 文件夹下创建 "icons" 文件夹，在该文件夹下存放下面的图标文件 ：</p>

<ul>
 <li>"page-16.png" (<img alt="" src="https://mdn.mozillademos.org/files/13476/page-16.png" style="height: 16px; width: 16px;">)</li>
 <li>"page-32.png" (<img alt="" src="https://mdn.mozillademos.org/files/13478/page-32.png" style="height: 32px; width: 32px;">).</li>
</ul>

<div style=""> </div>

<p>我们有两个图标，大图标用于在高分辨率状态下显示。浏览器会自动选择合适的图标。</p>

<p>接着,在附加组件的根目录下创建 "background.js"文件 , 内容如下：</p>

<pre class="brush: js">function openPage() {
  browser.tabs.create({
    url: "https://developer.mozilla.org"
  });
}

browser.browserAction.onClicked.addListener(openPage);</pre>

<p>该文件用来监听浏览器单击事件。当单击事件发生时运行 <code>openPage()</code> 函数，这个函数通过使用<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs">tabs</a></code> 接口加载指定的页面。</p>

<p>现在完整的附加组件看上去应该像下面这样：</p>

<pre class="line-numbers  language-html"><code class="language-html">button/
    icons/
        page-16.png
        page-32.png
    background.js
    manifest.json</code></pre>

<p>安装这个<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">WebExtension</a> ，然后单击按钮：</p>

<p>{{EmbedYouTube("kwwTowgT-Ys")}}</p>

<h2 id="添加一个弹出菜单">添加一个弹出菜单</h2>

<p>尝试在按钮上添加一个弹出菜单。 修改 "manifest.json"如下:</p>

<pre class="brush: json">{

  "description": "Demonstrating toolbar buttons",
  "manifest_version": 2,
  "name": "button-demo",
  "version": "1.0",

  "browser_action": {
    "browser_style": true,
    "default_popup": "popup/choose_page.html",
    "default_icon": {
      "16": "icons/page-16.png",
      "32": "icons/page-32.png"
    }
  }

}</pre>

<p>我们把原文件做了三处改变:</p>

<ul>
 <li>我们不需要引用“ background.js ”文件，因为会在弹出菜单的脚本中处理该行为 (你也可以使用“background.js“来运行一个弹出窗口，只是现在我们不需要这么做).</li>
 <li>我们添加了<code>"browser_style": true</code>, 使弹出样式看上去更像是浏览器的一部分。</li>
 <li>最后，我们添加 <code>"default_popup": "popup/choose_page.html"</code>, 告诉浏览器按钮被单击时弹出菜单，菜单的内容则在"popup/choose_page.html"页面中.</li>
</ul>

<p>现在我们要创建弹出菜单。新建名为 "popup" 的文件夹，然后在文件夹内创建"choose_page.html" 文件，该文件内容如下：</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;

&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="stylesheet" href="choose_page.css"/&gt;
  &lt;/head&gt;

&lt;body&gt;
  &lt;div class="page-choice"&gt;developer.mozilla.org&lt;/div&gt;
  &lt;div class="page-choice"&gt;support.mozilla.org&lt;/div&gt;
  &lt;div class="page-choice"&gt;addons.mozilla.org&lt;/div&gt;
  &lt;script src="choose_page.js"&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</pre>

<p>你会发现这是一个普通的HTML页面，它包含三个 {{htmlelement("div")}}元素，在每个元素中有一个Mozilla页面地址。另外还包括一个 CSS文件和一个JavaScript文件，我们会在后面添加它们。</p>

<p>在 "popup" 文件夹下，创建名为 "choose_page.css" 的文件，内容如下：</p>

<pre class="brush: css">html, body {
  width: 300px;
}

.page-choice {
  width: 100%;
  padding: 4px;
  font-size: 1.5em;
  text-align: center;
  cursor: pointer;
}

.page-choice:hover {
  background-color: #CFF2F2;
}</pre>

<p>这是我们弹出菜单的部分样式。</p>

<p>接着，在 "popup" 文件夹下，创建名为 "choose_page.js" 的文件，内容如下：</p>

<pre class="brush: js">document.addEventListener("click", function(e) {
  if (!e.target.classList.contains("page-choice")) {
    return;
  }

  var chosenPage = "https://" + e.target.textContent;
  browser.tabs.create({
    url: chosenPage
  });

});</pre>

<p>在我们的脚本中，我们会监听单击的弹出项。首先检查单击的对象是否在给出的页面选择项中，如果不在，则不做任何处理；如果在，则从单击的页面选择项中获取URL地址，然后打开一个对应页面的新标签页。注意：我们在弹出脚本中使用WebExtension接口，和在后台脚本中使用接口一样。</p>

<p>附加组件的结构最后看上去应该像下面这样：</p>

<pre>button/
    icons/
        page-16.png
        page-32.png
    popup/
        choose_page.css
        choose_page.html
        choose_page.js
    manifest.json</pre>

<p>重新加载附加组件，再次单击按钮，并尝试在弹出菜单中单击某个选择项：</p>

<p>{{EmbedYouTube("QPEh1L1xq0Y")}}</p>

<h2 id="页面行为">页面行为</h2>

<p>页面行为<a href="/en-US/Add-ons/WebExtensions/User_interface_components#Page_actions">（Page actions）</a> 类似浏览器行为，只是页面行为仅针对特定页面，而浏览器行为则全局有效。</p>

<p>由于浏览器行为总是发生，而页面行为只在特定页面显示。所以页面行为按钮在URL地址栏中显示，而浏览器行为按钮则在浏览器工具栏中显示。</p>

<h2 id="了解更多">了解更多</h2>

<ul>
 <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> manifest key</li>
 <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code> API</li>
 <li>Browser action examples:
  <ul>
   <li><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a></li>
   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/bookmark-it">Bookmark it!</a></li>
   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a></li>
   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/inpage-toolbar-ui">inpage-toolbar-ui</a></li>
   <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/open-my-page-button">open-my-page-button</a></li>
  </ul>
 </li>
 <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> manifest key</li>
 <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a></code> API</li>
 <li>Page action examples:
  <ul>
   <li><a href="https://github.com/mdn/webextensions-examples/tree/master/chill-out">chill-out</a></li>
  </ul>
 </li>
</ul>