Hacking Firefox - part 29 ppt

This extension adds an entry to the Tools menu, a shortcut-key combination of Alt+K, and right-click context functionality to capture selected text or whole page.. A toolbar of options w

The Configuration Mania window options are divided into categories on the left panel and option groupings on the right The most useful tweaks are in the Browser, HTTP Network, and Debug categories While the extension does have other great features, these are the ones that I find the most beneficial when setting my coding environment

FIGURE 15-1: Configuration Mania tweaking window

Browser

In the Browser category, I like to focus on three of the groupings:

UserAgent: The UserAgent section allows me to manipulate the strings that are

auto-matically sent to web servers when browsing This value is used by web pages to deter-mine what the browser’s capabilities are and can be modified to spoof or trick a web page

to allow you access to specific content or areas While many sites have been updating to support real standards, this feature is still rather handy

High Speed Browsing: While I normally adjusted these manually, this interface gives

me the ability to make changes with ease when doing high-speed testing

Others: The Others section allows me to disable modal error messages, change the

throbber’s link, and enable the tab browsing Single Window Mode in the base Firefox Options menu

HTTP Network

The HTTP Network category allows us to add some additional tuning of the number of con-nections, as well as set the HTTP connection type Making changes to these settings breaks away from known standards but can yield some incredible web page downloading performance

For more information on these settings and values, see Chapter 5.

Debug

The Debug category is the section that I use when I want to use Firefox’s built-in feature to help me debug existing JavaScript code Enabling JavaScript strict warnings assures tight align-ments with JavaScript standards and usually highlights some of the most obviously overlooked bugs that pop up Additionally, when coding or creating Firefox extensions, enabling “Enable JavaScript dump() output” and “Show Chrome JavaScript errors & warnings” will help to pin-point extension-specific syntax issues

For more information or to install Configuration Mania, visit http://members.lycos co.uk/toolbarpalette/confmania/index_en.html

The following preference settings can be set to enable the same debug features using the about:config screen:

—Enable Strict JavaScript warnings: javascript.options.strict = true

—Enable dump() output: browser.dom.window.dump.enabled = true

—Show Chrome Errors and warnings: javascript.options.showInConsole =true

Organizing Web Research

One of the most troubling issues that I have to deal with is organizing web research that I am doing for a specific project Whether it is a link to reference materials, code snippets, or forum posting, organizing and having them readily available is a monumental task, and that’s when ScrapBook comes to the rescue ScrapBook has to be one of the best organizational tools I have used for collecting page snippets or whole pages

This extension adds an entry to the Tools menu, a shortcut-key combination of Alt+K, and right-click context functionality to capture selected text or whole page As you can see from Figure 15-2, ScrapBook has the capability to create folders and subfolders, and edit saved con-tent All contents captured with ScrapBook are saved locally, along with such web page support elements as images, HTML, and CSS files

FIGURE 15-2: ScrapBook extension with content loaded

An entry’s property also contains the original URL or link back to the source of the captured content Another interesting feature highlighted in Figure 15-2 is ScrapBook’s ability to edit the locally saved content, as shown by the Edit toolbar below the main window

To download and install ScrapBook, visit http://amb.vis.ne.jp/mozilla/scrapbook/

The Godfather of Web Programming Extensions

Finding Internet or web programming tools can be a real hassle; however, with Chris Pederick’s Web Developer extension, web programming just got a lot easier The Web Developer exten-sion has so many features that this entire chapter could have been dedicated to using it In a nutshell, this extension allows you to edit, disable, enable, show, or hide key page features such

as cookies, images, JavaScript, style sheets, and form values It can also help you validate your documents for standards, show page element information, reset sessions or cookies, and a whole lot more As shown in Figure 15-3, Web Developer installs itself in three ways:

A toolbar of options with dropdown menus

A right-click context menu

A matching Tools menu option Any of these can be disabled by using the extension’s option panel The extension also adds a toolbar button that you can use to toggle the Web Developer toolbar itself and can find by choosing Customize from the View ➪ Toolbars menu

FIGURE 15-3: Web Developer extension toolbar and Tools menu

Key Web Developer Features

One of the key abilities that I like to tap into includes live Cascading Style Sheet editing, which can be accessed by choosing Edit CSS from Web Developer’s CSS menu or by pressing Ctrl+Shift+E This feature alone warrants installing this extension, as it will allow you to mod-ify style sheet properties and view the changes on the fly

The next feature I want to highlight allows you to validate your HTML or other pages against the World Wide Web Consortium standards on the W3C web site To access this feature, just navigate to the page you want to validate and choose Validate HTML from Web Developer’s Tools menu The current web page address is submitted to W3C’s validation scripts, and the results are displayed accordingly Running this every now and then helps with reducing page-rendering inconsistencies across systems or browsers and will keep your code in line

A third Web Developer extension feature that I cannot live without is the window resize fea-ture, which is available from the Web Developer’s Resize menu By default, it comes with

800 ×600 as an option for resolution testing, but you can add any custom entries from the Options menu This feature allows for quick testing of different resolutions without having to manually switch your display’s properties for testing

These are just a few of the many features wrapped up in the Web Developer extension The more you use it, the more you’ll love it

To download and install Web Developer, visit http://chrispederick.com/work/

firefox/webdeveloper/

Hacking Tools of the Trade

When putting this list together, I wanted to make sure that I included just the right extensions, even if I did not use them I pulled together a list of my most recommended tools, scoured the forums and download sites for comments, and then added a few more While this list is not a comprehensive list of every possible extension, it is a list of great extensions that you can use for hacking HTML, links, JavaScript, and XUL and for validating web pages You can search the ever-evolving and -updated Mozilla Update site,https://addons.update.mozilla org/, for more extensions and goodies

To help with installing extensions listed in this chapter, use my MR Tech’s Local Install exten-sion, which allows installing extensions (or themes) from the local disk For more information

or to install MR Tech’s Local Install, visit http://www.mrtech.com/extensions/ Additionally, you can make your Extension Manager listing much more manageable by installing the Slim Extension List extension, which will sort and trim the amount of space each extension uses on the list For more information or to install Slim Extension List, visit

http://v2studio.com/k/moz/

HTML Hacking Tools

The section is full of goodies to help with the everyday tasks a web programmer may come across This chapter contains extensions and information on sniffing out MIME types, validat-ing stored cookies, selectvalidat-ing colors, and changvalidat-ing the User Agentstring to use a different editor to view a page’s source It’s a nice arsenal of HTML tools to get you started loving Firefox more and more

Hacking with LiveHTTPHeaders

Hacking with the LiveHTTPHeaders extension is great when you need to sniff out the com-munication between the browser and the web server to extract details The information col-lected, as shown in Figure 15-4, includes all the details for requests and responses that are made from the browser and web server When dealing with different servers, configurations, and third-party tools, this extension really comes in handy It also helps with projects that require download prompting and triggering specific file MIME type actions, and is a must-have if you are diving into projects like these

FIGURE 15-4: LiveHTTPHeaders with style sheets enabled

This extension can be opened from the LiveHTTPHeaders option in the Tools menu and will collect information only while the window is open and the Capture option is selected, so hav-ing this extension installed should have no impact on the performance of download content when it is not in use

For more information or to install LiveHTTPHeaders, visit http://livehttpheaders mozdev.org/

Hacking with View Cookies

This extension makes it easy to view, temporarily remove, or permanently remove cookies that you might be working with This extension is good for all users and adds a new information tab panel to the page details To access the panel, shown in Figure 15-5, just choose the Page Info option from the Tools menu or right-click on the page and choose View Page Info All the default page information tabs will be populated with the addition of a new tab that contains cookie information

FIGURE 15-5: View Cookies information tab

Caution should be taken when using the Remove Cookie forever feature, as it will add that domain to the Cookies block list, and no further cookies for that domain will be added To undo this change, follow these steps:

1 Open the Firefox Options window from the Tools menu and select the Privacy section

on the option’s icon bar

2 Expand the Cookies section and select the Exceptions option.

3 Find the domain you just blocked from this list and remove it.

After you do this, setting cookies will be reenabled for that domain

For more information or to install View Cookies, visit http://www.bitstorm.org/

extensions/

Hacking with ColorZilla

The ColorZilla extension is great and has the following features listed on the site, among other colorful goodies:

Advanced Eyedropper

ColorPicker

Page Zoomer After installation, a new eyedropper icon is placed to the far left of the status bar Left-clicking will activate the eyedropper crosshairs to find colors, and right-clicking will give you the options available The eyedropper tools extracts the color codes from whatever you move the crosshairs over and can also be activated by pressing Shift+Esc The status bar is updated with color information corresponding to the location of the eyedropper crosshair; then, clicking on the final location will lock those values, which are accessible by right-clicking the status bar icon The Page Zoomer feature can be used in combination with the eyedropper to pinpoint a specific color Unlike Firefox’s built-in text zoom function, this Page Zoomer feature also increases the size of images, making it easier to find specific pixels that you may want to use the eyedropper on, and so on For web color matching work, this extension is in a league of its own

For more information or to install ColorZilla, visit http://www.iosart.com/firefox/

colorzilla/

Using User Agent Switcher Extensions

From the maker of the fantastic Web Developer extension comes another interesting tool, User Agent Switcher This tiny extension allows you to spoof or trick web sites into thinking that you are running different browsers Based on my experience, this tool helps in two ways:

It enables Firefox to bypass annoying or outdated Internet Explorer-only sites that really

do not have Internet Explorer-only content but are just too lazy to add support for real standards

It enables me to quickly test browser-specific features that I may have created

The user agent string or value is a standard browser feature that is discussed in RFCs 1945 and

2068, which basically involves having your browser send the web server a string to help with detecting the type of browser you are currently using This is helpful when having to code for specific projects or feature sets and is universally used and accepted The values that are submit-ted to the web server, though, do not have to meet any hard rules, and this extension lets you dynamically change this string The three default strings that User Agent comes with are listed

in Table 15-1

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

FIGURE 15-6: ViewSourceWith configuration screen

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 postnavigat-ing 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