How to customize client side web pages in Firefox:Advanced tutorial

In this tutorial, I’ll show you how to modify a website using CYW using Model Mayhem as the example. The basic steps are as follows:

  1. Install the add on.
  2. Navigate to the page you want to modify
  3. F10 to activate.
  4. Select the element you want to modify and modify it.
  5. Change the page url filter as needed to determine where you want the app to be active.

Keep in mind this is augmented browsing meaning the changes you make are on your client side only. It does not require any changes on the web server and it will only work with browsers and computers where this is installed (you have the ability to export and import for other computers). You may also notice flickering elements on your pages the first time your browser renders it. That’s because the original web page is served and this add on goes in afterward and replaces or change content. The original elements will show briefly before they are changed.

Before you begin

I found it very helpful to have Firebug installed. It made it much easier to isolate elements in a complex page.

How to backup scripts

I recommend exporting each script after they are completed or before you make any changes.  To export the script,

  1. Go to Tools in Firefox, CYW, Open configuration. You can also right click on the CYW icon on the bottom toolbar of the Firefox browser.
  2. Highlight the script and export to XML.