mozilla

Compare Revisions

Building an extension

Change Revisions

Revision 33441:

Revision 33441 by Abee13 on

Revision 33442:

Revision 33442 by Abee13 on

Title:
Building an extension
Building an extension
Slug:
Building_an_Extension
Building_an_Extension
Tags:
NeedsTechnicalReview, Extensions, Add-ons, NeedsEditorialReview, NeedsUpdate
NeedsTechnicalReview, Extensions, Add-ons, NeedsEditorialReview, NeedsUpdate
Content:

Revision 33441
Revision 33442
t62    <h4 name="Extending_the_Browser_with_XUL">t
63      Extending the Browser with XUL
64    </h4>
65    <p>
66      Firefox's user interface is written in XUL and JavaScript. 
><a href="en/XUL">XUL</a> is an XML grammar that provides user int 
>erface widgets like buttons, menus, toolbars, trees etc. User act 
>ions are bound to functionality using JavaScript. 
67    </p>62    <p>
63      <b>Bold text</b><i>Italic text</i><a href="en/Link_title">L
 >ink title</a><a class="external" href="http://www.example.com">li
 >nk title</a><img alt="Image:Example.jpg" src="File:en/Media_Galle
 >ry/Example.jpg"><a href="File:en/Media_Gallery/Example.ogg">Media
 >:Example.ogg</a>
68    <p>64    </p>
69      To extend the browser, we modify parts of the browser UI by65    <pre class="script" function="math.formula">
> adding or modifying widgets. We add widgets by inserting new XUL 
> DOM elements into the browser window, and modify them by using s 
>cript and attaching event handlers. 
70    </p>66Insert formula here
71    <p>67</pre><img alt="Image:Example.jpg" src="File:en/Media_Gallery/Exa
 >mple.jpg"><a href="File:en/Media_Gallery/Example.ogg">Media:Examp
 >le.ogg</a>
72      The browser is implemented in a XUL file called <tt>browser68    <pre class="script" function="math.formula">
>.xul</tt> (<tt>$FIREFOX_INSTALL_DIR/chrome/browser.jar</tt> conta 
>ins <tt>content/browser/browser.xul</tt>). In browser.xul we can  
>find the status bar, which looks something like this: 
73    </p>69Insert formula here
74    <pre class="eval">70</pre><span class="plain">Insert non-formatted text here</span>--
 ><a href="User:Abee13">Abee13</a> 12:51, 26 February 2007 (PST)
75&lt;statusbar id="status-bar"&gt;
76 ... &lt;statusbarpanel&gt;s ...
77&lt;/statusbar&gt;
78</pre>
79    <p>
80      <tt>&lt;statusbar id="status-bar"&gt;</tt> is a "merge poin
>t" for a XUL Overlay. 
81    </p>
82    <h5 name="XUL_Overlays">
83      XUL Overlays
84    </h5>71    <hr>
85    <p>
86      <a href="en/XUL_Overlays">XUL Overlays</a> are a way of att
>aching other UI widgets to a XUL document at run time. A XUL Over 
>lay is a .xul file that specifies XUL fragments to insert at spec 
>ific merge points within a "master" document. These fragments can 
> specify widgets to be inserted, removed, or modified. 
87    </p>
88    <p>
89      <b>Example XUL Overlay Document</b>
90    </p>
91    <pre class="eval">
92&lt;?xml version="1.0"?&gt;
93&lt;overlay id="sample" 
94         xmlns="<span class="plain">http://www.mozilla.org/keymas
>ter/gatekeeper/there.is.only.xul</span>"&gt; 
95 &lt;statusbar id="<b>status-bar</b>"&gt;
96  &lt;statusbarpanel id="my-panel" label="Hello, World"/&gt;
97 &lt;/statusbar&gt;
98&lt;/overlay&gt;
99</pre>
100    <p>
101      The <tt>&lt;statusbar&gt;</tt> called <tt><b>status-bar</b>
></tt> specifies the "merge point" within the browser window that  
>we want to attach to. 
102    </p>
103    <p>
104      The <tt>&lt;statusbarpanel&gt;</tt> child is a new widget t
>hat we want to insert within the merge point. 
105    </p>
106    <p>
107      Take this sample code above and save it into a new file cal
>led <tt><b>sample.xul</b></tt> inside the <tt>chrome/content</tt> 
> folder you created. 
108    </p>
109    <p>
110      For more information about merging widgets and modifying th
>e user interface using Overlays, see below. 
111    </p>

Back to History