Hacking your Web browser in 7 easy steps

Plug-ins, extensions, add-ons -- leading browsers are fast becoming rich platforms for customizing your Web experience

With ubiquity comes a measure of uniformity -- such is the plight of the modern Web browser.

True, subtle differences in features, flexibility, and performance set some browsers ahead of the pack for particular uses. For the most part, however, sucking down text and rendering HTML, even as the breadth of computing activity in the browser has increased, make most browsing experiences similar, regardless of the frame in which you surf.

[ Chrome, Firefox, IE, Opera, or Safari: Find out which browser offers the perfect balance of features, speed, innovation, and flexibility for you | InfoWorld's expert contributors show you how to secure your Web browsers in this Web Browser Security Deep Dive PDF guide. ]

Enter the browser hack -- mechanisms by which users can customize their Web experience and tweak the performance of their browser of choice. All the major browsers make such customizations easy, though each employs a different mechanism and uses different labels for each one. For Internet Explorer, they're add-ons; for Opera, widgets; on Chrome, extensions will do the trick, as they will on Safari; Firefox is so open that you can customize your experience via add-ons, extensions, jetpacks, personas, plug-ins, and themes.

What's great about these additional blocks of code and images is that they're usually packaged for easy installation. In most cases, one click starts the process. And there's little reason to worry about the mechanism itself. The process works smoothly -- most of the time.

Anyone looking to make their browser faster, more functional, or just plain prettier can do so by following these seven steps to a richer Web experience.

Step 1 to a better Web browser: Know your platform

Browsers differ greatly in their openness to being improved. Among the first to open up its API, Firefox still offers the most complete API for programmers to navigate, boasting the widest variety of add-ons. Apple, on the other hand, opened up Safari only recently. As such, far fewer options for customizing Safari are available.

Depth of access plays a significant role in developers' ability to customize browsers as well, as plug-in developer Jason Barnabe notes.

"In Firefox, extensions get the same interfaces and level of access as the Firefox UI does, so they can do pretty much anything: access data like cookies and preferences, modify settings, change behaviour," says Barnabe, who is one of the developers of the Stylish plug-in for Firefox and Chrome. "Chrome only lets you into certain things -- and while the things you get are useful, it does stifle the possibilities."

Barnabe's attempts to rewrite Stylish for IE demonstrates another limiting factor developers face when it comes to coding plug-ins: browser upgrades that break with the past. IE has changed dramatically over the past few years, Barnabe says, and the documentation for the earlier versions doesn't help with the newer versions.

Programming language also plays a role in what developers offer. IE, for example, welcomes code written for .Net, rendering non-.Net programmers, such as Barnabe, less likely to port their plug-ins across all browsers.

Firefox, on the other hand, offers various ways to access browser data. Developers can write plug-ins using simple JavaScript, or they can plumb the depths of data structures using C++. Joe Hewitt, one of the initial developers of Firebug, tapped this level of access to create a debugging platform to watch what happens when the browser loads a page.

"I had to write a fair amount of C++ to hook into APIs that were not exposed through JavaScript," Hewitt says, adding that the extra work paid off. "Firefox remains the best platform for extensions due to the amount of power you have, while Chrome and Safari make the process simpler but limit you quite significantly."

Both Chrome and Safari offer simpler interfaces that can be easier to use, especially for JavaScript programmers. Safari even offers an interface that breaks apart many of the standard options for creating plug-ins.

Dedicated programmers can work around many of the limitations of these APIs, but not all. For example, the Cooliris plug-in, which displays content on an infinite wall in three dimensions, works with Firefox on Windows, Mac, and Linux, but only on the Windows version of Chrome.

"Creative solutions were necessary in some cases," said Austin Shoemaker, co-founder and CTO of Cooliris. "Sometimes the extension API does not enable us to extend the user interface in ways we would like to. However, some limitations simplify the API, and we can usually work around these limitations in native code."

In other words, simpler extensions, written once in JavaScript, run on any version of a browser and can usually be ported from browser to browser with little work. Those that dig deeper into the API and use native code may need to be significantly rewritten, rendering them useful and available on a limited variety of machines.

Step 2 to a better Web browser: Face-lift

Hacks that are for the most part cosmetic alter what is sometimes called the browser's "skin." These face-lifts are the easiest place to begin.

Firefox offers two paths for changing the look of your browser: Personas and Themes.

Two GIF files is all it takes to whip together a new look using Firefox's Persona mechanism. These images sit behind the buttons in the browser's header, as well as behind the status bar at the base of the window. You can use the Persona Plus plug-in to set up your Persona, or choose one of more than 35,000 premade Personas directly from Mozilla's Personas directory.

More complex, Themes can be used to not only change the underlying image but also rearrange the buttons on the browser header and even add new ones. There are far fewer Themes than Personas from which to choose, but they offer a wider range of goals. The Full Flat theme, for example, simplifies the browser header, while Mythical Sirens Summer Night fills your screen with electric colors. For those who miss the browsers from the 1990s, you can have all of the latest HTML5 features Firefox has to offer in a nostalgiac, old-school wrapper.

Chrome can also be easily redesigned with the help of any of the hundreds of themes available from Google's Themes Gallery. (There are many third-party directories to choose from on the Web as well.) Tastes vary, and there are options to match. The architects Venturi, Scott and Brown, Mariah Carey's management team, and Donna Karan have all rolled their own.

Google's Theme Creation Guide shows how to build your own theme from a pile of images. Google's mechanism is much more involved than Firefox's simple Persona methodology, and you will need to edit hundreds of images to cover cases such as when the user invokes Incognito mode. Any good theme should shift to handle a wide variety of contingenices.

Step 3 to a better Web browser: Tailor the browser to suit your surfing habits

When you need to organize browser tabs with some intelligence, Personas and Themes just don't go far enough. For that, Firefox add-on developers offer more than 400 packages devoted to automating tabs. They've also developed more than 1,200 ways to add and customize toolbars, and nearly 1,000 more add-ons for fiddling with bookmarks. And then there's the thousand-plus packages devoted to the appearance of your browser. Many of these offer similar versions for browsers other than Firefox.

It's hard to summarize such a diverse collection. Many, such as ColorfulTabs, just add colors or cosmetic touches to organize the controls. Cooliris, as mentioned above, takes content and displays it on an infinite wall in three dimensions.

AmazonAssist, eBay Sidebar, and eBayBuddy show how developers are tuning browsers to particular merchants. In some cases, the developers of these plug-ins ask for donations; in others, they make money from affiliate fees.

It may be worth pointing out that Opera pushes widgets, small Web pages that float separately and don't look like a browser. While producing a widget doesn't rearrange the browser's behavior itself, it does create a stripped-down page focused on a single purpose.

Step 4 to a better Web browser: Customize content to suit your needs

The information that appears in the browser window is also fair game. In fact, many of today's plug-ins reach right into the DOM tree to modify data so that it's easier to read or interact with. ImTranslator is a popular way for Firefox and IE users to pipe content from Web pages into Google's translation engine. I've always liked Bubble Translate, an extension for Chrome that is relatively unobtrusive and handy, especially for those who need occassional help translating a word or two.

Although it hasn't been updated recently, Poker Eval for Firefox provides a good example of how plug-ins can reach into Web content and provide useful information based on what it finds there -- in this case, the mathematical odds of winning the hand you've been dealt in an online poker room. Another, WikiLook, will pop up a small window with the Wikipedia entry for a selected word.

For those intending to hack browser content, Greasemonkey is essential. A sort of meta plug-in developer's tool, Greasemonkey allows you easy access to the DOM. Simply write a short bit of JavaScript and Greasemonkey handles the more painful part of interacting with Firefox. With Greasemonkey, your code can search through the DOM and apply any method you care to write. For programmers, it's an easy way to modify the content of an incoming Web page.

An even easier means of manipulating your browser is to create macros that remember a particular sequence of commands. iMacros from iOpus offers recordable macros for IE, Firefox, and Chrome. There's no need to even learn JavaScript.

There are a number of different variations on this idea. CronZilla, for example, loads a particular URL at set times.

Step 5 to a better Web browser: Bring the outside world in

Browsing should by no means be limited by screen real estate, nor should you have to toggle between tabs to access the information you want.

For those of us who wither at the thought of clicking on another window to find out whether anyone has sent us email, extension developers offer GMail Checker, which posts the number of unread Gmail messages in your inbox in the toolbar of Chrome. If that's not enough, there's GMail Checker Plus for those who need more email features packed into their browsing experience.

There are dozens of feed readers that suck down RSS files and display the information in a variety of ways. Feedly for Firefox integrates with Google Reader and many other feed sources to gather the latest information and organize it in tabs. Brief provides a simple means for interacting with RSS feeds, and StumbleUpon takes you somewhere random to help you find something new to like on the Web.

You can almost literally bringing the world inside the browser by adding one of the several weather plug-ins that tell you what you're missing in your heated/air-conditioned cubicle. WeatherBug has dozens of options for plug-ins and integration with the desktop and your phone. AniWeather provides animation to make all the weather you're missing seem that much more realistic.

Step 6 to a better Web browser: Beware the limits of trust

When it comes to hacking the browser, anyone leaning on the work of others should tread carefully. Each browser manufacturer warns its users to be careful loading extensions -- with good reason. Sophisticated plug-ins can poke around your system and read documents you don't want to share. Some will even install malware. Some are malware themselves.

The warning is hard to put into practice because there's no easy way to read the code for these plug-ins. The major directories are fairly good at keeping out malicious plug-ins, but they aren't a guarantee. And remember, fly-by-night operations are often good at getting high rankings on search engines -- and not always with the best of intentions.

Some plug-ins aim to help secure our browsing experience. The Web of Trust add-on displays the rankings for other websites compiled from the information provided by community members like you. Are these community members honest and forthright? Most of the time they probably are.

Dozens of other tools help manage the tracks we leave on the Internet. BetterPrivacy, for instance, deletes some of the so-called supercookies buried by the Flash plug-in. Torbutton securely enables or disables your browser's use of Tor, helping to prevent IP address leakage, cookie leakage, and privacy attacks.

Step 7 to a better Web browser: Reward meaningful improvements to the Web

Among the more controversial plug-ins are those that delete advertisements from Web pages. Some argue that Flash videos crash their machines or slow them to a crawl. Others employ ad-blocker plug-ins simply to "stick it to the man." Others (myself included) argue that the fate of the free Web depends on whether advertisements continue to pay the cost of producing and distributing content for gratis on the Internet.

1 2 Page
Recommended
Join the discussion
Be the first to comment on this article. Our Commenting Policies