1 files changed, 51 insertions, 0 deletions
diff --git a/files/es/mozilla/add-ons/webextensions/user_interface/browser_action/index.html b/files/es/mozilla/add-ons/webextensions/user_interface/browser_action/index.html
new file mode 100644
index 0000000000..852314f536
--- /dev/null
+++ b/files/es/mozilla/add-ons/webextensions/user_interface/browser_action/index.html
@@ -0,0 +1,51 @@
+---
+title: Botón de la Barra de Herramientas
+slug: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action
+tags:
+  - WebExtension
+translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action
+original_slug: Mozilla/Add-ons/WebExtensions/user_interface/Accion_navegador
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Generalmente referidas como <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">acciones de navegador</a>, esta opción de interfaz de usuario corresponde a un botón agregado a la barra de herramientas del navegador. Los usuarios pueden hacer click en el botón para interactuar con tu extensión.<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>El botón de la barra de herramientas (acción de navegador) es muy parecido al botón de la barra de direcciones (acción de página). Para conocer las diferencias y obtener consejo en cuándo usar qué tipo de botón, te recomendamos ver <a href="/en-US/Add-ons/WebExtensions/user_interface/Page_actions#Page_actions_and_browser_actions">Acciones de página y acciones de navegador</a>.</p>
+
+<h2 id="Especificando_la_acción_de_navegador">Especificando la acción de navegador</h2>
+
+<p>Puedes definir las propiedades de la acción de navegador utilizando la llave <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> del archivo manifest.json:</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>El único campo obligatorio es <code>default_icon</code>.</p>
+
+<p>Existen dos formas de especificar una acción de navegador: con o sin una <a href="/en-US/Add-ons/WebExtensions/Popups">ventana emergente</a>. Si no especificas una ventana emergente, se le entregará un evento a la extensión cada vez que el usuario haga click en el botón. El evento es escuchable usando <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>En cambio, si especificas una ventana emergente, el evento de click no es despachado al hacer click en el botón: en su lugar, la ventana emergente es mostrada. El usuario podrá interactuar con la ventana emergente, la cual se cerrará automáticamente cada vez que el usuario haga click fuera de ella. Te recomendamos revisar el artículo de <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Popups">ventanas emergentes</a> para conocer más detalles sobre la creación y administración de éstas.</p>
+
+<p>Cabe destacar que tu extensión puede tener solamente una acción de navegador.</p>
+
+<p>Puedes cambiar cualquier propiedad de la acción de navegador de forma programática, utilizando la API <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code>.</p>
+
+<h2 id="Íconos">Íconos</h2>
+
+<p>Para más detalles sobre cómo crear íconos para usarlos en tu acción de navegador, revisa <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconografía</a> en la documentación del <a href="https://design.firefox.com/photon/index.html">Sistema de Diseño Photon</a>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>El repositorio de GitHub <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> contiene dos ejemplos de extensiones que implementan acciones de navegador:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/webextensions-examples/blob/master/bookmark-it/">bookmark-it</a> usa una acción de navegador sin una ventana emergente.</li>
+ <li><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a> usa una acción de navegador con una ventana emergente.</li>
+</ul>