Showing posts with label firefox. Show all posts
Showing posts with label firefox. Show all posts

Sunday, September 30, 2007

Getting browser's progress status

Ever wonder how to correctly get the page's progress of the browser (loading, transferring, waiting, etc)? Well here it is:

There are several states that can be detected using this interface
  • onStateChange
  • onLocationChange
  • onProgressChange
  • onStatusChange
  • onSecurityChange
  • onLinkIconAvailable
even though their names can seem self-explanatory, you better check the full documentation.

1) create an object that will withhold the Progress Listener Interface

var oProgressListener = new Object(); //on top of all codes, or with global scope


2) get the Progress Listener interface and assign preliminary values.

wpl = Components.interfaces.nsIWebProgressListener;

//I'm still not very sure what this function does :D
oProgressListener.QueryInterface = function(aIID) {
if (aIID.equals(oProgressListener.wpl) ||
aIID.equals(Components.interfaces.nsISupportsWeakReference) ||
aIID.equals(Components.interfaces.nsISupports)) return this;
throw Components.results.NS_NOINTERFACE;

}


3) assign appropriate functions to the state you wants to:

//detect URL changes
oProgressListener.onLocationChange = function(aProgress, aRequest, aURI) {

alert('my URL was changed');
return 0;

}

//detect the starting of loading a new page / document
oProgressListener.onStateChange = function(aProgress, aRequest, aFlag, aStatus) {
if (aFlag & oProgressListener.wpl.STATE_IS_DOCUMENT){
alert('New page is being loaded');
}
}

//detect when a page is fully loaded
if (aFlag & oProgressListener.wpl.STATE_STOP) {
if ( aFlag & oProgressListener.wpl.STATE_IS_DOCUMENT ) {
alert('New page has finished loading');
}
}


4) Associate the progress listener for a "browser" to a listener object

browser.addProgressListener( oProgressListener,
Components.interfaces.nsIWebProgress.NOTIFY_STATE_WINDOW);

How to put log messages in Firefox's Error Console

Found out about how to add comments/logs to Firefox built-in Error Console. Really helps in debugging process.

1) get the Console Service component

var ConsSrv = Components.classes['@mozilla.org/consoleservice;1'].getService(Components.interfaces.nsIConsoleService);


2) write your logs!

ConsSrv.logStringMessage('here is my logs.. Hello!!!!');

Friday, September 21, 2007

Running multiple instances of firefox

Here is a very helpful article that elaborates (with pictures) on how to run multiple instances of Firefox(es) at the same time. This may be a requirement if you are trying to develop a Firefox extension and need to test it on 2 or more Firefox windows at the same time.

ref:
http://lifehacker.com/software/firefox/geek-to-live--manage-multiple-firefox-profiles-231646.php

Monday, August 13, 2007

Image loaded directly inside browser, had no <head> tag

- try loading an image directly using a URL ending with image format extensions (.jpg, .png, .bmp)
- using DOM Inspector, try to view the hierarchy, there's no <head> tag !

Tuesday, June 12, 2007

Error console to help debugging process

- Firefox has a great built-in tool to help extension developers debug their codes, called the Error Console.
- I happened to stumble upon a problem with xmpp4moz, and Bard adviced me on enabling the Error Console.
- For more details, you can check out http://dev.hyperstruct.net/xmpp4moz/wiki/Report. Look up on how to enable chrome errors display in the console.

Setting up for FFox extension development

- create a project folder , somewhere, ex: C:\myext\ . This will be our root.
- inside it, we create another folder call chrome
- inside chrome, we create another folder called content, this is where we keep our .xul and .js files
- Now go back to root, create 2 text files, install.rdf and chrome.manifest
- for stuff to put inside install.rdf and chrome.manifest , and more details, you can check out FF extension tutorial @ MDC

- for development purposes, we don't need to create a .xpi package.
- to test whether our extension can be used or not, do this:
- go into your Firefox Profile's extension folder ex: C:\Documents and Settings\USER\Application Data\Mozilla\Firefox\Profiles\USER_PROFILE.default\extensions\
- create a text file, with your app id (the one you put in tag inside install.rdf) as its name. Just put the id, no .TXT or any other extension required.
- open the text file, put the path of your extension root folder, ex: C:\myext\ , don't forget the following '\'
- start Firefox and your app should run :D

Monday, June 11, 2007

Creating my x4m client-side app

- get codes from here
- message will be send only when I'm connected to a server through SPS.
- mesage is displayed on the sidebar only, can't be displayed in the 'conversation' box on the right.
- there are no xmpp4moz divs, because it catches incoming message by using channel.on() function.
- app is connected to the xmpp4moz library through this code =>
<script type="application/x-javascript" src="chrome://xmpp4moz/content/xmpp.js"/>
- posted this problem in forum

Types of of apps related to Firefox
- Server-side :
- usually in .xhtml format, so it can be understood by most current browsers
- resides on the server
- Client-side :
- usually in .xul format
- understood by Firefox only
- installed as extension within Firefox

Tuesday, June 5, 2007

Oreilly book for firefox programming

Programming Firefox Building Rich Internet Applications with XUL. Will have to see if it has anything over documentation on the web.

Tutorial on programming XUL


Monday, June 4, 2007

SamePlace Suite, an xmpp4moz->Gtalk example

- They've got a gtalk client add-ons for Firefox called SamePlace Suite
- It adds a panel to the left of firefox.
- hide panel by pressing F12.
- They have a Monopoly-like game using xmpp4moz+google map!
- demo video
- I didn't set it as auto-login, therefor every time an instance of Firefox is launching, it prompt me for password. Eg: TAG a url into del.icio.us, when a window popup
- Will keep on active as long as xmpp4moz is enabled.
- Solution: since I need xmpp4moz for development purpose, I must unistall SamePlace for now to avoid annoyance.
- Interesting fact: I failed to load a website, while connected via SamePlace. Reload a few times, still fails. Then I disconnect from SamePlace, then reload, at its OK. Might be some issues here.

About Firefox addons, XUL, XULRunner

- Firefox Add-ons:
- uses XUL (JS+XHTML+CSS)
- reference @ http://www.libsuccess.org/index.php?title=Web_Browser_Extensions#Websites_about_Firefox_Programming
- followed tutorial @ http://www.gmacker.com/web/content/tutorial/firefox/firefoxtutorial.htm
- decompiled SamePlace suite codes and see how xmpp4moz -> gtalk works.
- Add-ons usually uses .js files. The different between this and JSJac is, we dont need to have a server that serve the webpages. But users need to download the Firefox 'plug-ins', which is usually small in size. And the add-ons run through Firefox.
- Possible comm. path: Firefox -> Gtalk -> Bot

- XULRunner
- Run XUL develoment codes without using Firefox
- Similar concept to JVM Appletviewer.
- Tutorial @ http://blogs.acceleration.net/ryan/archive/2005/05/06/1073.aspx


- Browser-based VS Web-based
- Since Firefox has emerged as the most extensible browser ever, the term browser-based and web-based turns to a whole new meaning.
- Browser-based : What you launch inside your browser, not necessarily be connected to the internet. Ex: Firebug for debugging websites
- Web-based : Your website. Obivoiusly need to launch inside a browser with internet connectivity.

xmpp4moz: Getting it to work

- http://dev.hyperstruct.net/xmpp4moz
- found the only "Hello World" xmpp4moz tutorial, with a handful of bugs, which I've successfully repaired@ http://www.pixzone.com/blog/84/embed-jabber-in-firefox-with-xmpp4moz-chat-application-how-to/
- sample of the stanza that xmpp4moz catches:













































- this chat app demonstrate the usage of xmpp4moz.
- to use this, you must login to a jabber account using SamePlace Suite 1st.
- then activate the chat page by clicking a button in the SamePlace side panel.
- for detail explanation, refer to here.

Friday, June 1, 2007

Design thoughts

There seems to be a few ways to get a browser app to talk to gtalk.

1. Ajax ------ punjab/tomcat/java servlet ------- Gtalk

The intermediary is because Ajax / Html is stateless and gtalk/jabber requires a statefull system. One success is by using java2script library which Hazrat has shown can connect to gtalk. One issue will be the latency introduced by the middle servlet module in java2script system.

(note the java2script client is on the left)

We will also need to build a conference bot to simulate chat in gtalk and the hops will be:

Ajax ------ tomcat -------- gtalk --------- conference bot

which will add additional latency.


2. Flash ----- Gtalk

Not sure if this needs an intermediary since Flash should be able to maintain state.
Potential libraries are Ignite's XIFF API and jabberflash.
They can talk to jabber servers, but not sure about gtalk yet. Hazrat ?
Since google's gtalk gadget is written in flash, this might be the way to go.

article on XIFF

3. Firefox extension ---- Gtalk

This has potential, though the application development could be tougher because parts of it have to be built in XUL & C (verify ?)
Potential library xmpp4moz.
Verify if it can talk to gtalk. Hazrat ?
Interesting links on programming Firefox

4. Java -- Gtalk
Ignite's Smack API
Interesting Bolinfest article on it.

This would be like the original OnChat and will suffer from the problems
of developing an attractive small java applet for the browser - not so keen on this approach.