Đăng ký Đăng nhập

Tài liệu Hacking firefox - part 30

.PDF
10
288
97

Mô tả:

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 syntax, 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 interface, 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 create extension overlays by picking apart a window’s or dialog’s XUL elements. Using the combination 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 follow the Custom installation options to enable Developer Tools when prompted. 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. FIGURE 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/. 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 extension 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 functionality 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 functionality comes with the information that it displays when you view a page’s source code from 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 proposed fixes for the offending page with source and browser views for the original as well as the newly cleaned HTML. FIGURE 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/. 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 ability 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 chapter’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. Creating Extensions and Themes part in this part Chapter 16 Understanding Mozilla Programming Chapter 17 Creating Extensions Chapter 18 Creating Themes Understanding Mozilla Programming T his chapter introduces you to the wonderful world of Mozilla programming. 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 possibilities found in creating new browser extensions. What makes Mozilla programming and especially Mozilla extension programming 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 development 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 interface. You’ll also see how to use Cascading Style Sheets (CSS) to define the appearance of your HTML and XUL documents and how to programmatically 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). chapter by Alex Sirota in this chapter ˛ Understanding Mozilla technologies ˛ Introducing Firefox extension programming 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 interfaces. Being an XML language, it has all the advantages of XML: it is simple, text based, crossplatform, 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 creating regular web pages, and similarly to a web page, your XUL user interface works on any platform 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 XULbased 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 applications as easy as creating web pages. A XUL user interface definition is an XML file that contains the UI elements and their hierarchal 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 complete 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: . . . [Your XUL widgets go here] . . . 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 document. The attributes of this element determine the various properties of your widget. For example, the following defines a simple button:
- Xem thêm -

Tài liệu liên quan