Hacking Firefox ™ More Than 150 Hacks, Mods, and Customizations phần 8 pps

290 Part V — Installation, Automation, Tools, and Tricks Table 15-1 Default User Agent Values Option User Agent String Value Default Firefox’s current User Agent String value (This varies based on operating system and version of Firefox running.) Internet Explorer Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Netscape 4.8 Mozilla/4.8 [en] (Windows NT 5.1; U) Opera 7.54 Opera/7.54 (Windows NT 5.1; U) [en] Additional values can be added and customized to your liking by using the extension’s Options panel window. To download and install User Agent Switcher, visit http://chrispederick.com/work/ firefox/useragentswitcher/. Hacking with ViewSourceWith ViewSourceWith is a simple, well-thought-out extension that allows you to add a list of differ- ent editors via its Options window, shown in Figure 15-6, which will then be made available via the Source View option in Firefox’s View menu, as “View source with” in the right-click context menu, or as an optional toolbar button. The uses for this extension quickly materialize when working with simple local HTML pages that require quick editing. Additionally, pulling page source code into my favorite editors is a nice added bonus when reviewing or skimming through code. F IGURE 15-6: ViewSourceWith configuration screen 22_596500 ch15.qxd 6/30/05 3:08 PM Page 290 291 Chapter 15 — Hacking Tools for Web Programmers To download and install ViewSourceWith, visit http://dafizilla.sourceforge.net/ viewsourcewith/. Navigation and Link Hacking Tools Three tools that are used for handling or working with links and their HTML code are Mouse Gestures, ieview, and BBCode. All have different tasks and are extremely useful when navigat- ing from page to page or when posting link information on web forums and sites. Hacking with Mouse Gestures While this tool is not necessarily web programming–specific, once you review all the available options and features you will see how it can save you tons of time when navigating through the Internet — for example, to look up reference code or code snippets. By default, you can right- click and drag your mouse in several directions to execute a specific navigation command. (For example, right-clicking and dragging from right to left anywhere on the page jumps you back to the previous page; doing the reverse from left to right jumps you forward one page in your browsing history.) This extension is highly configurable but comes with some very easy-to- learn basic gestures, which, coupled with the Gesture Exchange link on their site, will have you customizing things to your liking or just leaving things as they are and enjoying quick navigation. To visually enhance the benefits of this little puppy, activate the mouse trails in the extension’s options window, and you will see your mouse gestures as you do them. For more information or to install Mouse Gestures, visit http://optimoz.mozdev.org/ gestures/. Hacking with ieview As much as I hate to admit it, there are still sites, including both public and corporate intranets, that rely heavily on Internet Explorer technology. So, whether for testing or pure outright need, this extension allows a quick way to load a link from Firefox into Internet Explorer. For most users this need revolves around Windows Updates, Office Updates, Microsoft Java VM, or other Microsoft media-rich sites — basically, sites that are Microsoft ActiveX–dependent and have been absorbed into the Microsoft collective. If you want to help with the migration pain of using Firefox until sites wake up and smell the Mozilla coffee brew- ing, you can use this extension as a one-time option from the right-click context menu or to permanently add sites that will launch in Internet Explorer. The two options that are added to the right-click context menu include “Open Link Target in IE” and “Always Open Linked Site in IE.” The first is for one-time use or testing, and the sec- ond will add the link to a list that will automatically launch in Internet Explorer after selecting this. To make changes to the “Always Open” list, open the Extension Manager and choose the Options for ieview to make configuration changes. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 291 292 Part V — Installation, Automation, Tools, and Tricks For more information or to install ieview, visit http://ieview.mozdev.org/. Hacking with BBCode and BBCodeXtra Without getting into extreme detail on how to use either one of these extensions, I can tell you that they can definitely help in filling out responses in forums or forms and with creating links and image tags for HTML, BBCode, and XHMTL. BBCode is the universally accepted markup language for just about all major online user forums. BBCode markup language has a much smaller subset of available formatting tags than HTML, and tags are usually delimited with brackets instead of the normal HTML tags, which are delimited with less than (<) and greater than (>) signs. Options that make either of these extensions great are their ability to create links from selected text or clipboards into an input form and to add text-formatting syn- tax, as needed. Either one of these extensions is a must-have if you intend on posting forum requests with links or have your own online forum that you use to support your applications, and so on. For more information or to install BBCode, visit http://jedbrown.net/1.0/mozilla/. For more information or to install BBCodeXtra, visit http://www.extenzilla.it/ bbcodextra/index.php?lang=eng. JavaScript and XUL Hacking Tools JavaScript and XUL programming can be used in tandem to create great Firefox extensions and applications. This section focuses on tools that will help with inspecting the Firefox inter- face, help debug JavaScript, and provide JavaScript tools and XUL packaging features. These tools vary in level of difficulty and may have a steep learning curve, but all should be worth the effort required. Hacking with the DOM Inspector The DOM Inspector is easily the best tool to use when working with Firefox and trying to cre- ate extension overlays by picking apart a window’s or dialog’s XUL elements. Using the combi- nation of File ➪ Inspect a Window and Search ➪ Select Element by Click, you can easily extract a window’s or an element’s id to use within your code. This is how I originally extracted the “throbber-box” and “search-container” ids that I later used and modified in my local userChrome.css file, as described in Chapter 2. Using this technique of selecting a window or dialog to inspect and then walking through the document tree also gives you a better understanding of the different elements that are used or are available with XUL interface programming. Installing the DOM Inspector is covered in Chapter 1 in greater detail, but suffice it to say, you will need to redownload the Firefox installer to get this little gem. After that, you can just fol- low the Custom installation options to enable Developer Tools when prompted. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 292 293 Chapter 15 — Hacking Tools for Web Programmers Hacking with JavaScript Console and Debugger The JavaScript Console and JavaScript Debugger are two different tools that are miles apart with respect to features and ease of use. The Console is a default install with Firefox and can be configured to show JavaScript errors and warnings from web pages, as well as errors from extensions or XUL applications. The entries that get added here are errors, warnings, and messages. While this native feature of Firefox is good, some crave more control over JavaScript coding, and that is where Venkman or JavaScript Debugger comes in handy. Venkman is the project code name for the JavaScript Debugger extension, which includes an extremely rich and robust editing and debugging environment specifically geared toward JavaScript debugging, as shown in Figure 15-7. F IGURE 15-7: JavaScript Debugger window This extension may be overwhelming for the faint of heart at first, but once you have gotten over the initial shock, the utilitarian features become very evident. For more information or to install Venkman, visit http://www.hacksrus.com/~ginda/ venkman/. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 293 294 Part V — Installation, Automation, Tools, and Tricks Hacking with Extension Developer’s Extension This extension is a nice compilation of quick tools that can make creating extensions a smooth ride. The extension comes with the following features: Ⅲ Extension Builder Ⅲ install.rdf Editor Ⅲ JavaScript Shell Ⅲ JavaScript Environment Ⅲ Live XUL Editor Ⅲ Live HTML Editor Ⅲ Toggle Debugging Preferences Ⅲ Reload All Chrome An Extension Developer menu is added to Firefox’s Tools menu, and all of these features are accessible there. Some of these features are mini–XUL applications that you can also use directly from Firefox without having to install them separately. While some of the features are really diamonds in the rough, the overall usefulness of this extension can quickly be reaped by novice or serious exten- sion developers. For more information or to install Extension Developer’s Extension, visit http://ted .mielczarek.org/code/mozilla/extensiondev/. Page Validation Hacking Tools While the Web Developer extension includes a couple of online validation service features, I want to also recommend two other extensions that may be of use: HTML Validator and Checky. These extensions offer different sets of features, but both can be tapped into to clean up any nonstandard coding that may be lingering in the HTML closet. Hacking with HTML Validator When I first used this extension on some of my pages, I was truly shocked and ashamed that it found so many errors and warnings. The core is based on Tidy, which was originally created by the W3C and has been updated and extended as an open-source project. Tidy’s core function- ality focuses on analyzing specific strict standards and formatting for HTML code. The latest version of HTML Validator, which taps into Tidy’s core features, adds a color-coded icon to display the status of the current page that is loaded to the status bar. The real function- ality comes with the information that it displays when you view a page’s source code from 22_596500 ch15.qxd 6/30/05 3:08 PM Page 294 295 Chapter 15 — Hacking Tools for Web Programmers View➪ Page Source. This is where HTML Validator adds a split panel, shown in Figure 15-8, to the bottom of the view source screen. The bottom-left panel provides a list of errors and warnings, and the bottom-right panel contains generic details and possible resolutions for the selected error or warning. A nice feature of this extension is that when in view source mode, clicking on an entry in the bottom-left panel jumps you to the offending code within the source code in the main code window above it, making it easier to track bugs within the code. Another feature that I have not really tapped into, but definitely will, is the Cleanup feature, which is available as a button on the bottom of the Page Source window or from the right-click context menu from the extension’s icon on the status bar. This feature steps you through pro- posed fixes for the offending page with source and browser views for the original as well as the newly cleaned HTML. F IGURE 15-8: HTML Validator list of errors and warnings in view source window For more information or to install HTML Validator, visit http://users.skynet.be/ mgueury/mozilla/. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 295 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 [...]... 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): ... configure, disable, 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... as follows: Chapter 16 — Understanding Mozilla Programming Ⅲ Browser: These interfaces allow you to access the browser history, autocomplete, download, and other functionalities Ⅲ Clipboard: Interfaces that allow you to programmatically cut and paste content to the clipboard Ⅲ File: A set of components and interfaces that can be used to access, list, and modify files and directories Ⅲ DOM: These interfaces... Ⅲ Navigation and accessibility: Extensions make browsing more convenient by adding new and alternative ways of doing routine things There are mouse gesture extensions that allow you to perform many tasks by simply moving your mouse in a special way Some extensions add useful context menu items and toolbar buttons for easy navigation between search results, opening new windows and tabs, and so on Ⅲ Page... change the way the browser displays web pages There are extensions that block ads and other unwanted content, add screenshots and similar useful information to search results, enlarge some elements of the page, and much more Ⅲ Search and web site integration: Extensions allow your browser to be tightly integrated with web sites and search engines For example, some extensions allow you to easily post to your... representation of the sample table You can use the DOM Inspector extension to see the exact tree structure You can inspect and modify the elements, their attributes, styles, and much more See Chapter 15 for more details on the DOM Inspector Chapter 16 — Understanding Mozilla Programming Navigating and Searching the Document Tree The following JavaScript code searches the document tree for our table using the... variety of graphics editors is available, starting with simple and lightweight utilities and going all the way to full-featured applications You will want your graphics editor to have several features First, it should be able to handle GIF, PNG, and JPG image formats The program should also be able to save transparent GIF and PNG files and give you some control over the saved format parameters, such... tutorial for creating, packaging, and deploying 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... files Extensions play an important role in Firefox philosophy The browser itself is very lean and free of clutter, which makes it exceptionally compact and user friendly Extensions are the optional building blocks that allow users to construct their personal dream browser, the one that has all Chapter 16 — Understanding Mozilla Programming the needed features and none of the unwanted ones This philosophy... creating, modifying, and validating HTML documents, style sheets, JavaScript programs, and so on The browser is the perfect platform for performing these tasks, and the Mozilla framework provides the necessary tools for creating such extensions Ⅲ Make editing web forms more convenient: There are extensions that can spell-check your posts, insert formatting tags for various forum systems, and even automatically . http://www.extenzilla.it/ bbcodextra/index.php?lang=eng. JavaScript and XUL Hacking Tools JavaScript and XUL programming can be used in tandem to create great Firefox extensions and applications. This section focuses on. available formatting tags than HTML, and tags are usually delimited with brackets instead of the normal HTML tags, which are delimited with less than (<) and greater than (>) signs. Options. 6/30/05 3: 08 PM Page 290 291 Chapter 15 — Hacking Tools for Web Programmers To download and install ViewSourceWith, visit http://dafizilla.sourceforge.net/ viewsourcewith/. Navigation and Link Hacking