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
|
---
title: Itens do menu de contexto
slug: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items
tags:
- WebExtensions
translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items
original_slug: Mozilla/Add-ons/WebExtensions/user_interface/Itens_do_menu_de_contexto
---
<div>{{AddonSidebar}}</div>
<div>
<p><span class="seoSummary">Esta opção da interface de usuário adiciona um ou mais itens para o menu de contexto do navegador.</span>Este é o menu de contexto disponível quando um usuário clica com o botão direito numa página web. As guias também podem ter menus de contexto, disponível através da API <a href="/en-US/Add-ons/WebExtensions/API/menus">browser.menus</a>.</p>
<p><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="display: block; height: 382px; margin-left: auto; margin-right: auto; width: 350px;"></p>
<p>Você usaria essa opção para expor recursos relevantes para contextos específicos de navegadores ou páginas da web. Por exemplo, você poderia mostrar recursos para abrir um editor gráfico quando o usuário clica em uma imagem ou pode oferecer um recurso para salvar o conteúdo da página quando uma parte da página é selecionada. Você pode adicionar itens planos de menu, caixas de seleção, grupos de botões de rádio, e separadores para os menus. Quando um item de menu de contexto for adicionado usando {{WebExtAPIRef("contextMenus.create")}}, é mostrado em todas as guias do navegador, mas você pode escondê-lo usando {{WebExtAPIRef("contextMenus.remove")}}.</p>
<p>A lista inteira dos contextos suportados está disponível em {{WebExtAPIRef("menus.ContextType")}} e inclui contextos de fora de uma página web, como itens de favoritos na interface do navegador. Por exemplo, a extensão "<a href="https://github.com/Rob--W/bookmark-container-tab">Open bookmark in Container Tab</a>" adiciona um item de menu que permite que o usuário abra a URL dos favoritos em uma nova guia de container:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16554/extension_context_menu.png" style="border: 1px solid black; display: block; height: 637px; margin: 0px auto; width: 505px;"></p>
<h2 id="Especificando_itens_do_menu_de_contexto">Especificando itens do menu de contexto</h2>
<p>Você controla os itens do menu de contexto programaticamente, usando a API {{WebExtAPIRef("contextMenus")}}. No entanto, você precisa requisitar a permissão <code>contextMenus</code> em seu manifest.json para poder tomar vantagem desta API.</p>
<pre class="brush: json">"permissions": ["contextMenus"]</pre>
<p>Você pode então adicionar (e atualizar ou apagar) os itens do menu de contexto em seu script de "background" (segundo plano) da sua extensão. Para criar um item de menu, você especifica um id, seu título, e os menus de contexto em que ele deve aparecer:</p>
<pre class="brush: js">browser.contextMenus.create({
id: "log-selection",
title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
contexts: ["selection"]
}, onCreated);</pre>
<p>Sua extensão então escuta os cliques nos itens do menu. As informações passadas sobre o item clicado, o contexto em que o clique ocorreu e os detalhes da guia em que o clique ocorreu podem ser usadas para chamar a funcionalidade de extensão apropriada.</p>
<pre class="brush: js">browser.contextMenus.onClicked.addListener(function(info, tab) {
switch (info.menuItemId) {
case "log-selection":
console.log(info.selectionText);
break;
...
}
})</pre>
<h2 id="Ícones">Ícones</h2>
<p>Para mais detalhes sobre como criar ícones para usar no seu menu de contexto, veja <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconography</a> na documentação <a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a>.</p>
<h2 id="Exemplos">Exemplos</h2>
<p>O repositório <a class="external external-icon" href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> no GitHub contém dois exemplos de extensões que implementam itens do menu de contexto:</p>
<ul>
<li><a href="https://github.com/mdn/webextensions-examples/tree/master/menu-demo">menu-demo</a> adiciona muitos itens para o menu de contexto do navegador.</li>
<li><a href="https://github.com/mdn/webextensions-examples/tree/master/context-menu-copy-link-with-types">context-menu-copy-link-with-types</a> adiciona um item de menu de contexto aos links que copiam o URL do link para a área de transferência, como texto sem formatação e HTML avançado.</li>
</ul>
</div>
|
