Comparar revisiones

Introducción a las extensiones de Firefox

Change Revisions

Revisión 267183:

Revisión 267183 de camilourd el

Revisión 217923:

Revisión 217923 de camilourd el

Título:
Introducción a las extensiones de Firefox
Introducción a las extensiones de Firefox
Enlace amigable (slug):
Escuela_XUL/Introducción_a_las_extensiones_de_Firefox
Escuela_XUL/Introducción_a_las_extensiones_de_Firefox
Contenido:

Revisión 267183
Revisión 217923
t7    <p>t
8      {{ Traducción("inglés", "XUL_School/Getting_Started_with_Fi
>refox_Extensions", "en") }} 
9    </p>
10    <p>
11      {{ PreviousNext("Escuela_XUL/Introducción", "Escuela_XUL/El
>ementos_esenciales_de_una_extensión") }} 
12    </p>
13    <h2 id="What's_a_Firefox_Extension?">
14      What's a Firefox Extension?
15    </h2>
16    <blockquote>
17      <p>
18        Extensions add new functionality to Mozilla applications 
>such as Firefox and Thunderbird. They can add anything from a too 
>lbar button to a completely new feature. They allow the applicati 
>on to be customized to fit the personal needs of each user if the 
>y need additional features, while keeping the applications small  
>to download. 
19      </p>
20    </blockquote>
21    <p>
22      Taken from the <a href="/es/Extensiones" title="es/Extensio
>nes">Extensions page</a>. 
23    </p>
24    <p>
25      As described in the quoted text, an extension is a small ap
>plication that adds something new to one or more Mozilla applicat 
>ions. This tutorial focuses on extensions for Firefox, but the sa 
>me (or very similar) principles apply to creating extensions for  
>other applications such as Thunderbird, Seamonkey, and Flock. 
26    </p>
27    <p>
28      It is also worth noting that there are differences between 
>the definition of <em>extension</em> and <em>add-on</em>. All ext 
>ensions are add-ons, but add-ons can also be themes, plugins, or  
>language packs. This tutorial is about extension development, but 
> themes and language packs are developed in a very similar way. P 
>lugins are entirely different, and they will not be covered on th 
>is tutorial. You can read more about plugins and their developmen 
>t in the <a href="/en/Plugins" title="en/Plugins">Plugins page</a 
>>. 
29    </p>
30    <p>
31      Firefox provides a very rich and flexible architecture that
> allows extension developers to add advanced features, customize  
>the user's experience, and completely replace and remove parts of 
> the browser. The <a class="link-https" href="https://addons.mozi 
>lla.org" title="https://addons.mozilla.org/">Mozilla Add-ons</a>  
>repository (AMO) holds an extensive number of extensions with a w 
>ide variety of functions: content filtering (<a class="link-https 
>" href="https://addons.mozilla.org/en-US/firefox/addon/1865" titl 
>e="https://addons.mozilla.org/en-US/firefox/addon/1865">AdBlock P 
>lus</a>, <a class="link-https" href="https://addons.mozilla.org/e 
>n-US/firefox/addon/722" title="https://addons.mozilla.org/en-US/f 
>irefox/addon/722">NoScript</a>), web application interaction (<a  
>class="link-https" href="https://addons.mozilla.org/en-US/firefox 
>/addon/3615" title="https://addons.mozilla.org/en-US/firefox/addo 
>n/3615">Delicious Bookmarks</a>, <a class="link-https" href="http 
>s://addons.mozilla.org/en-US/firefox/addon/5202" title="https://a 
>ddons.mozilla.org/en-US/firefox/addon/5202">eBay Companion</a>),  
>web development (<a class="link-https" href="https://addons.mozil 
>la.org/en-US/firefox/addon/6622" title="https://addons.mozilla.or 
>g/en-US/firefox/addon/6622">DOM Inspector</a>, <a class="link-htt 
>ps" href="https://addons.mozilla.org/en-US/firefox/addon/1843" ti 
>tle="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug 
></a>), and child protection (<a class="link-https" href="https:// 
>addons.mozilla.org/en-US/firefox/addon/5881" title="https://addon 
>s.mozilla.org/en-US/firefox/addon/5881">Glubble For Families</a>) 
>. These are very advanced and complex extensions, and you'll lear 
>n most of what it takes to create extensions like these (Glaxstar 
> actually worked on 3 of those listed). 
32    </p>
33    <p>
34      We'll begin by looking into a very simple extension.
35    </p>
36    <h2 id="The_Hello_World_Extension">
37      The Hello World Extension
38    </h2>
39    <p>
40      Our sample extensions and this tutorial in general are mean
>t for Firefox version 3 and above, but most of it works on previo 
>us versions of Firefox as well. We'll try to make it clear when w 
>e're discussing a feature that only works on some versions of Fir 
>efox. 
41    </p>
42    <p>
43      We'll now begin with a basic "Hello World" extension. Let's
> start by installing the extension. Click on the link below. 
44    </p>
45    <p>
46      <a href="/@api/deki/files/5139/=xulschoolhello1.xpi" title=
>"https://developer.mozilla.org/@api/deki/files/5139/=xulschoolhel 
>lo1.xpi">Install Hello World</a> 
47    </p>
48    <p>
49      This will either trigger an install or a file download, dep
>ending on the Content-type the webserver is using to serve the fi 
>le. The appropriate content type to trigger an install is <strong 
>>application/x-</strong>xpinstall. In this case a file download s 
>hould occur. 
50    </p>
51    <p>
52      If the content type is set correctly, you will probably get
> notified that the site is not allowed to install add-ons on Fire 
>fox. This is a security measure that prevents sites from installi 
>ng extensions without user consent. This is necessary because mal 
>icious extensions can do the same level of harm as any malicious  
>program: stealing data, erasing or replacing files, and causing u 
>nwanted behavior in general. AMO is the only pre-allowed site bec 
>ause all published add-ons on AMO have gone through a review proc 
>ess that includes security checks. 
53    </p>
54    <p>
55      After downloading the file, you can drag and drop it into t
>he Firefox content area, and the installation should begin. 
56    </p>
57    <p>
58      You'll see a window telling you that you're about to instal
>l an extension, with some additional information such as the name 
> of the author. You'll see a message saying that the author canno 
>t be verified. Only extensions signed with a digital certificate  
>can verify authorship. Signed extensions are rare, but we'll cove 
>r how to sign them later on. 
59    </p>
60    <p>
61      Click on the Install Now button. After the extension is ins
>talled, you'll be asked to restart Firefox. Installing, uninstall 
>ing, enabling and disabling add-ons (except plugins) require a re 
>start to complete, and there's no easy way to work around it. Thi 
>s is an important point to keep in mind if you're building an ext 
>ension that manipulates other extensions or themes. There's a <a  
>class="link-https" href="https://bugzilla.mozilla.org/show_bug.cg 
>i?id=256509" title="https://bugzilla.mozilla.org/show_bug.cgi?id= 
>256509">very old bug</a> that tracks this issue. 
62    </p>
63    <p>
64      Now, after restarting the browser, you'll see the Add-ons M
>anager window, showing the extension name, version, and a brief d 
>escription. 
65    </p>
66    <p>
67      <img alt="addonman.png" class="internal default" src="/@api
>/deki/files/4137/=addonman.png"> 
68    </p>
69    <p>
70      Close the Add-ons window. Look at the main Firefox window a
>nd see if you notice anything different. 
71    </p>
72    <p>
73      Did you see it? There's a new menu on the main menu bar, la
>beled "Hello World!". If you open the menu and then the menu item 
> below, you'll see a nice alert message (for some definitions of  
>'nice'). Click on the OK button to close it. 
74    </p>
75    <p>
76      <img alt="" class="internal" src="/@api/deki/files/4138/=he
>lloworldalert.png" style="width: 326px; height: 126px;"> 
77    </p>
78    <p>
79      That's all the extension does. Now let's take a closer look
> at it. 
80    </p>
81    <h2 id="Extension_Contents">
82      Extension Contents
83    </h2>
84    <p>
85      You may have noticed that the extension file you installed 
>is named xulschoolhello1.xpi. <a href="/en/XPI" title="en/XPI">XP 
>I</a> (pronounced "zippy") stands for Cross-Platform Installer, b 
>ecause the same installer file can work on all major platforms, a 
>nd this is the case for most extension XPIs. XPIs are simply comp 
>ressed ZIP files, but Firefox recognizes the XPI extension and tr 
>iggers the installation process when an XPI link is clicked. 
86    </p>
87    <p>
88      To look into the XPI file you need to download it first, no
>t install it. If the server triggers an install when clicking on  
>a link or button, what you need to do is right click on the <a hr 
>ef="/@api/deki/files/4225/=xulschoolhello1.xpi" title="https://de 
>veloper.mozilla.org/@api/deki/files/4225/=xulschoolhello1.xpi">in 
>stall link</a>, and choose the Save Link As... option. 
89    </p>
90    <p>
91      Next, we'll decompress the XPI file. One way to do this is 
>to rename the file so that it uses the <em>zip</em> extension ins 
>tead of the <em>xpi</em>. Another way is to open the file using a 
> ZIP tool. Most operating systems ship with a ZIP compression uti 
>lity, and there are more advanced tools available online. Make yo 
>ur pick, and decompress the file in a convenient location. You sh 
>ould see a directory structure similar to this one: 
92    </p>
93    <ul>
94      <li>xulschoolhello1
95        <ul>
96          <li>chrome.manifest
97          </li>
98          <li>install.rdf
99          </li>
100          <li>chrome
101            <ul>
102              <li>xulschoolhello.jar
103              </li>
104            </ul>
105          </li>
106        </ul>
107      </li>
108    </ul>
109    <p>
110      The JAR file contains most of the code, so we'll need to ex
>tract the contents of that file as well. Just like XPIs, all you  
>need is a ZIP utility to decompress the file. After doing that, y 
>ou'll have something like this: 
111    </p>
112    <ul>
113      <li>xulschoolhello1
114        <ul>
115          <li>chrome.manifest
116          </li>
117          <li>install.rdf
118          </li>
119          <li>chrome
120            <ul>
121              <li>xulschoolhello.jar
122              </li>
123              <li>xulschoolhello
124                <ul>
125                  <li>content
126                    <ul>
127                      <li>browserOverlay.xul
128                      </li>
129                      <li>browserOverlay.js
130                      </li>
131                    </ul>
132                  </li>
133                  <li>locale
134                    <ul>
135                      <li>en-US
136                        <ul>
137                          <li>browserOverlay.dtd
138                          </li>
139                          <li>browserOverlay.properties
140                          </li>
141                        </ul>
142                      </li>
143                    </ul>
144                  </li>
145                  <li>skin
146                    <ul>
147                      <li>browserOverlay.css
148                      </li>
149                    </ul>
150                  </li>
151                </ul>
152              </li>
153            </ul>
154          </li>
155        </ul>
156      </li>
157    </ul>
158    <p>
159      That's a lot of files for something so simple! Well, don't 
>worry, we'll shortly see the purpose of all of these files and re 
>alize this <em>is</em> quite simple. In the next section we'll in 
>spect these files and see what they do. 
160    </p>
161    <p>
162      {{ PreviousNext("Escuela_XUL/Introducción", "Escuela_XUL/El
>ementos_esenciales_de_una_extensión") }} 
163    </p>
164    <p>
165      <span style="font-size: small;">This tutorial was kindly do
>nated to Mozilla by Appcoast.</span> 
166    </p>
167    <p>
168      {{ languages( { "en": "en/XUL_School/Getting_Started_with_F
>irefox_Extensions", "fr": "fr/Vulgarisation_XUL/Premiers_pas_avec 
>_les_extensions_Firefox" } ) }} 
169    </p>

Volver al historial