browser – PHP & More

The other day I downloaded “Fahrenheit 451” by Ray Bradbury as a free eBook, and tried to read it. I found that I cannot read much more than the titles of each chapter.

I tried double-clicking and dragging, and saw that something appears on the screen, organized in paragraphs.

Right Click->Inspect Element

Now, a sub-window is opened at the bottom of the screen:

You can see in that sub-window that some text in English appears in a ‘div’ element just under another ‘div’ element of class ‘textLayer’. To the right of the ‘Inspect Element’ sub-window you can see the CSS rules:

As you can see, the value of property ‘color’ is ‘transparent’, You can edit that property using the color selector or by overriding the text value.
Let’s set it to ‘black’.

Now, you can see the paragraphs.
You can change the opacity property of ‘div.textLayer’ from 0.2 to a higher value (up to 1) in order to read the text better.
Firefox is a great PDF viewer, but my browser couldn’t save the document with the changes: the result was a corrupt file that cannot be opened. I’d written about it to the newsgroup ‘mozilla.wishlist’ found on server ‘news.mozilla.org’. and they opened a ticket.

Firefox users can add functionality to their browser by installing an add-on. To install an add-n click on Tools->Add-ons.

You can then search for your requested add-on: add-on to download movies from a site, to share a page in Facebook, to add a Delicious bookmark, etc. Another useful add-on is DOM Inspector, which allows you to locate and modify document elements. Firefox add-ons are written in Javascript and access document elements, just like Javascript scripts within HTML documents, except that the document an add-on accesses is named Chrome Document.

Accessing the Chrome Document

The Chrome document contains more than just the “window” element, accessed from a web page using Javascript. Chrome also contains menus, toolbars and other widgets. Let’s make changing one of the Chrome document’s elements your first step in add-on development. If you don’t have DOM Inspector installed in your browser, you can get it here. Now, you can use it to play around a little bit. For example, let’s change the ‘Tools’ menu’s name to ‘Fools’.

To do so, perform the following steps:

Tools->Web Developer->DOM Inspector:
In the DOM Inspector menu bar, choose: File->Inspect Chrome Document->(tab name)
In the DOM Inspector Window, click the magnifying-glass icon.
In the browser’s window click ‘Tools’ menu
IMPORTANT! This will NOT work if the “Global Menu BAR Integration” add-on is enabled!!!
Open the DOM Inspector window.
The ‘tools-menu’ node will appear on the right-hand part of the window.

Now, you can see that the value of the node’s “label” attribute is “Tools”
Right click the “Label” attribute, then left-click “Edit”.
In the “Edit Attributes” window opened change the Node Value and click “OK”.
Nice work!!!