diff options
Diffstat (limited to 'files/pt-br/xul/school_tutorial')
4 files changed, 547 insertions, 0 deletions
diff --git a/files/pt-br/xul/school_tutorial/comecando_com_as_extensoes_do_firefox/index.html b/files/pt-br/xul/school_tutorial/comecando_com_as_extensoes_do_firefox/index.html new file mode 100644 index 0000000000..9502bc6486 --- /dev/null +++ b/files/pt-br/xul/school_tutorial/comecando_com_as_extensoes_do_firefox/index.html @@ -0,0 +1,80 @@ +--- +title: Começando com as extensões do Firefox +slug: XUL/School_tutorial/Comecando_com_as_Extensoes_do_Firefox +tags: + - Add-ons + - Começar + - Complemento + - Extensões + - Tutorial +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions +--- +<p>{{ PreviousNext("XUL/School_tutorial/Introdução", "XUL/School_tutorial/Os_Essenciais_de_uma_Extensao") }}</p> +<h2 id="O_que_é_uma_extensão_do_Firefox"><span class="short_text" id="result_box" lang="pt"><span class="hps">O que é</span> <span class="hps">uma extensão do</span> <span class="hps">Firefox?</span></span></h2> +<blockquote> + <p><span id="result_box" lang="pt"><span class="hps">Extensões adicionam</span><span class="hps"> novas funcionalidades</span> <span class="hps">às aplicações</span> <span class="hps">da Mozilla</span><span>, como</span> <span class="hps">Firefox</span> <span class="hps">e</span> <span class="hps">Thunderbird.</span> <span class="hps">Elas podem adicionar</span> <span class="hps">qualquer coisa</span> <span class="hps">a partir de</span> <span class="hps">um botão de</span> <span class="hps">barra de ferramentas para</span> <span class="hps">uma nova funcionalidade</span> <span class="hps">completamente</span><span>.</span> <span class="hps">Elas permitem que</span> <span class="hps">o aplicativo possa</span> <span class="hps">ser personalizado</span> <span class="hps">para atender às necessidades</span> <span class="hps">pessoais de cada</span> <span class="hps">usuário, se ele</span> <span class="hps">precisar de recursos</span> <span class="hps">adicionais</span><span>, mantendo as</span> <span class="hps">pequenas aplicações</span> <span class="hps">para download.</span></span></p> +</blockquote> +<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Retirado da</span></span> <a href="/en/Extensions" title="en/Extensions">Página de Extensões</a>.</p> +<p><span id="result_box" lang="pt"><span class="hps">Conforme descrito no</span> <span class="hps">texto citado</span><span> logo acima, uma extensão</span> <span class="hps">é um pequeno</span> <span class="hps">aplicativo que adiciona</span> <span class="hps">algo novo para</span> <span class="hps">uma ou mais aplicações</span> <span class="hps">da Mozilla</span><span>.</span> <span class="hps">Este</span> <span class="hps">tutorial</span> <span class="hps">concentra-se em</span> <span class="hps">extensões para o</span> <span class="hps">Firefox,</span> <span class="hps">mas os mesmos princípios</span> <span class="hps atn">(</span><span>ou muito semelhantes</span><span>) aplicam-se</span> <span class="hps">a criação de</span> <span class="hps">extensões para</span> <span class="hps">outras aplicações, como</span> <span class="hps">Thunderbird,</span> <span class="hps">Seamonkey,</span> <span class="hps">e Flock</span><span>.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Também é</span> <span class="hps">importante notar que</span> <span class="hps">existem diferenças entre</span> <span class="hps">a definição de</span> <span class="hps">extensão</span> <span class="hps">e</span> <span class="hps">add-on.</span> <span class="hps">Todas as extensões</span> <span class="hps">são</span> <span class="hps atn">add-</span><span>ons,</span> <span class="hps">mas</span> <span class="hps atn">add-</span><span>ons</span> <span class="hps">também podem ser</span> <span class="hps">temas</span><span>, plugins,</span> <span class="hps">ou pacotes de idiomas</span><span>.</span> <span class="hps">Este tutorial é</span> <span class="hps">sobre o desenvolvimento de</span> <span class="hps">extensão</span><span>, mas os temas</span> <span class="hps">e pacotes de idiomas</span> <span class="hps">são desenvolvidos</span> <span class="hps">de uma forma muito</span> <span class="hps">semelhante.</span> <span class="hps">Plugins</span> <span class="hps">são totalmente diferentes</span><span>,</span> <span class="hps">e</span><span class="hps"> não serão</span> <span class="hps">abordados aqui</span><span>.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Você pode ler</span> <span class="hps">mais sobre</span> <span class="hps">plugins</span> <span class="hps">e seu desenvolvimento</span> <span class="hps">na</span></span> <a href="/en/Plugins" title="en/Plugins">Página de Plugins </a>.</p> +<p><span id="result_box" lang="pt"><span class="hps">Firefox</span> <span class="hps">oferece uma arquitetura</span> <span class="hps">muito rica e</span> <span class="hps">flexível, que</span> <span class="hps">permite que os desenvolvedores</span> <span class="hps">de extensões</span> <span class="hps">possam adicionar</span> <span class="hps">recursos avançados</span><span>,</span> <span class="hps">personalizar</span> <span class="hps">a experiência do usuário</span><span> e </span><span class="hps">substituir completamente</span> <span class="hps">ou remover</span> <span class="hps">partes do</span> <span class="hps">browser.</span></span> <span id="result_box" lang="pt"><span class="hps">O repositório de</span> <a href="https://addons.mozilla.org/" title="https://addons.mozilla.org/"><span class="hps atn">add-</span><span>ons</span> <span class="hps">da Mozilla</span></a> <span class="hps atn">(</span><span>AMO)</span> <span class="hps">possui uma extensa</span> <span class="hps">série de extensões</span> <span class="hps">com uma grande variedade</span> <span class="hps">de funções:</span> <span class="hps">a filtragem de conteúdo</span> <span class="hps atn">(</span></span><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1865" title="https://addons.mozilla.org/en-US/firefox/addon/1865">AdBlock Plus</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/722" title="https://addons.mozilla.org/en-US/firefox/addon/722">NoScript</a><span id="result_box" lang="pt"><span>)</span><span>, a interação</span> <span class="hps">de aplicações web</span> <span class="hps">(</span></span><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/3615" title="https://addons.mozilla.org/en-US/firefox/addon/3615">Delicious Bookmarks</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5202" title="https://addons.mozilla.org/en-US/firefox/addon/5202">eBay Companion</a><span id="result_box" lang="pt"><span class="hps">)</span><span>, desenvolvimento</span> <span class="hps">web</span> <span class="hps">(</span></span>(<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a><span id="result_box" lang="pt"><span>)</span> <span class="hps">e</span> <span class="hps">proteção à criança</span> <span class="hps atn">(</span></span><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5881" title="https://addons.mozilla.org/en-US/firefox/addon/5881">Glubble For Families</a><span id="result_box" lang="pt"><span class="hps">)</span><span>.</span> <span class="hps">Estes são</span> <span class="hps">extensões</span> <span class="hps">complexas</span> <span class="hps">muito avançada e</span><span>,</span> <span class="hps">e você vai aprender</span> <span class="hps">mais</span> <span class="hps">do que é preciso</span> <span class="hps">para criar</span> <span class="hps">extensões</span> <span class="hps">como estas</span> <span class="hps atn">(</span><span>Glaxstar</span> <span class="hps">realmente</span> <span class="hps">trabalhou em</span> <span class="hps">três</span> <span class="hps">das listadas</span><span>)</span><span>.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Extensões</span> <span class="hps">agora</span> <span class="hps">existem em</span> <span class="hps">três</span> <span class="hps">formas</span> <span class="hps">diferentes: </span></span><a class="link-https" href="https://addons.mozilla.org/en-US/developers/builder" title="https://addons.mozilla.org/en-US/developers/builder">SDK Add-ons</a><span id="result_box" lang="pt"> <span class="hps">(também conhecidos como</span> <span class="hps">Jetpacks</span><span>)</span><span>, extensões</span> <span class="hps">bootstrapped</span> <span class="hps">e extensões</span> <span class="hps">tradicionais.</span> <span class="hps">Se</span> <span class="hps">você está apenas</span> <span class="hps">começando</span> <span class="hps">a desenvolver</span> <span class="hps atn">add-</span><span>ons,</span> <span class="hps">o</span> <span class="hps">SDK</span> <span class="hps atn">Add-</span><span>ons</span> <span class="hps">oferece uma</span> <span class="hps">ótima maneira de criar</span> <span class="hps">rapidamente</span> <span class="hps">as simples</span> <span class="hps">e construir</span> <span class="hps">sobre eles.</span> <span class="hps">Este</span> <span class="hps">tutorial</span> <span class="hps">concentra-se em</span> <span class="hps">extensões</span> <span class="hps">tradicionais</span><span>, que são criados</span> <span class="hps">de forma diferente.</span> <span class="hps">Extensões de</span> <span class="hps">bootstrap</span> <span class="hps">são um passo acima</span> <span class="hps">dos tradicionais</span> <span class="hps">em termos de complexidade</span><span>, de modo</span> <span class="hps">que você deve</span> <span class="hps">passar por este</span> <span class="hps">tutorial</span> <span class="hps">antes de dar</span><span>-lhes uma tentativa</span><span>.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Vamos começar</span> <span class="hps">o</span> <span class="hps">tutorial</span> <span class="hps">pela análise de uma</span> <span class="hps">extensão</span> <span class="hps">muito simples.</span></span></p> +<h2 id="Extensão_Hello_World">Extensão "Hello World"</h2> +<p><span id="result_box" lang="pt"><span class="hps">Nossas extensões</span> <span class="hps">de amostra</span> <span class="hps">e este tutorial</span> <span class="hps">em geral</span> <span class="hps">são voltados para</span> <span class="hps">versões modernas do</span> <span class="hps">Firefox</span><span>, mas a maioria</span> <span class="hps">funciona</span> <span class="hps">em versões mais antigas</span> <span class="hps">também.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Vamos agora</span> <span class="hps">começar com um</span>a extensão <span class="hps">"Hello World"</span> <span class="hps">básica.</span> <span class="hps">Vamos começar</span> <span class="hps">a instalar.</span> <span class="hps">Clique no link</span> <span class="hps">abaixo.</span></span></p> +<p><a href="/@api/deki/files/5139/=xulschoolhello1.xpi" title="https://developer.mozilla.org/@api/deki/files/5139/=xulschoolhello1.xpi">Instalar "Hello World"</a></p> +<p><span id="result_box" lang="pt"><span class="hps">Isto poderá</span> <span class="hps">desencadear</span> <span class="hps">uma instalação</span> <span class="hps">ou</span> <span class="hps">um download de arquivo</span><span>, dependendo do</span> <span class="hps">tipo de conteúdo</span> <span class="hps">que servidor</span> <span class="hps">web</span> <span class="hps">está usando</span> <span class="hps">para o arquivo.</span> <span class="hps">O tipo de conteúdo</span> <span class="hps">apropriado</span> <span class="hps">para acionar</span> <span class="hps">uma instalação</span> <span class="hps">é</span> </span><strong>application/x-<strong>xpinstall</strong></strong><span id="result_box" lang="pt"><span>.</span> <span class="hps">No caso</span> <span class="hps">desta</span> <span class="hps">wiki,</span> <span class="hps">o tipo de conteúdo</span> <span class="hps">não</span> <span class="hps">está configurado corretamente</span> <span class="hps">e</span> <span class="hps">um download de arquivo</span> <span class="hps">deve ocorrer.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">e</span> <span class="hps">o tipo de conteúdo</span> <span class="hps">está configurado corretamente</span><span>, provavelmente você vai</span> <span class="hps">ser notificado</span> <span class="hps">de que o site</span> <span class="hps">não</span> <span class="hps">é permitido instalar</span> <span class="hps atn">add-</span><span>ons</span> <span class="hps">no</span> <span class="hps">Firefox.</span> <span class="hps">Esta é uma</span> <span class="hps">barreira de segurança</span> <span class="hps">que impede</span> <span class="hps">locais</span> <span class="hps">de</span> <span class="hps">instalação de extensões</span> <span class="hps">sem</span> <span class="hps">o consentimento do usuário</span><span>.</span> <span class="hps">É necessário</span> <span class="hps">porque as extensões</span> <span class="hps">maliciosas</span> <span class="hps">podem fazer o mesmo</span> <span class="hps">nível de dano</span> <span class="hps">como qualquer</span> <span class="hps">programa malicioso</span><span>:</span> <span class="hps">o roubo</span> <span class="hps">de dados,</span> <span class="hps">apagar</span> <span class="hps">ou substituir</span> <span class="hps">os arquivos</span><span>,</span> <span class="hps">e fazendo com que</span> <span class="hps">o comportamento indesejado</span> <span class="hps">em geral.</span> </span><a class="link-https" href="https://addons.mozilla.org/" title="https://addons.mozilla.org/">AMO</a><span id="result_box" lang="pt"> <span class="hps">é o único local</span> <span class="hps atn">pré-</span><span>permitido porque</span> <span class="hps">todos</span> os add-ons <span class="hps">publicados</span> <span class="hps">na</span> <span class="hps">AMO</span> <span class="hps">passaram por um</span> <span class="hps">processo de revisão que</span> <span class="hps">inclui</span> <span class="hps">verificações de segurança.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Depois de baixar</span> <span class="hps">o arquivo, você</span> <span class="hps">pode arrastar e</span> <span class="hps">soltá-lo em</span> <span class="hps">área de conteúdo do</span> <span class="hps">Firefox,</span> <span class="hps">ea instalação</span> <span class="hps">deve começar.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Você verá uma</span> <span class="hps">janela</span> <span class="hps">dizendo que você</span> <span class="hps">está prestes a</span> <span class="hps">instalar uma extensão</span><span>,</span> <span class="hps">com algumas informações</span> <span class="hps">adicionais, tais</span> <span class="hps">como o nome</span> <span class="hps">do autor.</span> <span class="hps">Você verá</span> <span class="hps">uma mensagem dizendo</span> <span class="hps">que o autor não</span> <span class="hps">pode ser verificado.</span> <span class="hps">Somente</span> <span class="hps">extensões</span> <span class="hps">assinados com</span> <span class="hps">um certificado digital</span> <span class="hps">pode</span> <span class="hps">verificar a</span> <span class="hps">autoria</span><span>.</span> <span class="hps">Extensões</span> <span class="hps">assinadas</span> <span class="hps">são raras, mas</span> <span class="hps">vamos ver como</span> <span class="hps">a assiná-la</span> <span class="hps">mais tarde.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Clique no</span> <span class="hps">botão Instalar agora.</span> <span class="hps">Após a instalação da extensão</span><span class="hps">, você</span> <span class="hps">será solicitado a</span> <span class="hps">reiniciar o Firefox</span><span>.</span> <span class="hps">Instalar, desinstalar</span><span>,</span> <span class="hps">ativar e desativar</span> <span class="hps atn">add-</span><span>ons</span> <span class="hps">requerem</span> <span class="hps">uma reinicialização</span> <span class="hps">para completar</span><span>,</span> <span class="hps">com a exceção de</span> <span class="hps">plugins</span> <span class="hps">NPAPI</span><span>, extensões</span> <span class="hps">SDK</span> <span class="hps atn">Add-</span><span>ons</span> <span class="hps">e extensões</span> <span class="hps">bootstrap</span><span>.</span> <span class="hps">Este é um ponto</span> <span class="hps">importante</span> <span class="hps">para se ter em mente</span> <span class="hps">se você está construindo</span> <span class="hps">uma extensão que</span> <span class="hps">manipula</span> <span class="hps">outras extensões</span> <span class="hps">ou temas</span><span>.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Depois de instalar</span><span>, olhe para a</span> <span class="hps">janela principal do</span> <span class="hps">Firefox</span> <span class="hps">e veja se você</span> <span class="hps">notar algo</span> <span class="hps">diferente.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Você viu isso</span><span>?</span> <span class="hps">Há</span> <span class="hps">um novo menu</span> <span class="hps">no menu principal</span><span class="atn">, denominado "Hello World</span><span>!"</span><span>.</span> <span class="hps">Se você abrir</span> <span class="hps">o menu e</span><span>, em seguida,</span> <span class="hps">o item de menu</span> <span class="hps">abaixo, você</span> <span class="hps">verá uma</span> <span class="hps">mensagem de alerta</span><span>.</span> <span class="hps">Clique</span> <span class="hps">no botão</span> <span class="hps">OK</span> <span class="hps">para fechá-la</span><span>.</span></span></p> +<p><img alt="" class="internal" src="https://developer.mozilla.org/@api/deki/files/4138/=helloworldalert.png" style="width: 326px; height: 126px;"></p> +<p><span id="result_box" lang="pt"><span class="hps">Isso é tudo que</span> <span class="hps">a extensão</span> <span class="hps">faz.</span> <span class="hps">Agora vamos</span> <span class="hps">dar uma olhada</span> <span class="hps">nisso.</span></span></p> +<h2 id="Conteúdos_da_Extensão"><span class="short_text" id="result_box" lang="pt"><span class="hps">Conteúdo</span></span>s da Extensão</h2> +<p><span id="result_box" lang="pt"><span class="hps">Você deve ter notado</span> <span class="hps">que</span> <span class="hps">o arquivo de extensão</span> <span class="hps">que você instalou</span> <span class="hps">tem o nome </span></span><em>xulschoolhello1.xpi</em>. <a href="/en/XPI" title="en/XPI">XPI</a> (pronunciado "zippy") <span id="result_box" lang="pt"><span class="hps">significa</span> <span class="hps atn">Cross-</span><span>Platform</span> <span class="hps">Installer</span><span>,</span> <span class="hps">porque o mesmo</span> <span class="hps">arquivo de instalação</span> <span class="hps">pode funcionar</span> <span class="hps">em todas as plataformas</span> que o <span class="hps">Firefox</span> <span class="hps">suporta.</span> <span class="hps">XPIs</span> <span class="hps">são simplesmente</span> <span class="hps">arquivos ZIP</span><span>, mas</span> <span class="hps">Firefox</span> <span class="hps">reconhece a</span> <span class="hps">extensão</span> <span class="hps">XPI</span> <span class="hps">e desencadeia</span> <span class="hps">o processo de instalação</span> <span class="hps">quando um arquivo</span> <span class="hps">XPI</span> <span class="hps">é carregado.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Olhe para</span> <span class="hps">o arquivo</span> <span class="hps">XPI</span> <span class="hps">que você</span> <span class="hps">precisa baixá-lo</span> <span class="hps">em primeiro lugar,</span> <span class="hps">não</span> <span class="hps">instale ele.</span> <span class="hps">Se o servidor</span> <span class="hps">aciona</span> <span class="hps">uma instalação</span> <span class="hps">ao clicar em</span> <span class="hps">um link ou botão</span><span>,</span> <span class="hps">o que você</span> <span class="hps">precisa fazer</span> <span class="hps">é clicar com</span> <span class="hps">o botão direito</span> <span class="hps">sobre o</span> <span class="hps">link de instalação</span> <span class="hps">e escolha</span> <span class="hps">a opção <em>Salvar</em></span><em> <span class="hps">link como...</span></em> .</span></p> +<div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"> + <span id="result_box" lang="pt"><span class="hps">Descompacte o arquivo</span> <span class="hps">XPI</span> <span class="hps">em um local</span> <span class="hps">conveniente.</span> <span class="hps">Emita o seguinte comando</span> <span class="hps">para descompactar o arquivo</span> <span class="hps">no Linux ou</span> <span class="hps">Mac</span> <span class="hps">OS</span> <span class="hps">X:</span></span></div> +</div> +<pre class="syntaxbox">unzip xulschoolhello1.xpi -d xulschoolhello1 +</pre> +<p><span id="result_box" lang="pt"><span class="hps">No Windows,</span> <span class="hps">você pode alterar a</span> <span class="hps">extensão do arquivo de</span> <span class="hps">xpi</span> <span class="hps">para</span> <span class="hps">zip</span><span>,</span> <span class="hps">ou abra o arquivo</span> <span class="hps">diretamente,</span> <span class="hps">descompactá-lo</span><span>, usando uma ferramenta</span> <span class="hps">ZIP.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Você deverá ver a</span> <span class="hps">seguinte estrutura de diretórios</span><span>:</span></span></p> +<ul> + <li>xulschoolhello1 + <ul> + <li>chrome.manifest</li> + <li>install.rdf</li> + <li>content + <ul> + <li>browserOverlay.xul</li> + <li>browserOverlay.js</li> + </ul> + </li> + <li>skin + <ul> + <li>browserOverlay.css</li> + </ul> + </li> + <li>locale + <ul> + <li>en-US + <ul> + <li>browserOverlay.dtd</li> + <li>browserOverlay.properties</li> + </ul> + </li> + </ul> + </li> + </ul> + </li> +</ul> +<p><span id="result_box" lang="pt"><span class="hps">Isso é</span> um monte<span class="hps"> de arquivos</span> <span class="hps">para</span> <span class="hps">algo</span> <span class="hps">tão simples!</span> <span class="hps">Na próxima seção</span><span>, vamos</span> <span class="hps">examinar</span> <span class="hps">esses arquivos</span> <span class="hps">e ver o que</span> <span class="hps">eles fazem.</span></span></p> +<p>{{ PreviousNext("XUL/School_tutorial/Introdução", "XUL/School_tutorial/Os_Essenciais_de_uma_Extensao") }}</p> +<p><span style="font-size: small;">Este tutorial foi gentilmente doado à Mozilla pelo Appcoast.</span></p> diff --git a/files/pt-br/xul/school_tutorial/index.html b/files/pt-br/xul/school_tutorial/index.html new file mode 100644 index 0000000000..2f5b990b15 --- /dev/null +++ b/files/pt-br/xul/school_tutorial/index.html @@ -0,0 +1,72 @@ +--- +title: Tutorial da Escola XUL +slug: XUL/School_tutorial +tags: + - Add-ons + - Complementos + - Extensões + - Referências + - Tutoriais + - XUL +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School +--- +<p>Escola XUL é um compreensivo tutorial de desenvolvimento de add-ons, focalizando em desenvolvimento de extensões para o Firefox. É recomendado que você lesse pelo menos uma vez tudo, do princípio ao fim. Enquanto o Firefox muda rapidamente, o conteúdo neste seminário deverá ser atualizado e válido.</p> + +<dl> + <dt>Introdução</dt> + <dd> + <ul> + <li><a href="/pt-BR/docs/XUL/School_tutorial/Introdução" title="XUL/School_tutorial/Introduction">Introdução</a></li> + <li><a href="/pt-BR/docs/XUL/School_tutorial/Comecando_com_as_Extensoes_do_Firefox" title="XUL/School_tutorial/Getting Started with Firefox Extensions">Começando com as Extensões do Firefox</a></li> + <li><a href="https://developer.mozilla.org/pt-BR/docs/XUL/School_tutorial/Os_Essenciais_de_uma_Extensao" title="XUL/School_tutorial/The Essentials of an Extension">Os Essenciais de uma Extensão</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Setting_Up_a_Development_Environment" title="XUL/School_tutorial/Setting Up a Development Environment">Montando um Ambiente de Desenvolvimento</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/JavaScript_Object_Management" title="XUL/School_tutorial/JavaScript Object Management">Gerenciamento de Objeto Javascript</a></li> + </ul> + </dd> + <dt>Funcionalidade básica</dt> + <dd> + <ul> + <li><a href="/en-US/docs/XUL/School_tutorial/Adding_menus_and_submenus" title="XUL/School_tutorial/Adding menus and submenus">Adicionando menus e sub-menus</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Adding_Toolbars_and_Toolbar_Buttons" title="XUL/School_tutorial/Adding Toolbars and Toolbar Buttons">Adicionando Barras de Ferramentas e Botões da Barra de Ferramentas</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Adding_Events_and_Commands" title="XUL/School_tutorial/Adding Events and Commands">Adicionando eventos e comandos</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Adding_windows_and_dialogs" title="XUL/School_tutorial/Adding windows and dialogs">Adicionando janelas e diálogos</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Adding_sidebars" title="XUL/School_tutorial/Adding sidebars">Adicionando barras laterais</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/User_Notifications_and_Alerts" title="XUL/School_tutorial/User Notifications and Alerts">Notificações de usuário e alertas</a></li> + </ul> + </dd> + <dt>Funcionalidade de intermediário</dt> + <dd> + <ul> + <li><a href="/en-US/docs/XUL/School_tutorial/Intercepting_Page_Loads" title="XUL/School_tutorial/Intercepting Page Loads">Interceptando carregamento de páginas</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Connecting_to_Remote_Content" title="XUL/School_tutorial/Connecting to Remote Content">Conectando a Conteúdo Remoto</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Handling_Preferences" title="XUL/School_tutorial/Handling Preferences">Controlando</a> <a href="/en-US/docs/XUL/School_tutorial/Handling_Preferences" title="XUL/School_tutorial/Handling Preferences">Preferências</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Local_Storage" title="XUL/School_tutorial/Local Storage">Armazenamento Local</a></li> + </ul> + </dd> + <dt>Tópicos avançados</dt> + <dd> + <ul> + <li><a href="/en-US/docs/XUL/School_tutorial/The_Box_Model" title="XUL/School_tutorial/The Box Model">O Modelo de Caixa</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/XPCOM_Objects" title="XUL/School_tutorial/XPCOM Objects">Objetos XPCOM</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Observer_Notifications" title="XUL/School_tutorial/Observer Notifications">Notificações de observador</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Custom_XUL_Elements_with_XBL" title="XUL/School_tutorial/Custom XUL Elements with XBL">Elementos XUL Customizados com XBL</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Mozilla_Documentation_Roadmap" title="XUL/School_tutorial/Mozilla Documentation Roadmap">Documentação de Mozilla Roadmap</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Useful_Mozilla_Community_Sites" title="XUL/School_tutorial/Useful Mozilla Community Sites">Sites da Comunidade Mozilla</a></li> + </ul> + </dd> + <dt>Apêndices</dt> + <dd> + <ul> + <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_A:_Add-on_Performance" title="XUL/School_tutorial/Appendix A: Add-on Performance">Apêndice A: Somar-em Desempenho</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_B:_Install_and_Uninstall_Scripts" title="XUL/School_tutorial/Appendix B: Install and Uninstall Scripts">Apêndice B: Instale e Desinstale Manuscritos</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_C:_Avoid_using_eval_in_Add-ons" title="XUL/School_tutorial/Appendix C: Avoid using eval in Add-ons">Apêndice C: Evitando usar eval dentro Somar-ons</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_D:_Loading_Scripts" title="XUL/School_tutorial/Appendix D: Loading Scripts">Apêndice D: Manuscritos carregando</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/DOM_Building_and_HTML_Insertion" title="XUL/School_tutorial/Appendix E: DOM Building and HTML Insertion">Apêndice E: DOM Building e Inserção de HTML</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_F:_Monitoring_DOM_changes" title="XUL/School_tutorial/Appendix F: Monitoring DOM changes">Apêndice F: Mudanças de DOM monitorando</a></li> + </ul> + </dd> +</dl> + +<p>O Projeto Escola XUL foi desenvolvido pela <a href="http://appcoast.com/" title="http://appcoast.com/">Appcoast</a>. O projeto é publicado aqui seguindo suas <a href="/Project:Copyrights" title="https://developer.mozilla.org/Project:Copyrights">licenças de compartilhamento</a>. Seus conteúdos foram modificados da fonte original como necessário.</p> + +<p>Nota: Os artigos ainda estão sendo traduzidos para PT-BR (Português do Brasil).</p> diff --git a/files/pt-br/xul/school_tutorial/introdução/index.html b/files/pt-br/xul/school_tutorial/introdução/index.html new file mode 100644 index 0000000000..538b7663b9 --- /dev/null +++ b/files/pt-br/xul/school_tutorial/introdução/index.html @@ -0,0 +1,40 @@ +--- +title: Introdução +slug: XUL/School_tutorial/Introdução +tags: + - Introdução + - XUL +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Introduction +--- +<div> + {{Next("XUL/School_tutorial/Comecando_com_as_Extensoes_do_Firefox")}}</div> +<div> + </div> +<div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"> + <span class="short_text" id="result_box" lang="pt"><span class="hps">Bem-vindo ao</span> Tutorial da Escola XUL<span>!</span></span></div> +</div> +<p><span id="result_box" lang="pt"><span class="hps">Este</span> <span class="hps">tutorial</span> <span class="hps">é destinado a ser</span> <span class="hps">o</span> <span class="hps">trampolim</span> <span class="hps">que</span> <span class="hps">irá transformá-lo</span> <span class="hps">em um</span> <span class="hps">desenvolvedor</span> <span class="hps">profissional</span> de extensões do Firefox <span class="hps">em pouco tempo.</span> <span class="hps">Colocamos</span> <span class="hps">anos de experiência</span> <span class="hps">XUL</span> <span class="hps">nele</span><span>, oferecendo</span> <span class="hps">diversas soluções</span> <span class="hps">para os problemas dos</span> <span class="hps">desenvolvedores de extensões</span><span class="hps">.</span></span></p> +<p><span class="short_text" id="result_box" lang="pt"><span class="hps">O Tutorial da Escola XUL</span>(XUL School Tutorial) <span class="hps">foi criado pelo</span></span> <a href="http://appcoast.com/" title="http://appcoast.com/">Appcoast</a> (formerly Glaxstar), <span id="result_box" lang="pt"><span class="hps">uma das poucas</span> <span class="hps">empresas dedicadas</span> <span class="hps">à construção de</span> <span class="hps">extensões de alta qualidade no Firefox</span><span class="hps">.</span> <span class="hps">Uma equipe</span> <span class="hps">de mais de</span> <span class="hps">uma dúzia de</span> <span class="hps">desenvolvedores</span> <span class="hps">XUL</span> <span class="hps">forma</span> <span class="hps">Glaxstar</span> <span class="hps">no</span> <span class="hps">momento em que este</span> <span class="hps">tutorial</span> <span class="hps">foi criado</span><span>,</span> <span class="hps">e as experiências</span> <span class="hps">combinadas de</span> <span class="hps">anos criando</span> <span class="hps">extensões do Firefox</span> <span class="hps">são refletidas</span> <span class="hps">aqui.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Com este</span> <span class="hps">tutorial</span> <span class="hps">você vai aprender</span> <span class="hps">como desenvolver</span> <span class="hps">extensões do Firefox</span><span>.</span> <span class="hps">Você vai</span> <span class="hps">aprender a fazer</span> <span class="hps">rapidamente as tarefas mais</span> <span class="hps">comuns no desenvolvimento de</span> <span class="hps">extensão</span><span>, comparando</span> <span class="hps">várias abordagens diferentes para</span> <span class="hps">resolvê-los.</span> <span class="hps">Na maioria dos casos</span> <span class="hps">nós vamos fornecer</span> <span class="hps">exemplos de código</span>s <span class="hps">que você pode facilmente</span> <span class="hps">copiar e</span> <span class="hps">adaptar às suas necessidades</span><span>, bem como</span> <span class="hps">alguns trabalhos de exemplo</span><span class="hps">.</span> <span class="hps">O</span> <span class="hps">tutorial</span> <span class="hps">tem como objetivo ser</span> <span class="hps">o mais breve possível</span><span>,</span> </span><span id="result_box" lang="pt"><span class="hps alt-edited">frequentemente</span> <span class="hps alt-edited">recorrendo à</span> <span class="hps">documentação</span> <span class="hps">Mozilla</span> <span class="hps">para</span> <span class="hps">informações mais detalhadas</span></span><span id="result_box" lang="pt"><span class="hps">.</span> <span class="hps">Você pode</span> <span class="hps">pensar nisso como</span> <span class="hps">um guia rápido para</span> <span class="hps">o mundo</span> <span class="hps">expansivo que</span> <span class="hps">é a plataforma</span> <span class="hps">Mozilla.</span> <span class="hps">A maioria dos</span> <span class="hps">links nesta</span> <span class="hps">documentação</span> <span class="hps">são feitos para serem</span> <span class="hps">clicados</span> <span class="hps">e ler.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Vamos começar com</span> <span class="hps">uma breve introdução a</span> <span class="hps">alguns conceitos-chave</span><span>,</span> <span class="hps">no caso de você</span> <span class="hps">não</span> <span class="hps">estiver familiarizado com o</span> <span class="hps">Mozilla</span> <span class="hps">e</span> <span class="hps">Firefox.</span></span></p> +<h2 id="Mozilla_e_Firefox">Mozilla e Firefox</h2> +<p>O termo <a href="http://en.wikipedia.org/wiki/Mozilla" title="http://en.wikipedia.org/wiki/Mozilla">Mozilla</a> <span class="short_text" id="result_box" lang="pt"><span class="hps">pode ser</span> <span class="hps">usado para se referir</span> <span class="hps">a vários conceitos</span></span>:<span class="short_text" id="result_box" lang="pt"><span class="hps"> o projeto</span> <span class="hps">Mozilla</span></span>, a <a href="http://en.wikipedia.org/wiki/Mozilla_Foundation" title="http://en.wikipedia.org/wiki/Mozilla_Foundation">Mozilla Foundation</a>, a <a href="http://en.wikipedia.org/wiki/Mozilla_Corporation" title="http://en.wikipedia.org/wiki/Mozilla_Corporation">Mozilla Corporation</a> e o antigo <a href="http://en.wikipedia.org/wiki/Mozilla_Application_Suite" title="http://en.wikipedia.org/wiki/Mozilla_Application_Suite">Mozilla browser</a>. <span id="result_box" lang="pt"><span class="hps alt-edited">Até mesmo</span> <span class="hps">Firefox</span> <span class="hps alt-edited">é referido às vezes</span> <span class="hps atn">como "</span><span>Mozilla</span><span>"</span><span>.</span> <span class="hps">Se você</span> <span class="hps">não estiver familiarizado com</span> <span class="hps">esses</span> <span class="hps">termos</span><span>, é bom</span> <span class="hps">que você tome</span> <span class="hps">algum tempo e aprender</span> <span class="hps">um pouco sobre a</span> <span class="hps">Mozilla.</span> <span class="hps">Isso ajudará você a</span> <span class="hps">entender a cultura</span> <span class="hps">que envolve</span> <span class="hps">a comunidade</span> <span class="hps">Mozilla.</span></span></p> +<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Mozilla</span> <span class="hps">gerou</span> <span class="hps">vários</span></span> <a href="http://www.mozilla.org/projects/" title="http://www.mozilla.org/projects/">produtos e projetos</a>, <span id="result_box" lang="pt"><span class="hps">sendo o mais</span> <span class="hps">notável</span> <span class="hps">o navegador Mozilla</span> <span class="hps">Firefox.</span> <span class="hps">Firefox</span> <span class="hps">é um dos</span> <span class="hps">mais bem sucedidos</span> <span class="hps">projetos de código aberto</span> <span class="hps">da história,</span> <span class="hps">combinando a</span> <span class="hps">abertura,</span> <span class="hps">padrões de conformidade</span> <span class="hps">e sofisticação</span> <span class="hps">de</span> <span class="hps">open source</span> <span class="hps">com foco na</span> <span class="hps">experiência do usuário e</span> <span class="hps">poderoso</span> <span class="hps">alcance</span> <span class="hps">mais</span> <span class="hps">comumente visto em</span> <span class="hps">empresas</span> <span class="hps">menos</span> <span class="hps">abertos.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">A versão 1.0 do</span> <span class="hps">Firefox</span> <span class="hps">foi lançada em</span> <span class="hps">Novembro de 2004,</span> <span class="hps">a versão 2.0</span> <span class="hps">em outubro de 2006</span><span>,</span> <span class="hps">ea versão</span> <span class="hps">3.0</span> <span class="hps">em junho de 2008</span><span>.</span> <span class="hps">Este tutorial foi escrito</span> <span class="hps">após</span> <span class="hps">Firefox 3</span> <span class="hps">foi lançado,</span> <span class="hps">e</span> <span class="hps">foi atualizado</span> <span class="hps">com o tempo.</span> <span class="hps">Enquanto a maioria dos</span> <span class="hps">que ainda deve</span> <span class="hps">trabalhar</span> <span class="hps">para a criação</span> <span class="hps">de extensões do Firefox</span> <span class="hps atn">3 (</span><span>e até mesmo</span> <span class="hps">o Firefox 2</span><span>)</span><span>, é altamente</span> <span class="hps">recomendável que você</span> <span class="hps">vise apoiar</span> <span class="hps">as versões modernas</span> <span class="hps">do Firefox</span><span>,</span> <span class="hps">para</span> <span class="hps">incentivar os usuários a</span> <span class="hps">manter-se atualizado</span> <span class="hps">com</span> <span class="hps">as correções de segurança</span><span>.</span> <span class="hps">Um</span> <span class="hps">lançamento que</span> <span class="hps">é mais do que</span> <span class="hps">6 meses de idade</span> <span class="hps">é provável</span> <span class="hps">vulnerável a</span> <span class="hps">bugs de segurança</span> <span class="hps">publicados.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Firefox</span> <span class="hps">e outras aplicações</span> <span class="hps">da Mozilla</span> <span class="hps">pode ser visto como</span> <span class="hps">composto de duas partes</span> <span class="hps">distintas:</span> <span class="hps">uma</span> <span class="hps">camada de</span> <span class="hps">interface de usuário que</span> <span class="hps">é diferente</span> <span class="hps">para cada projeto</span><span>,</span> <span class="hps">e uma plataforma</span> <span class="hps">comum</span> <span class="hps">sobre a qual</span> <span class="hps">a camada de interface</span> <span class="hps">é construída</span><span>.</span> <span class="hps">A interface de usuário</span> <span class="hps">é construído</span> <span class="hps">com a tecnologia</span> <span class="hps">conhecida como </span></span><a href="/en-US/docs/XUL" title="XUL">XUL</a>, <span class="short_text" id="result_box" lang="pt"><span class="hps">e</span> <span class="hps">a plataforma</span> <span class="hps">é conhecido como</span></span> <a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a>.</p> +<h2 id="XUL">XUL</h2> +<p><a href="/en-US/docs/XUL" title="XUL">XUL</a> (pronunciado "zool") <span id="result_box" lang="pt"><span class="hps">é uma das muitas</span> <span class="hps">tecnologias utilizadas</span> <span class="hps">para a criação de</span> <span class="hps">produtos e extensões</span> <span class="hps">baseados em</span> <span class="hps">Mozilla.</span> <span class="hps">É</span> <span class="hps">apenas uma</span> <span class="hps">parte da paisagem</span> <span class="hps">de desenvolvimento,</span> <span class="hps">mas dado que</span> <span class="hps">é praticamente</span> <span class="hps">exclusivo</span> <span class="hps">para</span> <span class="hps">Mozilla,</span> <span class="hps">que tende a</span> <span class="hps">ser utilizado para identificar</span> <span class="hps">todo o desenvolvimento</span> <span class="hps">relacionado</span> <span class="hps">Mozilla.</span> <span class="hps">Às vezes você</span> <span class="hps">vai ler</span> <span class="hps">termos como</span> <span class="hps">"aplicações</span> <span class="hps">XUL</span><span class="atn">" e "</span><span>extensões</span><span>"</span> <span class="hps">XUL</span><span>, mas raramente</span> <span class="hps">eles</span> <span class="hps">se referem a</span> <span class="hps">projetos que são</span> <span class="hps">construídos</span> <span class="hps">exclusivamente</span> <span class="hps">com</span> <span class="hps">XUL</span><span>.</span> <span class="hps">Isso normalmente significa</span> <span class="hps">que os projetos</span> <span class="hps">foram construídos</span> <span class="hps">usando</span> <span class="hps">tecnologias Mozilla</span><span>.</span> <span class="hps alt-edited">Até mesmo</span> <span class="hps">este</span> <span class="hps">projeto, chamado</span> <span class="hps">Escola</span> <span class="hps">XUL</span><span>,</span> <span class="hps">abrange</span> <span class="hps">várias outras tecnologias</span> <span class="hps">como JavaScript</span><span>, CSS,</span> <span class="hps">XBL</span> <span class="hps">e</span> <span class="hps">XPCOM</span><span>.</span></span></p> +<h2 id="XULRunner">XULRunner</h2> +<p><a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a> inclui o <a href="/en-US/docs/Gecko" title="Gecko">Motor de Renderização Gecko</a>, <span id="result_box" lang="pt"><span class="hps">a <a href="/en-US/docs/Necko" title="/en-US/docs/Necko">biblioteca</a></span><a href="/en-US/docs/Necko" title="/en-US/docs/Necko"> <span class="hps">de rede</span> <span class="hps">Necko</span></a><span>,</span> <span class="hps">e</span> <span class="hps">vários outros componentes</span> <span class="hps">que fornecem</span> <span class="hps atn">OS-gerenciamento </span><span>independente de</span> <span class="hps">arquivo</span><span>, acessibilidade e</span> <span class="hps">localização</span><span>, entre outros.</span> <span class="hps">É esta</span> <span class="hps">poderosa</span> <span class="hps">plataforma que</span> <span class="hps">tem permitido um crescimento</span> <span class="hps">tão rápido</span> <span class="hps">da comunidade de desenvolvimento</span> <span class="hps">em torno</span> <span class="hps">Mozilla</span> <span class="hps">e</span> <span class="hps">Firefox.</span></span></p> +<p><span class="short_text" id="result_box" lang="pt"><span class="hps">XULRunner</span> <span class="hps">está disponível em</span> <span class="hps">forma binária</span> <span class="hps">na página</span></span> <a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a>, <span id="result_box" lang="pt"><span class="hps">e é a</span> <span class="hps">base para</span> <span class="hps">vários projetos</span><span>, como o</span> <span class="hps">Songbird,</span> <span class="hps">Miro</span> <span class="hps">e</span> <span class="hps">Eudora.</span> <span class="hps">Há uma lista</span> <span class="hps">muito abrangente</span> <span class="hps">de aplicações</span> <span class="hps">XULRunner</span> <span class="hps">no</span></span> <a href="/en-US/docs/XULRunner_Hall_of_Fame" title="XULRunner Hall of Fame">XULRunner Hall da Fama</a>.</p> +<h3 id="Gecko">Gecko</h3> +<p>O <a href="/en-US/docs/Gecko" title="Gecko">Motor Gecko</a> <span id="result_box" lang="pt"><span class="hps">é</span> <span class="hps">a parte do</span> <span class="hps">Firefox</span> <span class="hps">usada para processar</span> <span class="hps">páginas da web e</span> <span class="hps">sua própria</span> <span class="hps">interface de usuário</span><span>.</span></span> <span id="result_box" lang="pt"><span class="hps">Você pode identificar o</span> <span class="hps">nível de compatibilidade</span> <span class="hps">de</span> <span class="hps">padrões web</span> <span class="hps">em</span></span> <a href="http://en.wikipedia.org/wiki/List_of_web_browsers#Gecko-based_browsers" title="http://en.wikipedia.org/wiki/List_of_web_browsers#Gecko-based_browsers">Gecko-navegadores baseados</a> <span class="short_text" id="result_box" lang="pt"><span class="hps">olhando para a string</span></span> <a href="http://en.wikipedia.org/wiki/User_agent" title="http://en.wikipedia.org/wiki/User_agent">User Agent</a>, <span class="short_text" id="result_box" lang="pt"><span class="hps">que deve incluir</span> <span class="hps">a versão</span> <span class="hps">Gecko</span></span>. <span id="result_box" lang="pt"><span class="hps">Versões Gecko</span> <span class="hps">são um pouco</span> <span class="hps">independentes</span> <span class="hps">das versões</span> <span class="hps">do Firefox</span><span>,</span> <span class="hps">e você pode ver</span> <span class="hps">um mapeamento das</span> <span class="hps">versões</span> <span class="hps">do Firefox</span> <span class="hps">e versões</span> <span class="hps">Gecko</span> <span class="hps">na página</span></span> <a href="/en-US/docs/Gecko" title="Gecko">Gecko</a>. <span id="result_box" lang="pt"><span class="hps">A string</span> <span class="hps">User Agent</span> <span class="hps">para</span> <span class="hps">Firefox</span> <span class="hps">no momento</span> <span class="hps">da redação deste artigo</span> <span class="hps">(em</span> <span class="hps">Inglês dos EUA</span><span>, Mac</span> <span class="hps">OS</span> <span class="hps">X</span><span>) é:</span></span></p> +<p>Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:<strong>7.0.1</strong>) Gecko/20100101 Firefox/7.0.1</p> +<p><span id="result_box" lang="pt"><span class="hps">A seção de</span> <span class="hps">destaque</span> <span class="hps">é a versão</span> <span class="hps">Gecko:</span> <span class="hps">7.0.1</span><span>.</span> <span class="hps">Você pode ler e</span> <span class="hps">copiar a seqüência</span> <span class="hps">de agente do usuário</span> <span class="hps">de</span> <span class="hps">qualquer janela do</span> <span class="hps">Firefox,</span> <span class="hps">escolha</span> <span class="hps">"Ajuda</span><span>> Informações sobre a</span> <span class="hps">Resolução de Problemas"</span> <span class="hps">no menu principal</span><span>.</span></span></p> +<h2 id="Para_o_Tutorial"><span class="short_text" id="result_box" lang="pt"><span class="hps">Para o</span> <span class="hps">Tutorial</span></span></h2> +<p><span id="result_box" lang="pt"><span class="hps">Com</span> <span class="hps">os conceitos básicos</span> <span class="hps">para fora</span> <span class="hps">do caminho,</span> <span class="hps">agora podemos</span> <span class="hps">ir direto para</span> <span class="hps">o desenvolvimento</span> <span class="hps">da extensão.</span> <span class="hps">Você</span> <span class="hps">provavelmente ainda está</span> <span class="hps">se perguntando</span> <span class="hps">o que exatamente é</span> <span class="hps">uma extensão,</span> <span class="hps">o que pode fazer</span><span>,</span> <span class="hps">e como você pode</span> <span class="hps">fazê-los</span><span>.</span> <span class="hps">Bem,</span> <span class="hps">todo este</span> <span class="hps">tutorial</span> <span class="hps">é dedicado paraa explicar</span> <span class="hps">isso para você.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Bem-vindo ao</span> <span class="hps">mundo do desenvolvimento</span> <span class="hps">da extensão.</span> <span class="hps">Agora vamos</span> <span class="hps">chegar a ela.</span></span></p> +<div> + {{Next("XUL/School_tutorial/Comecando_com_as_Extensoes_do_Firefox")}}</div> +<p><small>Este tutorial foi gentilmente doado à Mozilla pelo Appcoast.</small></p> diff --git a/files/pt-br/xul/school_tutorial/os_essenciais_de_uma_extensao/index.html b/files/pt-br/xul/school_tutorial/os_essenciais_de_uma_extensao/index.html new file mode 100644 index 0000000000..a733e8a798 --- /dev/null +++ b/files/pt-br/xul/school_tutorial/os_essenciais_de_uma_extensao/index.html @@ -0,0 +1,355 @@ +--- +title: Os Essenciais de uma Extensão +slug: XUL/School_tutorial/Os_Essenciais_de_uma_Extensao +tags: + - Chrome + - Firefox + - Mozilla + - Tutorial + - básico + - como fazer + - criação + - essencial + - extensão +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/The_Essentials_of_an_Extension +--- +<p>{{ PreviousNext("XUL/School_tutorial/Comecando_com_as_Extensoes_do_Firefox", "XUL_School/Setting_Up_a_Development_Environment") }}</p> +<h2 id="O_arquivo_install.rdf">O arquivo install.rdf</h2> +<p><span class="long_text" id="result_box" lang="pt"><span class="hps">Na última</span> <span class="hps">seção,</span> <span class="hps alt-edited">nós vimos</span> <span class="hps">o conteúdo da</span> <span class="hps">extensão</span> <span class="hps alt-edited">Hello World</span><span>.</span> <span class="hps">Agora</span> <span class="hps">vamos dar uma olhada</span> <span class="hps">em seus arquivos</span> <span class="hps">e códigos</span><span>, começando com</span> <span class="hps">o arquivo</span> <span class="hps">install.rdf</span><span>.</span> <span class="hps">Você pode</span> <span class="hps">abri-lo com</span> <span class="hps">qualquer editor de texto</span><span>.</span></span></p> +<p><span class="long_text" id="result_box" lang="pt"><span class="hps">O arquivo</span> <span class="hps">está formatado</span> <span class="hps alt-edited">em um "seguimento"</span> <span class="hps">especial de</span> <span class="hps">XML</span> <span class="hps">chamado</span></span> <a class="external" href="http://en.wikipedia.org/wiki/Resource_Description_Framework">RDF</a>. <span class="long_text" id="result_box" lang="pt"><span class="hps">RDF</span> <span class="hps">costumava ser o</span> <span class="hps">mecanismo de armazenamento central</span> <span class="hps">para o Firefox,</span> <span class="hps">mas agora está</span> <span class="hps">sendo substituído</span> <span class="hps">por um</span> <span class="hps">sistema de</span> <span class="hps">banco de dados</span> <span class="hps">mais simples.</span> <span class="hps">Vamos discutir</span> <span class="hps">esses dois</span> <span class="hps">sistemas de armazenamento</span> <span class="hps">mais adiante</span> <span class="hps">no</span> <span class="hps">tutorial.</span></span></p> +<p><span class="long_text" id="result_box" lang="pt"><span class="hps">Agora</span> <span class="hps">vamos olhar para</span> <span class="hps">as partes importantes</span> <span class="hps">do arquivo.</span></span></p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><em:id>helloworld@xulschool.com</em:id></pre> + </div> +</div> +<p><span class="long_text" id="result_box" lang="pt"><span class="hps">Este é</span> <span class="hps">o identificador exclusivo para</span> <span class="hps">a extensão.</span> <span class="hps">Firefox</span> <span class="hps">precisa disso</span> <span class="hps">para distinguir</span> <span class="hps">a sua extensão</span> <span class="hps alt-edited">de</span> <span class="hps">outras extensões</span><span>, por isso é</span> <span class="hps">necessário</span> <span class="hps">que você tenha um</span> <span class="hps">ID que</span> <span class="hps alt-edited">seja único.</span></span></p> +<p><span class="long_text" id="result_box" lang="pt"><span class="hps">Existem dois</span> <span class="hps">padrões aceitos</span> <span class="hps">para ID de</span> <span class="hps alt-edited">complementos</span><span>.</span> <span class="hps">Um deles é o</span> <span class="hps">formato</span> <span class="hps">de e-mail</span> <span class="hps">como</span> <span class="hps">no exemplo</span> <span class="hps alt-edited">Hello World</span><span>, que</span> <span class="hps">deve ser algo como</span></span><span style="color: #0000ff;"><em><nome-do-projeto>@<seudominio></em></span>. <span class="long_text short_text" id="result_box" lang="pt"><span class="hps">A outra</span> <span class="hps">prática comum</span> <span class="hps">é utilizar um</span>a string</span> <a class="external" href="http://en.wikipedia.org/wiki/Uuid">UUID</a> gerada, <span class="long_text" id="result_box" lang="pt"><span class="hps">que é extremamente</span> <span class="hps">improvável</span> <span class="hps alt-edited">que</span> <span class="hps alt-edited">seja duplicada</span><span>.</span> <span class="hps">Sistemas baseados em</span> <span class="hps">Unix</span> <span class="hps">tem uma ferramenta de</span> <span class="hps">linha de comando chamado</span> <span class="hps">uuidgen</span> <span class="hps">que gera</span> <span class="hps">UUIDs</span><span>.</span> <span class="hps">Há também ferramentas</span> <span class="hps">com download disponível para</span> <span class="hps">todas as plataformas que geram</span> <span class="hps">elas</span><span class="hps">.</span> </span><span class="long_text" id="result_box" lang="pt"> <span class="hps">Enquanto o seu</span> <span class="hps">id</span> <span class="hps">tem</span> <span class="hps">alguma exclusividade</span> <span class="hps">para ele,</span> <span class="hps">não há problema em</span> <span class="hps">usar de qualquer</span> <span class="hps">forma</span><span>.</span></span></p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><em:name>XUL School Hello World</em:name> +<em:description>Welcome to XUL School!</em:description> +<em:version>0.1</em:version> +<em:creator>Appcoast</em:creator> +<span class="code-comment"><em:homepageURL>https://developer.mozilla.org/en/XUL_School</em:homepageURL></span></pre> + </div> +</div> +<p><span id="result_box" lang="pt"><span class="hps">Estes são os dados</span> <span class="hps">que é exibido</span> <span class="hps">antes e depois da</span> <span class="hps">extensão instalada</span><span>,</span> <span class="hps">que</span> <span class="hps">você pode ver</span> <span class="hps">no Gerenciador de</span> <span class="hps atn">Complementos(Add-</span><span>ons).</span> <span class="hps">Existem muitas outras</span> <span class="hps">marcas que</span> <span class="hps">podem ser adicionadas</span><span>,</span> <span class="hps">para</span> <span class="hps">colaboradores e</span> <span class="hps">tradutores.</span></span> <span id="result_box" lang="pt"><span class="hps">A <a href="https://developer.mozilla.org/en/Install_Manifests#type" title="https://developer.mozilla.org/en/Install_Manifests#type">especificação completa</a></span> <span class="hps">do arquivo</span> <span class="hps">install.rdf</span> <span class="hps">tem todos os detalhes</span><span>.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Desde</span> que <span class="hps">extensões</span> <span class="hps">podem ser traduzidas para</span> <span class="hps">vários idiomas,</span> <span class="hps">muitas vezes é necessário</span><span class="hps"> traduzir</span> <span class="hps">a descrição da</span> <span class="hps">extensão,</span> <span class="hps">ou até mesmo</span> <span class="hps">o seu nome.</span> <span class="hps">A</span> <span class="hps">descrição localizada</span> <span class="hps">eo nome</span> <span class="hps">podem ser adicionados com</span> <span class="hps">o seguinte código:</span></span></p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><em:localized> + <Description> + <em:locale>es-ES</em:locale> + <em:name>XUL School Hola Mundo</em:name> + <em:description>Bienvenido a XUL School!</em:description> + </Description> +</em:localized></pre> + </div> +</div> +<p>O <em>es-ES</em> <span id="result_box" lang="pt"><span class="hps alt-edited">na string</span> <span class="hps alt-edited">locale</span> <span class="hps">indica que</span> <span class="hps">é Espanhol(es) com</span> <span class="hps">localização</span> <span class="hps">na Espanha</span> <span class="hps">(ES)</span><span>.</span></span> <span class="short_text" id="result_box" lang="pt"><span class="hps">Você pode</span> <span class="hps">adicionar muitos</span></span> <em><em:localized></em> se você precisar. <span class="short_text" id="result_box" lang="pt"><span class="hps">Para</span> <span class="hps">Firefox 2</span><span>,</span> <span class="hps">localizar</span> <span class="hps">este arquivo é um</span></span> <a href="/en/Localizing_extension_descriptions#Localizing_before_Gecko_1.9" title="en/Localizing extension descriptions#Localizing before Gecko 1.9">pouco mais complicado</a>. <span id="result_box" lang="pt"><span class="hps">Vamos discutir</span> <span class="hps">a localização</span> <span class="hps">mais adiante</span> <span class="hps">nesta seção.</span></span></p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><em:type>2</em:type></pre> + </div> +</div> +<p><span id="result_box" lang="pt"><span class="hps">Isto especifica que</span> <span class="hps">o</span> complemento(<span class="hps">add</span><span>-on)</span> <span class="hps">que está sendo instalado</span> <span class="hps">é uma extensão</span><span>.</span> <span class="hps">Você pode ler</span> <span class="hps">sobre os diferentes tipos</span> <span class="hps">possíveis no</span></span> <a href="/en/Install_Manifests#type" title="en/Install Manifests#type">install.rdf</a>.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><em:targetApplication> + <Description> + <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> + <em:minVersion>4.0</em:minVersion> + <em:maxVersion>10.*</em:maxVersion> + </Description> +</em:targetApplication> +</pre> + </div> +</div> +<p><span id="result_box" lang="pt"><span class="hps alt-edited">Este node</span> <span class="hps">especifica o</span> <span class="hps">aplicativo de destino</span> <span class="hps">e</span> <span class="hps">versões</span> <span class="hps">alvo</span> <span class="hps">para a extensão,</span> <span class="hps">especificamente</span> <span class="hps">Firefox,</span> <span class="hps">a partir da versão</span> <span class="hps">4</span> <span class="hps">até a versão</span> <span class="hps">10.</span> <span class="hps">O</span> <span class="hps">UUID</span> <span class="hps">é</span> <span class="hps">da ID única</span> <span class="hps">Firefox</span><span>.</span> <span class="hps">Outras aplicações</span> <span class="hps">Mozilla e</span> <span class="hps">baseadas no Mozilla</span><span>, como</span> <span class="hps">o Thunderbird</span> <span class="hps">e</span> <span class="hps">Seamonkey</span> <span class="hps">têm a sua própria</span><span>.</span> <span class="hps">Você pode ter</span> <span class="hps">uma extensão que</span> <span class="hps">funciona em vários</span> <span class="hps">aplicativos</span> <span class="hps">e versões.</span> <span class="hps">Por exemplo</span><span>, se você criar</span> <span class="hps">uma extensão do Firefox</span><span>,</span><span class="hps"> normalmente levaria</span> <span class="hps">pouco esforço para</span> <span class="hps">portá-lo para</span> <span class="hps">o SeaMonkey</span><span>, que possui</span> <span class="hps">recursos e</span> <span class="hps">interface do usuário</span> <span class="hps">muito semelhantes.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">A versão</span> <span class="hps">mínima(minVersion) e a versão máxima(maxVersion)</span> <span class="hps">especifica o intervalo</span> da <span class="hps">versão em que</span> <span class="hps">a extensão</span> <span class="hps">pode ser instalada.</span></span>. <span class="short_text" id="result_box"><span style="background-color: rgb(235, 239, 249);" title="Here's more about the">Veja mais sobre o</span></span> "<a href="/en/Toolkit_version_format" title="en/Toolkit version format">version format</a>". <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="If the application or version range don't match, you won't be allowed to install the extension, or the extension will be installed in a disabled state.">Se o intervalo de aplicação ou a versão não coincidirem, você não terá permissão para instalar a extensão, ou a extensão será instalada em um estado desativado.</span></span> <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Users can disable version checks through preferences or installing add-ons like the">Os usuários podem desativar verificações de versão através de preferências ou a instalação de add-ons como o</span></span> <a class="link-https" href="https://addons.mozilla.org/pt-BR/firefox/addon/add-on-compatibility-reporter/" title="https://addons.mozilla.org/en-US/firefox/addon/15003">Add-on Compatibility Reporter</a>. <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Beginning with Firefox 11, add-ons will default to compatible and Firefox will mostly ignore the version range.">Começando com o Firefox 11, add-ons serão por padrão </span></span><span class="short_text" id="result_box" lang="pt"><span class="hps">compatível</span></span><span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Beginning with Firefox 11, add-ons will default to compatible and Firefox will mostly ignore the version range."> e o Firefox, na maioria das vezes ignora a faixa de versão. </span><span style="background-color: rgb(255, 255, 255);" title="Testing your add-ons with every Firefox version is always recommended, though.">No Entanto, é sempre recomendável testar seus complementos(add-ons) com cada versão do Firefox.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Qualquer erro</span> <span class="hps">ou falta de informação</span> <span class="hps">fará com que o</span> <span class="hps">processo de instalação</span> <span class="hps">falhe,</span> <span class="hps">ou</span> <span class="hps">a extensão vai ser</span> <span class="hps">instalada</span> <span class="hps">em um estado desativado</span><span>.</span></span></p> +<h2 id="O_arquivo_chrome.manifest">O arquivo chrome.manifest</h2> +<blockquote> + <p><span style="color: #0000ff;"><span id="result_box" lang="pt"><span class="hps">Chrome</span> <span class="hps">é o conjunto de</span> <span class="hps">elementos</span> <span class="hps">de interface de usuário</span> <span class="hps">da janela do aplicativo</span> <span class="hps">que estão fora</span> <span class="hps">da área de conteúdo</span> <span class="hps">da janela.</span></span></span> <span id="result_box" lang="pt"><span class="hps">Barras de ferramentas,</span> <span class="hps">barras de menus,</span> <span class="hps">barras de progresso e</span> <span class="hps">barras de título</span> <span class="hps">da janela</span><span>, são exemplos de</span> <span class="hps">elementos que</span> <span class="hps">normalmente fazem parte</span> <span class="hps">do chrome.</span></span></p> +</blockquote> +<p>Pego de <a href="/en/Chrome_Registration" title="en/Chrome Registration">Chrome Registration</a>.</p> +<p><span class="long_text" id="result_box" lang="pt"><span class="hps">Em outras palavras,</span> <span class="hps">o</span> C<span class="hps">hrome</span> <span class="hps">é tudo o que</span> <span class="hps">você vê no</span> <span class="hps">Firefox.</span> <span class="hps">Todas as janelas do</span> <span class="hps">Firefox</span> <span class="hps">pode ser visto</span> <span class="hps">como tendo duas partes</span><span>: (1)</span> <span class="hps">o</span> <span class="hps alt-edited">Chrome</span> <span class="hps">e (2)</span><span>, possivelmente,</span> <span class="hps">uma área de conteúdo</span><span>, como o</span> <span class="hps">que exibe</span> <span class="hps">páginas da web</span> <span class="hps">em uma aba</span> <span class="hps">do Firefox.</span> <span class="hps">O Windows</span><span>, como</span> <span class="hps">a janela de</span> <span class="hps">downloads são</span> <span class="hps">puro Chrome.</span> <span class="hps">A maior parte</span> <span class="hps">do código para</span> <span class="hps">uma extensão</span> <span class="hps">reside na pasta</span> <span class="hps">chrome</span><span>, assim como</span> <span class="hps">no exemplo</span> Hello World<span>.</span></span></p> +<p><span class="long_text" id="result_box" lang="pt"><span class="hps">Como vimos</span> <span class="hps">na estrutura de diretório</span> <span class="hps">da extensão</span> <span class="hps">descompactada,</span> <span class="hps">o</span> <span class="hps alt-edited">Chrome</span> <span class="hps">é composto de</span> <span class="hps">três</span> <span class="hps">partes:</span></span> <span style="color: #0000ff;">content</span>, <span style="color: #0000ff;">locale</span> e <span style="color: #0000ff;">skin</span>. <span class="long_text" id="result_box" lang="pt"><span class="hps">Eles</span> <span class="hps">três</span> <span class="hps">são necessários</span> <span class="hps">para a maioria das</span> <span class="hps">extensões.</span> <span class="hps">Se abrirmos</span> <span class="hps">o arquivo</span> <em><span class="hps">chrome.manifest</span></em> <span class="hps">(novamente,</span> <span class="hps">qualquer editor de texto</span> <span class="hps">serve)</span><span>, vemos que</span> <span class="hps">as mesmas</span> <span class="hps">três</span> <span class="hps">seções</span> <span class="hps">são mencionadas</span><span>:</span></span></p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">content xulschoolhello content/ +skin xulschoolhello classic/1.0 skin/ +locale xulschoolhello en-US locale/en-US/ +</pre> + </div> +</div> +<p><span style="color: #0000ff;">O arquivo <em>chrome.manifest</em> fala ao Firefox onde procurar por arquivos chrome.</span> <span class="long_text" id="result_box" lang="pt"><span class="hps">O texto</span> <span class="hps">é espaçado</span> <span class="hps">para parecer uma</span> planilha<span class="hps">,</span> <span class="hps">mas isso</span> <span class="hps">não é necessário.</span> <span class="hps">O analisador</span> <span class="hps">ignora</span> <span class="hps">espaços</span> <span class="hps">repetidos.</span></span></p> +<p><span class="long_text" id="result_box" lang="pt"><span class="hps">A primeira palavra</span> <span class="hps">em uma linha</span> <span class="hps">diz</span> ao <span class="hps">Firefox</span> <span class="hps">o que é que</span> <span class="hps">está sendo</span> <span class="hps atn">declarado (</span><span>conteúdo</span><span>, skin,</span> locale<span>,</span> <span class="hps">ou</span> <span class="hps">outros mencionados</span> <span class="hps">mais tarde)</span><span>.</span> <span class="hps">O segundo é</span> <span class="hps">o nome do pacote</span><span>, que</span> <span class="hps">vamos explicar</span> <span class="hps">em breve.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Pacotes</span> <span class="hps alt-edited">Skin</span> <span class="hps alt-edited">e locale</span> <span class="hps">tem</span> <span class="hps">um terceiro valor</span> <span class="hps">para especificar</span> <span class="hps">o</span> <span class="hps">local ou</span> <span class="hps alt-edited">qual</span> skin <span class="hps">eles</span> <span class="hps">estão usando</span><span>.</span></span><span id="result_box" lang="pt"><span class="hps"> Pode haver</span> mais de uma skin<span class="hps"> e</span> <span class="hps">locales</span> </span>escolhidos. <span id="result_box" lang="pt"><span class="hps">O caso mais</span> <span class="hps">comum é usar uma skin</span> <span class="hps">mundial</span></span>, a "<em>classic/1.0"</em>, <span class="short_text" id="result_box" lang="pt"><span class="hps">e</span> <span class="hps">múltiplos</span> <span class="hps">locale</span></span>, um para cada tradução. <span class="short_text" id="result_box" lang="pt"><span class="hps">Finalmente, a localização</span> <span class="hps">esta especificada.</span></span></p> +<p><span id="result_box" lang="pt"><span class="hps">Existem algumas opções</span> <span class="hps">adicionais que podem ser</span> <span class="hps">incluídos nas</span> <span class="hps">linhas de um</span> <span class="hps">arquivo</span> <span class="hps">chrome.manifest</span><span>.</span></span> Elas estão documentadas na página <a href="/pt-BR/docs/Chrome_Registration" title="en/Chrome Registration">Chrome Registration</a>. Notavelmente, podemos especificar configurações para um SO específico. Isto é muito importante porque a aparência do navegador é muito diferente em cada Sistema Operacional. Se nossa extensão precisa ser diferente em sistemas diferentes, nós podemos mudar o arquivo manifest para se parecer com isso:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">content xulschoolhello content/ +skin xulschoolhello classic/1.0 skin/unix/ +skin xulschoolhello classic/1.0 skin/mac/ os=Darwin +skin xulschoolhello classic/1.0 skin/win/ os=WinNT +locale xulschoolhello en-US locale/en-US/ +</pre> + </div> +</div> +<p>Desta maneira podemos separar skins para o Windows, Mac OS X, e Linux (<span class="short_text" id="result_box" lang="pt"><span class="hps">além de outros</span> <span class="hps">sistemas tipo Unix</span></span>), <span class="short_text" id="result_box" lang="pt"><span class="hps">cada uma definida</span> <span class="hps">em um diretório separado</span></span>. <span id="result_box" lang="pt"><span class="hps">Como a maioria dos</span> <span class="hps">outros sistemas</span> <span class="hps">são baseados em</span> <span class="hps">Unix</span><span class="atn">, a skin "</span><span>unix</span><span>"</span> <span class="hps">é a padrão,</span> <span class="hps">sem</span> flags<span>.</span></span></p> +<h2 id="O_Chrome">O Chrome</h2> +<p>Como mencionado anteriormente, o chrome é composto de 3 seções: content, locale e skin. O content é a mais importante seção, com a <span id="result_box" lang="pt"><span class="hps atn">interface de usuário (</span><span>XUL</span><span>)</span> <span class="hps">e</span> <span class="hps atn">arquivos de script (</span><span>JS</span><span>)</span><span>.</span></span> A seção skin tem os arquivos que definem mais a aparência e visual da UI (usando CSS e imagens, igual páginas da web). Finalmente, a seção locale tem todo texto usado na extensão, em DTD e <span class="short_text" id="result_box" lang="pt"><span class="hps">arquivos de propriedades</span></span>. Está divisão permite outros desenvolvedores criarem temas para substituir as skins, e criar traduções em diferentes linguagens, tudo isso sem ter que mudar sua extensão ou seu code(código). Isto dá as extensões do Firefox grande flexibilidade.</p> +<p>Arquivos Chrome são accessados através do protocolo chrome. Isto precisa de uma chrome URI parecida com isso:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">chrome:<span class="code-comment">//nomedopacote/seção/caminho/para/arquivo</span></pre> + </div> +</div> +<p>Então, para instância, se você quer acessar o arquivo <em>browserOverlay.xul </em>na extensão, a chrome URI pode ser<em> <a><span class="external">chrome://xulschoolhello/content/browserOverlay.xul</span></a></em></p> +<p><span id="result_box" lang="pt"><span class="hps">Se</span> <span class="hps">você tem</span> <span class="hps">muitos arquivos</span> <span class="hps alt-edited">no content</span> <span class="hps">e quer</span> <span class="hps">organizá-los</span> <span class="hps">em subdiretórios</span><span>,</span> <span class="hps">não há nada que</span> <span class="hps">você precisa mudar</span> <span class="hps">em</span> <span class="hps">chrome.manifest</span><span>, tudo que você</span> <span class="hps">precisa é adicionar</span> <span class="hps">o caminho certo</span> <span class="hps">depois de</span> <span class="hps">content na</span> <span class="hps">URI.</span></span></p> +<p>Arquivos Skin e locale funcionam do mesmo jeito, e você não precisa especificar nome das skins ou nomes dos locale. Então, para acessar o arquivo DTD na extensão Hello World, o caminho chrome é <em><a class="external" rel="freelink">chrome://xulschoolhello/locale/browserOverlay.dtd</a></em>. O Firefox sabe qual locale procurar.</p> +<p>Este é um experimento interessante. Abra uma nova Aba do Firefox, escreva <em><a class="external" rel="freelink">chrome://mozapps/content/downloads/downloads.xul</a></em> na sua barra de endereços e pressione ENTER. Surpreso? Você só acabou de abrir a janela de Downloads em uma Aba do Firefox! Você pode acessar qualquer arquivo chrome só escrevendo esta URI na barra de endereços. Isto pode ser conveniente se você quer inspecionar arquivos de script que são parte do Firefox, outras extensões, ou a sua própria. A maioria destes arquivos são abertos como arquivos de texto, com a exceção de arquivos XUL, os quais são executados e mostrados como você normalmente vê em uma janela.</p> +<h3 id="Content">Content</h3> +<p>Existe 2 arquivos na pasta content. Vamos ver o arquivo XUL primeiro.</p> +<p>Arquivos <a href="/en/XUL" title="en/XUL">XUL</a> são arquivos XML que definem os elementos da interface de usuário no Firefox e Extensões Firefox. XUL foi inspirado em HTML, então você irá ver muita coisa parecida entre as duas. Porém, XUL é também uma melhoria sobre o HTML, tendo aprendido de muitos erros cometidos durante a evolução do HTML. XUL permite á você criar ricas e mais interativas interfaces do que o HTML permitirá, ou pelo menos XUL é mais fácil.</p> +<p>Arquivos XUL usualmente definem uma das duas coisas: janelas ou overlays. O arquivo que você tinha aberto antes, <em>downloads.xul</em>, tem o código que define a janela de Downloads. O Arquivo XUL incluído na extensão Hello World é um overlay. Um overlay amplia uma janela existente, adicionando novos elementos nela ou substituindo alguns elementos dela. A linha que nós pulamos no arquivo <em>chrome.manifest</em> coloca que este arquivo XUL é um overlay para a janela principal do navegador:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">overlay chrome:<span class="code-comment">//browser/content/browser.xul chrome://xulschoolhello/content/browserOverlay.xul</span></pre> + </div> +</div> +<p>Com esta linha, O Firefox sabe que isso precisa pegar o conteúdo de <em>browserOverlay.xul</em> e colocar esse overlay na janela principal do navegador, <em>browser.xul</em>. Você pode declarar overlays para qualquer janela ou diálogo no Firefox, mas overlays na janela principal do navegador é de longe o caso mais comum.</p> +<p>Agora vamos ver o conteúdo do nosso arquivo XUL. Nós iremos pular algumas linhas do começo <span class="short_text" id="result_box" lang="pt"><span class="hps">pois se referem a</span> <span class="hps">skin</span> <span class="hps">e o locale</span></span>, <span class="short_text" id="result_box" lang="pt"><span class="hps">e vamos</span> <span class="hps">ver elas</span> <span class="hps">mais tarde</span></span>.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><overlay id="xulschoolhello-browser-overlay" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"></pre> + </div> +</div> +<p>O elemento raiz no arquivo é um <em>overlay</em>. Outros documentos XUL usam a tag <em>window</em> ou <em>dialog</em>. <span class="short_text" id="result_box" lang="pt"><span class="hps">O elemento tem</span> <span class="hps">um id único</span></span>, <span id="result_box" lang="pt"><span class="hps">que</span> <span class="hps">você deve ter na</span> <span class="hps">maioria dos elementos</span> <span class="hps">no seu</span> <span class="hps">XUL</span></span>. O segundo atributo é o namespace, <span id="result_box" lang="pt"><span class="hps">que é algo que</span> <span class="hps">você deve sempre</span> <span class="hps">definir</span> <span class="hps">em</span> <span class="hps">seu</span> <span class="hps">elemento raiz do arquivo</span> <span class="hps">XUL</span><span>.</span></span> <span class="short_text" id="result_box" lang="pt"><span class="hps">Ela diz que</span> <span class="hps">esse node e</span> <span class="hps">todos os outros nodes filhos</span> <span class="hps">são</span> <span class="hps">XUL</span><span>.</span></span> Você só precisa alterar as declarações de namespace quando você mistura diferentes tipos de conteúdo no mesmo documento, tal como XUL com HTML ou SVG.</p> +<div class="panel" style="border-width: 1px;"> + <div class="panelContent"> + <div class="note"> + <span id="result_box" lang="pt"><span class="hps">Você deve ter notado</span> <span class="hps">a nomeação</span> <span class="hps">usamos</span> <span class="hps">em</span> <span class="hps">vários lugares</span></span>, como a id <em>xulschoolhello-browser-overlay</em>. <span id="result_box" lang="pt"><span class="hps">Este é o </span><span class="hps">namespace padrão</span> <span class="hps">que usamos para</span> <span class="hps">evitar conflitos com</span> <span class="hps">Firefox</span> <span class="hps">e outras extensões</span><span>,</span> <span class="hps">bem como fazer</span> <span class="hps">algumas tarefas de desenvolvimento</span> <span class="hps">mais fácil. Nós colocamos namespace em todos ids e classes de estilo(style classes) nos elementos do overlay porque eles vão ser misturados com outros elementos na janela principal do navegador.</span></span> Se usássemos ids como "<em>container"</em> ou "<em>input"</em>, elas iriam entrar em conflito com as ids usadas no Firefox, ou com as ids de overlays de outra extensão. Usando namespace minimiza problemas de compatibilidade com outras extensões. Nós usamos <a href="http://pt.wikipedia.org/wiki/CamelCase">CamelCasing</a> para nomes de arquivos, e letras <span class="short_text" id="result_box" lang="pt"><span class="hps">minúsculas</span></span> com <span class="short_text" id="result_box" lang="pt"><span class="hps alt-edited">hífens</span></span> para ids de elementos e nomes de classes(class names) de estilo CSS(CSS style), mas você é livre para usar seu próprio sistema.</div> + </div> +</div> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><script type=<span class="code-quote">"application/x-javascript"</span> + src=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/content/browserOverlay.js"</span> /></span></pre> + </div> +</div> +<p>Como no HTML, isto incluí um arquivo de script JavaScript. Você pode ter quantos "<em>script</em> elements" precisar em um documento XUL. Nós iremos ver isto no code(código) depois.</p> +<div class="panel" style="border-width: 1px;"> + <div class="panelContent"> + <div class="note"> + Você também deve ter notado como vamos formatar nosso código, e perguntar sobre as regras que se seguem. Nossa regra geral sobre o comprimento da linha é não ter linhas com mais de 80 caracteres. Isso parece muito restritivo, especialmente com arquivos XML, mas o número foi escolhido para permitir que praticamente qualquer editor de texto pudesse manipular esses arquivos facilmente. Mesmo os antigos editores de linha de comando funcionam bem com arquivos que tem linhas de 80 caracteres. A tabulação é muito simples: dois travessões, espaço em branco. A maioria dos nossos padrões de codificação são baseados em Mozilla ou de outros padrões conhecidos e utilizados.</div> + </div> +</div> +<p> Nós pulamos algum code(código) que será visto na seção locale, indo para a parte mais importante do conteúdo:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><menubar id="main-menubar"> + <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" + accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="helpMenu"> + <menupopup> + <menuitem id="xulschoolhello-hello-menu-item" + label="&xulschoolhello.hello.label;" + accesskey="&xulschoolhello.helloItem.accesskey;" + oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /> + </menupopup> + </menu> +</menubar> + +<vbox id="appmenuSecondaryPane"> + <menu id="xulschoolhello-hello-menu-2" label="&xulschoolhello.hello.label;" + accesskey="&xulschoolhello.helloMenu.accesskey;" + insertafter="appmenu_addons"> + <menupopup> + <menuitem id="xulschoolhello-hello-menu-item-2" + label="&xulschoolhello.hello.label;" + accesskey="&xulschoolhello.helloItem.accesskey;" + oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /> + </menupopup> + </menu> +</vbox> +</pre> + </div> +</div> +<p>Este code(código) adiciona o menu <em>Hello World</em> na janela do navegador.</p> +<p>(Nota: Tradução incompleta temporariamente.)</p> +<p>There are two similar code blocks, because in modern versions of Firefox, particularly on Windows, a single Firefox menu button is presented, with simplified menu options, rather than an extensive menu bar. The second code block covers the common menu button case; the first code block covers all other cases. Check <em>Menu Bar </em>under the <em>Options </em>menu of the menu button to toggle display of the classic menu on Windows and some Linux distributions.</p> +<p>In order to write this code, we needed some knowledge of the XUL code in <em>browser.xul</em>. We needed to know that the id of the right pane in the unified menu is <em>appmenuSecondaryPane</em>. We're adding a menu of our own, and telling Firefox to add it in that pane, right after the Add-ons item. That's the purpose of the attribute:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">insertafter=<span class="code-quote">"appmenu_addons"</span> +</pre> + </div> +</div> +<p><em>appmenu_addons</em> is the id of the menu element that corresponds to the Add-ons menu item in the main menu. We'll see later how we can find out things like the ids of browser elements, but for now let's look at the elements that compose the Hello World menu.</p> +<p>For the classic menu, we added the Hello World menu right in the "root" of the menu so that it would be very easy for you to spot it, but this is not a recommended practice. Imagine if all extensions added menus to the top menu; having a few extensions would make it look like an airplane dashboard, full of knobs and switches. In the case of the unified menu, things are a little more difficult due to lack of options. If your menu item fits in the Web Developer section, it is recommended that you add it there. Otherwise, the root menu might be your only recourse.</p> +<p>One recommended location for menus in the classic menu vase is under the <em>Tools</em> menu, so the code should really look like this:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><menupopup id=<span class="code-quote">"menu_ToolsPopup"</span>> + <menu id=<span class="code-quote">"xulschoolhello-hello-menu"</span> label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello.label;"</span> + accesskey=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.helloMenu.accesskey;"</span> + insertbefore=<span class="code-quote">"</span>devToolsEndSeparator<span class="code-quote">"</span>> + <menupopup> + <menuitem id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-hello-menu-item" + </span> label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello.label;"</span> + accesskey=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.helloItem.accesskey;"</span> + oncommand=<span class="code-quote">"XULSchoolChrome.BrowserOverlay.sayHello(event);"</span> /> + </menupopup> + </menu> +</menupopup> +</pre> + </div> +</div> +<p>We're overlaying the menu that is deeper into the XUL tree, but it doesn't matter because all we need is the id of the element we want to overlay. In this case it is the <a href="/en/XUL/menupopup" title="en/XUL/menupopup">menupopup</a> element that's inside of the Tools <a href="/en/XUL/menu" title="en/XUL/menu">menu</a> element. The <em>insertbefore</em> attribute tells Firefox to add the menu at the bottom of the dev tools section, above its end separator. We'll discuss more about menus later on in the tutorial.</p> +<p>Now let's look at the actual code:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">oncommand=<span class="code-quote">"XULSchoolChrome.BrowserOverlay.sayHello(event);"</span> +</pre> + </div> +</div> +<p>This attribute defines an event handler. The <em>command</em> event is the most frequently used in Firefox, since it corresponds to the main action for most UI elements. The value of the attribute is JavaScript code that invokes a function. This function is defined in the JS file that was included with the <em>script</em> tag. The JS function will be called once the user clicks on the menu item in the Hello World menu. All event handlers define a special object named <em>event</em>, which is usually good to pass as an argument to the function. Event handlers are explained in greater depth further ahead.</p> +<p>Now let's look at the JavaScript file and see what's going on when the event is fired.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="brush: js">/** + * XULSchoolChrome namespace. + */ +if ("undefined" == typeof(XULSchoolChrome)) { + var XULSchoolChrome = {}; +};</pre> + </div> +</div> +<p>The <em>XULSchoolChrome</em> namespace is defined. All objects and variables we define in this JavaScript are global, meaning that scripts in Firefox and other extensions can see them and interact with them. This also means that if we define an object called <em>MenuHandler</em> or some other generic name, it's likely going to conflict with an existing object. What we do here is define a single global object: <em>XULSchoolChrome</em>. Now we know that all of our objects are inside this object, which is unlikely to be duplicated or overwritten by other extensions.</p> +<p>You can read more about the <a href="/en/JavaScript/Reference/Operators/typeof" title="en/Core JavaScript 1.5 Reference/Operators/Special Operators/typeof Operator"><span class="external">typeof operator</span></a>. If you're unfamiliar with JavaScript or this particular syntax, initializing an object as <em>{}</em> is the equivalent of initializing it to <em>new Object()</em>.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="brush: js">/** + * Controls the browser overlay <span class="code-keyword">for</span> the Hello World extension. + */ +XULSchoolChrome.BrowserOverlay = {</pre> + </div> +</div> +<p>Finally, <em>BrowserOverlay</em> is our object. Naming and referencing objects in such a long and verbose manner can feel uncomfortable at first, but it's worth the cost.</p> +<div class="panel" style="border-width: 1px;"> + <div class="panelContent"> + <div class="note"> + We use <a class="external" href="http://java.sun.com/j2se/javadoc/writingdoccomments/index.html">Javadoc</a> style comments on all namespaces, objects and object members. This is a similar standard to the one used in Mozilla code, and some tools can generate documentation automatically from Javadoc.</div> + </div> +</div> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="brush: js">sayHello : function(aEvent) { + let stringBundle = document.getElementById("xulschoolhello-string-bundle"); + let message = stringBundle.getString("xulschoolhello.greeting.label"); + + window.alert(message); +}</pre> + </div> +</div> +<p>And, finally, this is our function declaration. Three lines of code are all we need for it to work. The first line in the body of the function declares a variable that will hold the <a href="/en/XUL/stringbundle" title="en/XUL/stringBundle">stringbundle</a> element defined in the overlay. The variable is declared using <em>let,</em> which is similar to <em>var</em> but with more restricted scope. Here you can read more about <a href="/en/JavaScript/Reference/Statements/let" title="let"><span class="external">let declarations</span>.</a></p> +<p>Just like in regular JS, we can use the <a href="/en/DOM" title="en/DOM"><span class="external">DOM</span></a> (Document Object Model) in order to manipulate the XUL document. First we get a reference of the <a href="/en/XUL/stringbundle" title="en/XUL/stringbundle"><span class="external">stringbundle element</span></a> in the document. This is a special element that allows us to obtain localized strings dynamically, by only providing a "key" that identifies the string. This is what we do on the second line. We call the <a href="/en/XUL/stringbundle#m-getString" title="en/XUL/stringbundle#m-getString">getString method</a> of the bundle element and get the localized message to be displayed. We then call the <a href="/en/DOM/window.alert" title="en/DOM/window.alert">window.alert</a> function with the message, just like we would do in an HTML document.</p> +<h3 id="Locale">Locale</h3> +<p>There are two types of locale files: DTD and properties, and in this example we use them both. DTD is the most efficient way of showing text in XUL, so you should use it whenever possible. It is somewhat inflexible so it can't be used for dynamically generated text, hence the need for an alternate way of getting localized strings.</p> +<p>Looking back at the menu code, you probably noticed some attributes such as this:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">label=<span class="code-quote">"&xulschoolhello.hello.label;"</span> accesskey=<span class="code-quote">"&xulschoolhello.helloItem.accesskey;"</span></pre> + </div> +</div> +<p>These attributes define the text that you see on the menus, and they are string keys that are defined in our DTD file, <em>browserOverlay.dtd</em>. The DTD file was included in the XUL file with the following code:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><!DOCTYPE overlay SYSTEM "chrome://xulschoolhello/locale/browserOverlay.dtd" ></pre> + </div> +</div> +<p>And in the DTD file you can see the association between keys and localized strings:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><!ENTITY xulschoolhello.hello.label <span class="code-quote">"Hello World!"</span>> +<!ENTITY xulschoolhello.helloMenu.accesskey <span class="code-quote">"l"</span>> +<!ENTITY xulschoolhello.helloItem.accesskey <span class="code-quote">"H"</span>></pre> + </div> +</div> +<p>Notice that on the XUL file you enclose the string key with <em>&</em> and <em>;</em> while on the DTD file you only specify the key. You may get weird parsing errors or incorrect localization if you don't get this right.</p> +<p>Access keys are the shortcuts that allow you to quickly navigate a menu using only the keyboard. They are also the only way to navigate a menu for people with accessibility problems, such as partial or total blindness, or physical disabilities that make using a mouse very difficult or impossible. You can easily recognize the access keys on Windows because the letter that corresponds to the access key is underlined, as in the following image:</p> +<div> + <p><img alt="" class="internal" src="../../../../@api/deki/files/4226/=accesskeys.png" style="width: 167px; height: 58px;"></p> +</div> +<p>Most user interface controls have the <em>accesskey</em> attribute, and you should use it. The value of the access key is localized because it should match a letter in the label text. You should also be careful to avoid access key repetition. For example, within a menu or submenu, access keys should not be repeated. In a window you have to be more careful picking access keys because there are usually more controls there. You have to be specially careful when picking access keys on an overlay. In our case, we can't use the letter "H" as an accesskey in the Main menu item, because it would be the same as the access key in the Help menu. Same goes with "W" and the Window menu on Mac OS. So we settled on the letter "l".</p> +<p>DTD strings are resolved and set when the document is being loaded. If you request the <em>label</em> attribute value for the Hello World menu using DOM, you get the localized string, not the string key. You cannot dynamically change an attribute value with a new DTD key, you have to set the new value directly:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="brush: js">let helloItem = document.getElementById(<span class="code-quote">"xulschoolhello-hello-menu-item"</span>); + +<span class="code-comment">// The alert will say <span class="code-quote">"Hello World!"</span> +</span>alert(helloItem.getAttribute(<span class="code-quote">"label"</span>)); +<span class="code-comment">// Wrong +</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, <span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello2.label;"</span>); +<span class="code-comment">// Better +</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, <span class="code-quote">"Alternate message"</span>); +<span class="code-comment">// Right! +</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, someStringBundle.getString(<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello2.label"</span>));</pre> + </div> +</div> +<p>This is the reason DTD strings are not a solution for all localization cases, and the reason we often need to include string bundles in XUL files:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><stringbundleset id="stringbundleset"> + <stringbundle id="xulschoolhello-string-bundle" + src="chrome://xulschoolhello/locale/browserOverlay.properties" /> +</stringbundleset></pre> + </div> +</div> +<p>The <a href="/en/XUL/stringbundleset" title="en/XUL/stringbundleset">stringbundleset</a> element is just a container for <a href="/en/XUL/stringbundle" title="en/XUL/stringbundle">stringbundle</a> elements. There should only be one per document, which is the reason why we overlay the <em>stringbundleset</em> that is in <em>browser.xul</em>, hence the very generic id. We don't include the <em>insertbefore</em> or <em>insertafter</em> attributes because the ordering of string bundles doesn't make a difference. The element is completely invisible. If you don't include any of those ordering attributes in an overlay element, Firefox will just append your element as the last child of the parent element.</p> +<p>All you need for the string bundle is an id (to be able to fetch the element later) and the chrome path to the properties file. And, of course, you need the properties file:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">xulshoolhello.greeting.label = Hi! How are you?</pre> + </div> +</div> +<p>The whitespace around the equals sign is ignored. Just like in <em>install.rdf</em>, comments can be added using the # character at the beginning of the line. Empty lines are ignored as well.</p> +<p>You will often want to include dynamic content as part of localized strings, like when you want to inform the user about some stat related to the extension. For example: "Found 5 words matching the search query". Your first idea would probably be to simply concatenate strings, and have one "Found" property and another "words matching..." property. This is not a good idea. It greatly complicates the work of localizers, and grammar rules on different languages may change the ordering of the sentence entirely. For this reason it's better to use parameters in the properties:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">xulshoolhello.search.label = Found %S words matching the search query!</pre> + </div> +</div> +<p>Then you use <a href="/en/XUL/stringbundle#m-getFormattedString" title="en/XUL/stringbundle#m-getFormattedString">getFormattedString</a> instead of <em>getString</em> in order to get the localized string. Thanks to this we don't need to have multiple properties, and life is easier for translators. You can read more about it on the <a href="/en/XUL_Tutorial/Property_Files#Text_Formatting" title="en/XUL Tutorial/Property Files#Text Formatting">Text Formatting section</a> of the XUL Tutorial. Also have a look at the <a href="/en/Localization_and_Plurals" title="en/Localization and Plurals">Plurals and Localization</a> article, that covers a localization feature in Firefox that allows you to further refine this last example to handle different types of plural forms that are also language-dependent.</p> +<h3 id="Skin">Skin</h3> +<p>Styling XUL is very similar to styling HTML. We'll look into some of the differences when we cover the XUL Box Model, and other more advanced topics. There isn't much styling you can do to a minimal menu and a very simple alert message, so the Hello World extension only includes an empty CSS file and the compulsory global skin file:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><?xml-stylesheet type=<span class="code-quote">"text/css"</span> href=<span class="code-quote">"chrome:<span class="code-comment">//global/skin/"</span> ?> +</span><?xml-stylesheet type=<span class="code-quote">"text/css"</span> + href=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/skin/browserOverlay.css"</span> ?></span></pre> + </div> +</div> +<p>The global skin CSS file holds the default styles for all XUL elements and windows. Forgetting to include this file in a XUL window usually leads to interesting and often unwanted results. In our case we don't really need to include it, since we're overlaying the main browser XUL file, and that file already includes this global CSS. At any rate it's better to always include it. This way it's harder to make the mistake of not including it. You can enter the chrome path in the location bar and inspect the file if you're curious.</p> +<p>This covers all of the files in the Hello World extension. Now you should have an idea of the basics involved in extension development, so now we'll jump right in and set up a development environment. But first, a little exercise.</p> +<h2 id="Exercise">Exercise</h2> +<p>Make the following changes to the example extension:</p> +<ul> + <li>Edit the welcome message that is displayed in the alert window.</li> + <li>Move the Hello World menu to the <em>Tools</em> menu, where it belongs.</li> +</ul> +<p>Repackage the XPI. Issue the following command from within the extension root directory on Linux or Mac OS X:</p> +<pre>zip ../xulschoolhello2.xpi * +</pre> +<p>On Windows, use a ZIP tool to compress all files and subdirectories within the extension root directory. Name the file with extension <em>.xpi</em></p> +<p>Re-install the XPI. You can just drag the XPI file to the browser and it will be installed locally.</p> +<p>Test it and verify your changes worked. If you run into problems at installation, it's likely that you didn't reproduce the XPI structure correctly, maybe adding unnecessary folders.</p> +<div class="note"> + <strong>Note:</strong> Packaging an extension is really just creating a ZIP archive of the contents of the main folder, then changing the filename extension to <code>.XPI</code>. Do <strong>not</strong> zip the containing folder, just its contents. The <code>content</code> folder, <code>chrome.manifest</code>, <code>install.rdf</code>, and other files and directories should be at the root level of your archive. If you zip the containing folder, your extension will not load.</div> +<p>Note that the <em>Tools </em>menu is hidden by default on Firefox 4 and above, on Windows and some Linux distributions. Check <em>Menu Bar </em>under the <em>Options </em>menu of the Firefox menu button to enable it.</p> +<p>Once you're done, you can look at this reference solution: <a href="/@api/deki/files/5141/=xulschoolhello2.xpi" title="https://developer.mozilla.org/@api/deki/files/5141/=xulschoolhello2.xpi">Hello World 2</a>.</p> +<p>{{ PreviousNext("XUL/School_tutorial/Comecando_com_as_Extensoes_do_Firefox", "XUL_School/Setting_Up_a_Development_Environment") }}</p> +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> |