May 28, 2007

Firefox extension lets you remove elements from Web pages

Author: Mayank Sharma

Are you irritated by huge graphical ads smack in the middle of an article? Or maybe you don't want to waste bandwidth viewing the dozens of images in a review, or user icons in forum boards? You can remove them for good with a single click by using Firefox's RIP extension, which zaps anything out of a Web page, permanently.

RIP, which stands for Remove It Permanently, is inspired by the two popular Firefox extensions -- Nuke Anything and Adblock. Nuke Anything is designed to remove elements from a page to make it more printer-friendly, but the extension doesn't remember those changes. Adblock, on the other hand, focuses solely on removing graphical advertisements. RIP can remove a lot more.

In addition to graphical ads, with RIP you can also remove text ads, or even pieces of text such as tables or copyright notices. The best thing about the extension is that it doesn't leave empty spaces where the removed content used to reside; if you delete a horizontal banner between two paragraphs, the page will close up around the missing element.

Start ripping

Installing the RIP extension, like all Firefox extensions, is a no-brainer. On the project homepage, click the latest version of the extension. Firefox will download and install it automatically, and when you restart the browser, Firefox will activate the extension.

After it's installed, depending on the content in a page, you'll notice up to three additional entries in Firefox's right-click context menu. The first option will remove the item that's under the position of the cursor at the time of right-clicking. When you mouse down to the "Remove this permanently" option of the context menu, the area that will be removed will be highlighted in a flashing red box.

The second option is to remove the IFrame from the page. An IFrame is an area within a Web page that contains another page from an external site. Many Web sites use IFrames to pull ads from external sources. IFrames also have their own horizontal and vertical scroll bars, which can make navigating a page cumbersome. If the IFrame on a page you're on is pulling content that you can do without, you can get rid of it easily. Just move the cursor over the IFrame and select "Remove IFrame permanently."

While most of the time, these techniques will suffice to clear away unwanted content, RIP has some advanced options as well. These are housed within the RIP Advanced submenu under the context menu.

The first set of advanced options helps you control the scope of removal. By default the highlighted area under the cursor is removed from the current page only. If the site you are viewing has pages based on a common template, and the pages are similar in nature, RIP can remove an element from all pages. For this action, once you've selected the area, instead of clicking on the "Remove this permanently" option, click on RIP Advanced -> Remove from all similar pages.

Besides removing an element from a page or all similar pages, RIP also lists options to remove a particular element all throughout a Web site and from the domain itself. These two options are helpful when you're removing irritating blobs of advertisements.

After these four options that control from where an element is being deleted, the next set of convenience options help you remove all similar elements. When RIP highlights an element for removal, it records the HTML code that defines that element. This helps RIP locate all elements within the page that are of the same type.

Besides the option to remove all items similar to the one currently selected, RIP can also show the HTML that defines the element. An element could be a simple cell inside a table defined by the <td> tag or text in an <h2> heading. When you float your mouse over this option, RIP highlights all the elements that'll be ripped in blinking red boxes.

Let's assume the item being removed is part of a bigger element, like a cell inside a table. The previous option allows you to remove all the cells within and outside the table. To remove cells only inside a particular table, you'd either have to remove each cell independently or look for the table element by trial and error. That's too much labor, so RIP has an option to remove the parent item of a selected element. Select any element of the table and choose the "Parent item only" option to remove this table and all its cells, leaving other tables and their cells intact.

If you can remove one parent, you can surely remove them all. Again, since RIP is aware of the selected element's parent type -- for example, a table defined with the same CSS class attribute -- it can remove all of them in one go. The "All similar parent items" option also shows the HTML tags common to all parents.

Bring back the dead

Pages from which one or more elements have been removed display a RIP tombstone in the bottom right corner of the Firefox window. When you mouse over this icon, it will display the number of elements that have been removed from this page.

Restoring pages to their original state is pretty straightforward. When you've removed an element, you'll notice an additional option in the content menu. "Undo last RIP" does exactly what it says; if you zap an element by mistake or if the page behaves awkwardly after you remove an element, this option will bring it back. The good thing about this option is that it works like a stack, keeping track of all the rips, so you can undo rips until the page gets back all the removed elements.

To temporarily get back all the removed elements and restore a page to its original form, right-click on the tombstone icon and select "Display all hidden items." This will restore the page to its original form until you reload it. If you want to permanently restore the page to its original form, right-click on the icon and select "Don't rip this page." This disables the extension from this page. But since the context menu options are always there, re-enabling merely involves removing an element.

Importing and exporting RIPs

As you go along using RIP, zapping pesky advertisements and other elements from Web sites, you'll build up a repository of RIPs. In true open source spirit, you are encouraged to share these with fellow RIP users on the RIP wiki, which already houses a good number of RIPs.

To access your repository of RIPs, either click on the tombstone icon or, in Firefox, go to Tools -> RIP Options. The RIP Options screen is divided into two panes. The left pane lists your current RIPs -- that is, pages from which content has been removed. When you click on a RIP, the right pane shows several details about it, including the URL of the site from which it is removing content. Also listed are the RIP's XPath queries, which help RIP identify the elements that have to be removed.

To export a RIP, select it and click on the Export RIP button in the left pane. Select the location where you want to save the RIP file, then follow the instructions to upload the RIP to the RIP wiki.

To import a RIP from the wiki, first locate one you like and download its associated .RIP file. In the RIP Options screen, click on the Import RIP button, and specify the file you downloaded. The RIP is automatically appended to your list of RIPs and activated.

RIP comes with some predefined RIPs, but they don't have a .RIP file. To add more options to these RIPS, copy the new XPath queries, one at a time, from the wiki, click on the Add XPath button in the right pane, and paste the query.

The RIP Options screen also has a Preferences tab that lets you customize RIPs' right-click context menu to remove certain options, like Undo last RIP. You can also change the color and behavior of the blinking box that helps you locate the RIP being affected.

Conclusion

The RIP extension is a useful add-on to Firefox. It supplements Adblock by removing not only irritating bits of ads but also unnecessary elements like user icons or repetitive elements of text. RIP is easy to use, since it includes all of its options in an easy-to-access right-click context menu. RIP gives you a high degree of control over your Web page changes, and helps you avoid repetitive removals.

Every Monday we highlight a different extension, plugin, or add-on. Write an article of less than 1,000 words telling us about one that you use and how it makes your work easier, along with tips for getting the most out of it. If we publish it, we'll pay you $100. (Send us a query first to be sure we haven't already published a story on your chosen topic recently or have one in hand.)

Click Here!