Wink Saville’s Blog

Debugging Firefox:

*) DOM Inspector:

By default on Ubuntu the firefox DOM inspector isn’t enabled and when reading “Programmin Firefox” it is one of the recommended tools

But it isn’t enabled by default, apparently this is the case for Windows also where you need to do a custom install to get it. For Ubuntu I installed it via synaptic as firefox-dom-inspector I also added firefox-dbg and firefox-dev. Interesting, it wasn’t available right away and I needed to reboot the system, although there may be other ways.

*) Java script parsing bugs

At the moment, 20070602, I don’t see parsing errors for java script files I create?

*) Java script runtime debugging:

Method one: run FF from the command line with the -console option: wink@ic2d1:~$ firefox -console & and then use “dump” commands to print strings to the console.

Method two: use Venkman debugger. Again, wasn’t available by default, I used Toos->Add-on and navigated to “Web and developer tools” and searched for debugger, the Venkman debugger was the first choice. Seleting this and the “Install Now” button installed it.

*) Venkman debugger:

To get Venkman to debug my overlay I had to enable browser files: Goto menu item “Debug/Exclude Browser Files” and be sure it is not checked. The list of files will then expand and my script “sl.js” was visible. A break point could then be set.

Adding preferences isn’t too hard. I followed the instructions here. I had several problems of my own making plus one in the example code. The example code problem was:

var gMyPrefs = new PrefsWrapper(”extensions.myextension.”);

PrefsWrapper needed a number “1″ appended:

var gMyPrefs = new PrefsWrapper1(”extensions.myextension.”);

The other minor problem was “myextension” and “yourextension” needs to be “sparkrocket”.

The problems of my own making were a miss-understanding of javascript. At first I added the example code at the global scope but nothing would happen. After a little while of adding debug I figured out I needed to not have the example code at the global scope, but it needed to be in sr_initialize. I could then execute the code from prefsutils.js.

Also, the prompt service described here is similar but different from “prompt()” builtin function which also prompts for input but I couldn’t find the docs for it so I used the prompt service.

Finally, after adding the setUnicharPref I couldn’t unset it, at first I thought it would replace the defaults/preferences/extensions.js value for user.name. But no, that is just the default, the value is actually stored in ~/.mozilla/firefox/fbgu8siq.default/prefs.js and can be modified by going to the url “about:config”.

Here’s an update to this post 7/6/2008:

Use this link from firefox and in particular Setup the Development Environment.

—-

I used this link as a model for creating an extension which put a button on FF’s address bar: Building an extension

I more or less followed those instructions: Firefox user interface is written as a .xul file, pronounced “zool”. As explained in Building an extension in the “Chrome URI’s” section you can even execute the browser ui in the browser. Place “chrome://browser/content/browser.xul” in the browser address bar.

To add a new user interface element you create an overlay and basicly dynamically modify the browser.xul file. An overlay is an .xul file which defines a location where the new interface element is to be located and then what it is to do. Finding the location to insert isn’t difficult, the main UI document on my Ubuntu system it is located at at /usr/share/firefox/chrome/browser/content/browser/browser.xul

In the example they modified the status line which is can be found in browser.xul by searching for “statusbar”. Since I wanted to modify the address url I looked around and found that there is a texbox with the id=”urlbar”. So the prgs/fx/sl/chrome/content/sample.xul file contains the following:

<textbox id=”urlbar”>
<button insertafter=”page-proxy-dec” id=”my-button” label=”sl”
oncommand=”alert(’You pressed me!’); return false;”/>
</texbox>

Which adds a button with the label “sl” to the address bar and when pressed displays an allert with “You pressed me!”. So the following steps will get you the same thing:

1) Created my “extension” in ~/prgs/fx/sl which have the following 3 files:

chrome.manifest
install.rdf
chrome/content/sl.xul

2) The content of the files are:

wink@ic2d1:~/prgs/fx/sl$ cat chrome.manifest
content sl chrome/content/
overlay chrome://browser/content/browser.xul chrome://sl/content/sl.xul

 

wink@ic2d1:~/prgs/fx/sl$ cat install.rdf
<?xml version=”1.0″?>
<RDF xmlns=”http://www.w3.org/1999/02/22-rdf-syntax-ns#”
xmlns:em=”http://www.mozilla.org/2004/em-rdf#”>

<Description about=”urn:mozilla:install-manifest”>
<em:id>sl@saville.com</em:id>
<em:version>1.0</em:version>
<em:type>2</em:type>

<!– Target Application this extension can install into,
with minimum and maximum supported versions. –>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>2.0.0.*</em:maxVersion>
</Description>
</em:targetApplication>

<!– Front End MetaData –>
<em:name>sl</em:name>
<em:description>Shared link<em:description>
<em:creator>Wink Saville</em:creator>
<em:homepageURL>http://www.saville.com/</em:homepageURL>
</Description>
</RDF>

wink@ic2d1:~/prgs/fx/sl$ cat chrome/content/sl.xul
<?xml version=”1.0″?>
<overlay id=”sample”
xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”>
<textbox id=”urlbar”>
<button id=”my-button” label=”sl”
oncommand=”alert(’You pressed me!’); return false;”/>
</texbox>
</overlay>

3) To install the extension added sample@foo.net to the extensions directory:

wink@ic2d1:~/prgs/fx/sl$ cat ~/.mozilla/firefox/fbgu8siq.default/extensions/sl@saville.com
/home/wink/prgs/fx/sl

This is just the path to my extension

4) To actually get the url of the current page, this looks like the definitive source. and it says the best is window.content.location.href. I also tried document.getElementById(’urlbar’).value which also looks to have worked.