We would like to encourage you to post additional tips and hints about website manipulation in the comments of this article so that the page becomes as comprehensive as possible. All methods of manipulating websites have been tested with Firefox 3.5x and 3.0.x. Most will probably also work in previous versions of the web browser.

1. Userscripts and Greasemonkey

Greasemonkey and its userscripts are probably the most popular and known method of manipulation website contents in real time. Thousands of userscripts exist that add, remove or modify elements and features of web services. Some classic examples are changing the design of Gmail, adding new features to the Internet Movie Database IMDB or skipping the wait time at popular file hosts.

Generation of scripts requires web development knowledge, especially of html, JavaScript and CSS as these are used to alter the contents of the websites.

2. Platypus – Modify Websites Without Programming Skills

Platypus allows a user to modify websites with any programming skill requirements. This limits the reach of the Firefox add-on a bit as it is not possible to reach the depth of Greasemonkey. Possible options are to permanently remove elements from websites, change style attributes, change the font and background colors to black and white or to remove fixed sizes and positioning on a page.

3. Stylish – Modify CSS

The Stylish add-on for Firefox and its accompanying userstyles directory provide access to new styles that manipulate the CSS of a website.It can be used to remove, add, move and manipulate elements on a website permanently. The screenshot above shows the popular Atistic Google userstyle.

4. Yet Another Remove It Permanently

Yet Another Remove It Permanently is an add-on for the Firefox web browser that makes it possible to remove elements on websites permanently. Can for example be used to remove advertisement from Google Search results or images from websites. Basically any element can be removed with this add-on. A similar add-on is Nuke Anything Enhanced.

5. Firebug

Firebug is first and foremost an add-on for Firefox that presents lots of useful information to web developers. What many do not know is that it comes with the capabilities to manipulate elements on a website. It is probably not the first choice for this kind of manipulations but this comes in handy when testing different kinds of layouts, color combinations or fonts.

6. NoScript and Adblock Plus

Both the NoScript and the Adblock Plus add-on for Firefox are primarily being used to prevent scripts and advertisements from being displayed on the user’s computer monitor. This does make them limited tools for modifying websites.

7. Aardvark

Aardvark can be used to isolate or remove elements from websites.Has been primarily been designed to remove unneeded elements before printing a website.

Verdict:

There are definitely a lot possibilities to modify websites in Firefox; Certainly more than have been mentioned in this post. Probably the easiest possibilities are in the form of Greasemonkey. If you know of any additional add-ons that should be mentioned let us know in the comments.

Related posts

• 12 IMDB Userscripts (13)
• Spice Up Google Search With Google Fx (4)
• Greasemonkey UserScripts Updater (6)
• Greasemonkey To Firefox Add-On Compiler (10)
• Automatically Jump To First Text Field (4)

The Page Speed tab can be used to analyze the active website. A website optimization report will be generated that groups the findings into priorities. The high and medium priority groups list elements that should be optimized to increase the performance of the website. Low priority items on the other hand are fully or partially optimized items that can still provide some performance gains but not as much as the medium or high priority items.

Each entry is listed with a short description, priority and an expanding area that lists the elements that are affected and optimization tips on how to resolve the issue. This usually requires some research on how to implement the optimization, the Page Speed homepage is usually a good starting point as it contains some tips on how to resolve some of the issues. Some issues cannot be solved by the webmaster at all, like compressing or combining externally loaded JavaScript.

The Page Speed Activity tab on the other hand displays a timeline of all browser activities including JavaScript processing which makes it easier to spot scripts and elements that are increasing the loading times.

The data is divided into blocks that define elements like network latency, DNS lookups, connection establishment, and JavaScript processing.

Related posts

• Web Development: Widerbug For Firefox (8)
• Firefox Domain Lookup Add-on (1)
• Youtube Video Download (11)
• Youtube It Firefox Add-on (4)
• Youtube Comment Cloud Firefox Add-On (4)

Widerbug is a tweaked version of Firebug that has been specifically designed for widescreen monitors. Instead of dividing the computer screen vertically it divides it horizontally by displaying the Firebug information in a sidebar on the right side of the web browser. This is good news for web developers who use widescreen monitors to work on their web development projects.

A previous installation of Firebug has to be uninstalled from the web browser before Widerbug can be installed to avoid complications. The web development application can then be installed and uses the same shortcuts as Firebug with the only difference that the screen is opening in the right pane.

The only possible problem that users could run into are update delays as the developer of Widerbug needs to update his extension whenever Firebug gets updated.

Related posts

• Youtube It Firefox Add-on (4)
• Youtube Comment Cloud Firefox Add-On (4)
• Web Browser: Firefox Cache Search (2)
• Video Download Add-On NetVideoHunter For Firefox (2)
• Use Firefox Without A Computer Mouse (7)

“The alpha release includes the initial implementation for the JavaScript Debugger, CSS Inspector, DOM Inspector, Command Line and the Error Console, as well as the Scope module, which allows Opera Dragonfly to communicate with the Opera browser.”

Developers get quick access to every open window in Opera this way. Tabs provide access to Scripts, DOM and the Console. It’s not yet on the same level as the Firebug extension for Firefox. What I really like in Firebug is the fact that I can click on elements in the website and that the CSS attributes of that element are then displayed.

The Opera team has released this alpha version mainly to receive feedback from the community to improve Opera Dragonfly. Feedback can be given at the Dragonfly Feedback Page.

Related posts

• You better stop using Internet Explorer for now (18)
• Opera Dragonfly page is live (5)
• Opera Dragonfly announced (3)
• Youtube: Enhance Youtube Experience (11)
• Xenocode Web Browser Sandbox (0)

To do this you simply right-click the green Firebug icon in the status bar and select “Disable Firebug for mail.google.com”. Another option offered by Google would be to disable certain features of Firebug while visiting Gmail. Those are the Show XMLHttpRequests and Disable Network Monitoring options.

I was not able to verify any slowdowns with Firebug and was not able to verify any speed ups after disabling Firebug when visiting Gmail. I suppose some users can experience them and this is why I thought it would be nice to post this information.

To disable the options in Firebug you do the following:

1.Click the green or red icon in the bottom right corner of the browser window to open Firebug.
2.Click the Console tab.
3.Select Options.
4.Uncheck Show XMLHttpRequests.
5.Click the Net tab.
6.Select Options.
7.Check Disable Network Monitoring.

Related posts

• Yahoo to offer unlimited Email Storage (8)
• Yahoo Mail, Search And Messenger Upgrades (2)
• Xoopit To Become Yahoo Mail Exclusive (5)
• x Ways To Manipulate Websites In Firefox (6)
• Windows 7 Gmail Notifier (9)

Firebug is actually a great web development extension for Firefox which does also list all objects that are loaded with their full url on the server. I suppose you are already seeing where this is going, huh ? You just have to take a look at the objects and filter out the largest files which are most of the time the media files. Copy the url from that file and paste it into your download manager to download the mp3, video or other media file.

Let me give you an example on how to download a mp3 right from myspace. Make sure you have the firebug extension installed.

Visit myspace.com and click on a band’s website, e.g. http://myspace.com/theused
Open Firebug by pressing F12
Play a song
Check the NET tab in Firebug and search for the biggest file
Copy the location of that file (by right-clicking it) and paste it into your download manager.
Rename the file and give it the right file extension, in this case .mp3

This method can be used on almost every other site that offers media files. Want some examples ? Gametrailers, Myspace, Youtube, Armor Games and many more. It is not working with sites that stream content to your PC (like Internet Radio but all others should be fine.)

source: thanks Korben for the tip

Related posts

• x Ways To Manipulate Websites In Firefox (6)
• Website Optimization: Page Speed For Firebug (5)
• Web Development: Widerbug For Firefox (8)
• Sideload download free mp3 (1)
• Seeqpod search and listen to music (5)