Two New Add-Ons!

We've made a lot of progress in the last two weeks, and we're confident now that we should be able to complete work pretty soon, definitely in a week or two. I've been having fun experimenting with XUL and javascript, so much so that I've been able to create two working add-ons, with minor bugs, which I hope to fix soon. I wish to add these to our to the list of add-ons we had initially proposed to design. They are as follows:

• Close Multiple Tabs: This add-on allows the user to close multiple tabs with a single click. It installs a button on the main toolbar, a menu item under the File menu and provides a keyboard shortcut. Each of these allow the user to access a dialog which shows the list of tabs currently open. The user can select one or more tabs, and click OK to close the selected tabs.
• Browser Turns Designer: This add-on allows the user to edit a web page within the browser itself. It installs a button the main toolbar, and a menu item under the tools menu, either of which allow the user to toggle the feature on or off. This add-on is basically a simple tweak that switches on the Design Mode of the HTML document being currently viewed. This can be a useful tool for editing web pages, templates from the web etc. without having to go through the source code, or using other applications. Once the desired changes are made, the file can be saved as usual, as an HTML document.

I'm also working on the Source Viewer-Modifier Add-on. Creating the in-browser viewer was pretty easy, as simple adding a hidden browser element, and a toolbar button to toggle its visibility and set its URL to "view-source:"+URL of the current document. If you're using Firefox, you can go ahead and give this a try right now: Click on the address bar, add the string "view-source:" (without the quotes) before the URL of the page, and hit Enter, or just click here.

Meanwhile, Ravi has been working on Multi-Search Tab, and he has made considerable progress too. ViewTab is still giving us some trouble, we hope to resolve that soon too.

Multi-Tab Search

Since this extension is supposed to be an interactive one, the implementation we currently have in mind is as follows :

• Create a sidebar which will serve as the user interface. The sidebar has a text-box, a search button, and a box for displaying results, grouped by tab-labels (preferably check-boxes, so the user can select the tabs that are to be searched).
  
• As for the search function, it invokes the webBrowserFind object associated with the browser corresponding to each of the tabs selected. We figured this would be much easier and much more feasible than that trying to introduce our own search function. At this point, we don't know much about webBrowserFind, except for the fact that it can be used to search for text in the document.
  
• The results shown in the sidebar are clickable, and take one to the location of the the search result. The results are also highlighted in the document.

We also have in mind a compact interface, which adds a text-box(hidden when not in use) to the status bar, that can be accessed through a keyboard shortcut, or through a menu item, and cycles through the results as the Enter Key is pressed. We'd love to incorporate both features in the same extension, if its feasible, which I'm sure it should be. Let's see how it turns out...

XUL is Easy!

We've been experimenting with XUL now for a few days and have managed to create simple overlays like menus, menu items, toolbar items, sidebars, status bar icons and buttons, simple windows and dialogs. Of course, all that the clickable items on these do is trigger simple alerts, but most of them work. There are still a few things we 're yet to figure out, but I believe that shouldn't take too long.The DOM Inspector add-on has proved invaluable in helping us understand and manipulate the browser chrome DOM, especially because it allows one to find any item in the Document Tree by simply clicking on it. This helped quickly retrieve the id's of the components in whose surroundings we wished to introduce new elements.
As of now, the XUL part seems doable, but we could definitely do with some help on Javascript. What I shall do, in the next few blogs, is describe in steps, how we plan to design each of the add-ons, with a fair amount of detail. That should put things in place.

Bags Packed, Ready To Go.....

It's been about three weeks now, since we decided, well, to actually start doing something, and we've spent most of this time learning the elements of Web Development: HTML, CSS, DOM, Javascript, a bit of Ajax, XML, and finally, what's relevant to what we're doing, XUL. I felt it worth mentioning that w3schools.com has awesome interactive tutorials on some of the above-mentioned topics. Webdevelopersnotes.com was also pretty useful.
For XUL and for extension-development , Mozilla's XUL School Tutorial served as a good introduction, but I felt this tutorial has been written assuming the reader knows, well, quite a bit, as in it isn't something like "Firefox Extension-Development for Dummies", but surely one can manage pretty well after spending some time with it. Then I found this wonderful book, 'Hacking Firefox'. The version I found is a bit old, but it's got everything we actually need, and its really well-organized too. It guides you through the process of developing an extension through a simple example. Thanks to it, we're now comfortable working with XUL, and are also familiar with the file-organization and directory-structure we should be working with. By the way, we're using Komodo Edit to write our code, as was suggested on this XUL School Tutorial page. Its free, open-source and apart from general features like syntax-coloring, automatic-indentation, code-hinting(really useful!) etc. it also has a project template for developing Firefox Extensions, complete with files required to build the final .xpi file.Well, that automates a lot of stuff, but i guess we're going to do it manually anyway, at least the first time.
So, to put it in a nutshell, we're all wired up, fired up and ready to start coding. Hope we make good progress this week.

Hi! This blog's being written to record the progress of the project my friend Ravi and I have taken up under WNCC-IITB for the summer. We are working on the following extensions for Mozilla Firefox 3.0 and above :

1. ViewTab : A no-nonsense extension that shows a preview of the contents of a tab when the mouse pointer is moved over the corresponding tab-head.
2. Multi-Tab Search : Allows the user to search for a string in all or some of the currently open tabs.
3.Source Viewer-Modifier : Installs a button on the toolbar which, when clicked, divides the content window into two parts, one showing the page and the other showing the page source. The user can modify the code, and preview the page with the modified code.