extremetech Hacking Firefox phần 8 pptx

296 Part V — Installation, Automation, Tools, and Tricks Hacking with Checky Another notable extension for page validation is Checky, which is more centered on using online web validation services but comes with tons of options. This extension also has the abil- ity to create an agent, which automates several validation checks and caches the results locally. For more information or to install Checky, visit http://checky.sourceforge.net/ extension.html. Summary This chapter highlights how to quickly make local configuration changes, discusses using ScrapBook to organize notes and web pages, and finally recommends the mother of all web developer extensions to get the boat rockin’. After that, the chapter dives into a few extensions that help with hacking HTML, links, JavaScript, XUL, and validating web pages. The chap- ter’s main goal is to provide well-rooted and actively supported extensions that can really make an impact on the day-to-day web programming drudgeries that usually pop up. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 296 Creating Extensions and Themes Chapter 16 Understanding Mozilla Programming Chapter 17 Creating Extensions Chapter 18 Creating Themes part in this part 23_596500 pt06.qxd 6/30/05 3:09 PM Page 297 23_596500 pt06.qxd 6/30/05 3:09 PM Page 298 Understanding Mozilla Programming T his chapter introduces you to the wonderful world of Mozilla pro- gramming. You get to know the main Mozilla technologies and see how these technologies work together. After getting acquainted with the various concepts and terms, we take our first look at the exciting possi- bilities found in creating new browser extensions. What makes Mozilla programming and especially Mozilla extension pro- gramming so great? You can quickly achieve quite a lot with a simple text editor and some imagination. Moreover, Mozilla is truly cross-platform. For example, the vast majority of Firefox extensions can run on many different operating systems with no modifications whatsoever. Finally, Mozilla is open source. This means that you can see exactly what is happening behind the curtains in each and every component you want to enhance or modify. It also means that there are more people in the community who know the inner workings of the various Mozilla parts and can help you on your devel- opment quest. Understanding Mozilla Technologies This section provides an overview of the various Mozilla technologies, beginning with XML User Interface Language (XUL), the language Mozilla uses to describe user interfaces (UI). Then we’ll discuss JavaScript, a programming language used to implement the logic behind the user inter- face. You’ll also see how to use Cascading Style Sheets (CSS) to define the appearance of your HTML and XUL documents and how to programmati- cally access these documents using the Document Object Model (DOM) interfaces. The section concludes with a short overview of the Cross Platform Component Object Model (XPCOM). ˛ Understanding Mozilla technologies ˛ Introducing Firefox extension programming chapter in this chapter by Alex Sirota 24_596500 ch16.qxd 6/30/05 3:11 PM Page 299 300 Part VI — Creating Extensions and Themes XUL: XML User Interface Language XML User Interface Language (XUL) is the language used in Mozilla to describe user inter- faces. Being an XML language, it has all the advantages of XML: it is simple, text based, cross- platform, and very flexible. You can create an advanced user interface with XUL in minutes using a simple text editor. You don’t need to compile anything or to learn any platform-specific concepts or tools. This makes creating user interfaces with Mozilla as straightforward as creat- ing regular web pages, and similarly to a web page, your XUL user interface works on any plat- form supported by Mozilla. XUL is pronounced “zool” (rhymes with “cool”). XUL can be used to create both simple and complex user interfaces, starting with simple dialogs all the way to full-featured applications. In fact, the Mozilla applications — Firefox, Thunderbird, and the Mozilla Suite — are all built using XUL. There are several other XUL- based applications, including the Internet Relay Chat (IRC) client named ChatZilla. User interfaces created with XUL can be easily skinned, extended, and localized. For example, you can change the visual theme of your UI or translate it to another language by simply changing a few text files. Another nice feature is that you can open XUL documents inside your browser’s content area — exactly as you would open an HTML document. You can even run your XUL-based application directly from the Internet. This makes creating web applica- tions as easy as creating web pages. A XUL user interface definition is an XML file that contains the UI elements and their hierar- chal structure. For instance, your interface may consist of a window that contains two boxes. Each box can in turn have any number of child widgets (entry boxes, buttons, labels, and so on). In the following sections, we create and lay out some simple widgets, and finally create a com- plete XUL document. If you want to test the XUL code in the following examples, you can create a file with a .xul extension and the following contents: <?xml version=”1.0” encoding=”UTF-8”?> <window align=”start” xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there .is.only.xul”> . . . [Your XUL widgets go here] . . . </window> 24_596500 ch16.qxd 6/30/05 3:11 PM Page 300 301 Chapter 16 — Understanding Mozilla Programming Once you create the file and insert some XUL elements, you can open it in Firefox using File➪ Open File. The align=”start” part makes sure your XUL widgets are shown correctly when opened inside the browser window. XUL Widgets The basic element of a XUL document is a widget. Buttons, text boxes, menu items, and so on are all widgets. A widget is created by inserting an appropriate element into your XUL docu- ment. The attributes of this element determine the various properties of your widget. For example, the following defines a simple button: <button label=”Go”/> The label attribute determines the text that appears on the button. A button by itself isn’t much of a user interface, so let’s add a text box: <textbox value=”Enter you text here”/> The optional value attribute defines the default text that initially appears inside the text box. You shouldn’t put text labels directly in a XUL file. If you do, you won’t be able to use Mozilla’s localization mechanisms to translate this text into other languages. If you use XML entities instead of literal text strings, the translation will become virtually effortless. You learn about Mozilla localization in the next chapter. XUL elements can have many optional attributes. For example, some of the attributes that a text box can have follow: Ⅲ maxlength: The maximal number of characters that can be entered into the text box. Ⅲ readonly: Setting this attribute to true makes the entry box read-only. Ⅲ type: You can create special-purpose entry boxes with this attribute. For example, set- ting the value of this attribute to password creates a password entry box, one that doesn’t display what is being typed. XUL Layout We have seen how individual widgets can be specified using XUL. Now it is time to see how XUL handles layout. XUL uses a scheme called the box model to specify how the elements are oriented, aligned, and positioned. The user interface is divided into boxes. A box can contain UI elements or other boxes. Each box specifies whether its child elements are horizontally or vertically aligned. By grouping your elements into boxes, adding spacers, and specifying the flexibility of your ele- ments, you can achieve the wanted layout for you user interface. For example, the following specifies that we want three buttons to be arranged in a row: <hbox> <button label=”Red”/> <button label=”Green”/> <button label=”Blue”/> </hbox> 24_596500 ch16.qxd 6/30/05 3:11 PM Page 301 302 Part VI — Creating Extensions and Themes Figure 16-1 shows the horizontally arranged buttons. F IGURE 16-1: Horizontally arranged buttons As you can see, to create a horizontal layout, we placed the three buttons inside an hbox ele- ment. Similarly, to create a vertical layout, you place the elements inside a vbox: <vbox> <button label=”Red”/> <button label=”Green”/> <button label=”Blue”/> </vbox> Figure 16-2 shows the vertically arranged buttons. F IGURE 16-2: Vertically arranged buttons An example of a complete XUL document follows: <?xml version=”1.0”?> <window orient=”horizontal” xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”> <textbox value=”Enter you text here”/> <button label=”Go”/> </window> The xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only .xul” line specifies that the window children are XUL elements. RDF in XUL Applications Resource Description Framework (RDF) is a technology for describing Internet resources. It is typically implemented as an XML file having a special syntax. RDF is a complex topic outside the scope of this book. In the following sections, you can see some Mozilla configuration files written using this format, but understanding RDF is not required — all the examples include the necessary explanations and clarifications. 24_596500 ch16.qxd 6/30/05 3:11 PM Page 302 303 Chapter 16 — Understanding Mozilla Programming The RDF specification is maintained by the World Wide Web Consortium (W3C). For more information about this technology in Mozilla visit the Mozilla RDF page: http://www .mozilla.org/rdf/doc/. Additional XUL Resources Following are two additional XUL resources that might come in handy: Ⅲ Mozilla XUL project page: This page contains the XUL specification and links to addi- tional XUL resources: http://www.mozilla.org/projects/xul/. Ⅲ XUL Planet: This site is dedicated to XUL programming. It has several very helpful tutorials and a lot of reference material: http://www.xulplanet.com/. We now know what XUL is and how we can use it to create user interfaces. But XUL by itself isn’t very useful; we have merely created a bunch of elements and placed them together. We need a way to add some functionality to our user interface. This is usually done with JavaScript, which leads us to the following section. JavaScript JavaScript is a powerful scripting language most widely used for creating dynamic web pages. Mozilla also uses JavaScript to implement the logic behind XUL user interfaces. Like many other technologies used in Mozilla, JavaScript is very easy to master; you don’t have to be an experienced programmer to start writing JavaScript programs. JavaScript and Java are two completely different languages. They both have syntax somewhat similar to C, but other than that, they don’t really have much in common. JavaScript is a lightweight scripting language created by Netscape, while Java is a more complex, compiled lan- guage developed by Sun Microsystems. JavaScript is an interpreted language. This means that the program is executed directly from the source code; there is no need to first compile it into binary form. This also means that pro- grams written in JavaScript are usually open source by definition — they are just plain-text pieces of code, located either in separate files or embedded in HTML or XUL documents. The JavaScript language is standardized by the ECMA-262 standard under the name ECMAScript. Syntax When it comes to syntax, JavaScript is similar to C, Perl, PHP, and many other programming languages. 24_596500 ch16.qxd 6/30/05 3:11 PM Page 303 304 Part VI — Creating Extensions and Themes If you want to test the JavaScript examples that follow, you can create an HTML document with the following contents: <html> <body> <script type=”text/javascript”> <! . . . [Your JavaScript code goes here] . . . // > </script> </body> </html> Insert your JavaScript code into the <script> element and open the HTML page inside the browser to see what it does. Conditional Statements Similar to most programming languages, JavaScript has an if. . .else statement: if (i == 1) { alert(“i is 1”); } else { alert(“i is not 1”); } As with many other programming languages, the else part of the if statement is optional. You can use the alert function to display a dialog with a custom message. JavaScript also has a switch statement that allows executing different blocks of code, depend- ing on the expression value: switch (i) { case 1: alert(“i is 1”); break; case 2: alert(“i is 2”); break; default: alert(“i is neither 1 nor 2”); } 24_596500 ch16.qxd 6/30/05 3:11 PM Page 304 305 Chapter 16 — Understanding Mozilla Programming Loops JavaScript has several different looping statements. For example, the following loop will be exe- cuted four times: for (i = 0; i < 4; i++) { alert(i); } In the preceding statement we want i to be initialized with 0 and to be incremented by 1 on each loop iteration. The loop will be executed as long as the value of i is less than 4. Variables Variables in JavaScript are created by either assigning a value to a new variable or by declaring it using the var keyword: var i; Variables declared inside a function have a local scope, meaning that they can be used only inside that function. Variables that were defined outside any function are global and can be used anywhere in the script. Functions You can define new functions using the function keyword: function add(a, b) { return a + b; } The preceding function receives two arguments, a and b, and returns their sum. Scripting the User Interface As previously mentioned, we will be using JavaScript in Mozilla to implement the logic behind the user interface. Each user interface element can trigger several events. For example, a button can trigger an event when it is pressed. If we attach a JavaScript function to such an event, it will be executed each time the event is triggered. A function attached to an event is called an event handler. If you are familiar with HTML, you may find the XUL events and their handlers very familiar. In fact, Mozilla handles XUL and HTML events in an almost identical fashion. Let’s create a simple XUL user interface — two entry boxes and a button (see Figure 16-3): <hbox> <textbox id=”first-box”/> <textbox id=”second-box”/> <button label=”Add” oncommand=”calculateSum()”/> </hbox> 24_596500 ch16.qxd 6/30/05 3:11 PM Page 305 [...]... references/xpcomref/ Introduction to Firefox Extension Programming The previous sections provided some basic explanations of the main Mozilla technologies Armed with that understanding, you can consider writing your first Mozilla-based product, a Firefox extension This section introduces you to the main concepts of extension programming What Are Firefox Extensions? Firefox extensions are Mozilla-based... and uninstall extensions In Firefox, you can open the Extensions dialog by selecting Extensions in the browser Tools menu Figure 16 -8 shows the Extensions dialog Note that while the dialog is named simply Extensions, it is frequently referred to as Extension Manager on Firefox wiki, forums, and elsewhere in this book Chapter 16 — Understanding Mozilla Programming FIGURE 16 -8: The Extensions dialog An... all its children are XUL elements 327 3 28 Part VI — Creating Extensions and Themes Ⅲ We have created a child statusbar element in the overlay node Its id is statusbar, which is identical to the id of the main Firefox statusbar element This means that our status bar is overlaid on top of the Firefox status bar Ⅲ Because our status bar element is merged into the Firefox status bar, all the child elements... chapter provided an overview of the main Mozilla technologies and explored the possibilities of Firefox extension programming Get ready to dive deeper into the process of creating Firefox extensions in the next chapter Creating Extensions chapter T his chapter explains how to create a fully functional Firefox extension from the ground up The extension performs a simple but useful task — it monitors... copies it to its final destination folder (typically the user profile folder), extracts the needed files, and registers the extension with the browser Currently, Firefox must be restarted to complete the extension installation process Future Firefox versions may support installing and registering extensions on the fly 319 320 Part VI — Creating Extensions and Themes After the extension is installed,... the extensions This dialog is also accessible from the Extensions dialog Firefox has an update mechanism that allows new extension versions to be automatically downloaded and installed when they are available An extension can specify a URL of a configuration file with information about the latest available version of the extension Firefox periodically queries this file and sees whether a new extension... available If it finds a new version, it displays a dialog that informs the user about the new version If the user decides to update the extension, Firefox automatically downloads and installs the new version If an extension doesn’t specify a custom update file URL, Firefox tries to query the Mozilla Update site for a new version of the extension You can manually check whether a new extension version is available... of our textboxes, we can calculate the sum and present it to the user in a popup box To see the previous example in action, you can create the following XUL document and open it in Firefox: Firefox extensions You will learn how to create a fully functional extension, how to test and troubleshoot it, and finally, how to deploy it by publishing it on your web page and on other extension-related sites The extension we will create in this section is called SiteLeds The idea is to have an icon, or a status led, on your Firefox status bar that displays the... the address of any specific web resource, an HTML page, a CSS file, and so on, you use a Uniform Resource Locator (URL) For example, if you want to specify the official Firefox page, you can use its URL, http://www.mozilla.org/products /firefox/ index html The http part means that the page should be fetched from the Web using the HTTP protocol Similarly, when specifying application resources (XUL documents, . up. 22_596500 ch15.qxd 6/30/05 3: 08 PM Page 296 Creating Extensions and Themes Chapter 16 Understanding Mozilla Programming Chapter 17 Creating Extensions Chapter 18 Creating Themes part in this. example in action, you can create the following XUL document and open it in Firefox: <?xml version=”1.0” encoding=”UTF -8 ?> <window align=”start” xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”> <script. 296 Part V — Installation, Automation, Tools, and Tricks Hacking with Checky Another notable extension for page validation is Checky, which is more centered