The code works!

The problem was just that Firefox must do a new ‘GET’ of the code when you view source. The source is changed correctly in Firebug. :-)

The post was originally written around the time of Firefox 3.5, so a lot of things may have changed since then. For example, I wouldn’t be surprised if Firefox handles the case where a listener in the chain drops the ball, or does something unexpected. I haven’t tested the code in question in a while, but did you try the technique I used in the previous comment? (Just to be sure that everything else is working correctly)

I see why you would want to consolidate the buffer (subtring replacement or, preferably, document creation, modification, and then getting the string representation). I’ll try putting something together using your example. Any chance you could post additional code? What you’re trying to do should work according to all of the documentation (which is sadly out of date).

Basically, I see a few ways that the browser is not getting the modified html:

• the browser listener is added after yours (and thus your listener is downstream)
• your listener is not passing it on correctly and the browser is correcting for this somehow
• you are inserting something that is not valid html and is then ignored when the browser is parsing and rendering the page
• the onDataAvailable method isn’t doing what you expect (you said you verified the contents passed on by onStopRequest so this is unlikely, but…)

There are probably more possibilities but that’s all I’ve got right now. As I said, I’ll try whipping up an example like yours and see if I can figure out what went wrong.

FIRST, GREAT ARTICLE!

I know that I’m late to the party but I’m trying your suggestion for storing up all the data from the onDataAvailable callbacks and then creating my own calls to originalListener.onDataAvailable and originalListener.onStopRequest.

In my solution I actually build one large buffer and try to make one call to originalListener.onDataAvailable and one call to originalListener.onStopRequest.

MY PROBLEM: The browser has the original source (HTML) and not my modified version. I inspect all the variables and know for sure that I modified the text and I know for sure that I’m not passing the onDataAvailable calls to the original listener until the onStopRequest. I don’t see how this is possible.

I’ve tried things like caching the first request and context but that doesn’t do it.

ANY IDEAS?

Here is a code snippet from onStopRequest….

onStopRequest: function (request, context, statusCode)
{
try
{
// QueryInterface into HttpChannel to access originalURI and requestMethod properties
request.QueryInterface(Ci.nsIHttpChannel);

var storageStream = CCIN(“@mozilla.org/storagestream;1″, “nsIStorageStream”);
storageStream.init(8192, this.m_nDataSize, null); //8192 is the segment size in bytes, count is the maximum size of the stream in bytes

var binaryOutputStream = CCIN(“@mozilla.org/binaryoutputstream;1″, “nsIBinaryOutputStream”);
binaryOutputStream.setOutputStream(storageStream.getOutputStream(0));
binaryOutputStream.writeBytes(this.m_strData, this.m_nDataSize);

this.originalListener.onDataAvailable(request,
context,
storageStream.newInputStream(0),
0,
this.m_nDataSize);
}
catch (e)
{
dump(e);
}

//Pass it on down the chain
this.originalListener.onStopRequest(request, context, statusCode);
},

this.buffer.push({request:request, context:context, inputSteam:storageStream.newInputStream(0), offset:offset, count:count});

it should be
inputStream:storageStream.newInputStream(0)

an ‘r’ was missing

Thanks a lot dude..

Below is a rather different approach, but may work better

TracingListener.prototype =
{
    originalListener: null,
    receivedData: null,
    buffer: null,

    onStartRequest: function(request, context) {
    	this.receivedData = []; //initialize the array
    	this.buffer = []; //initialize the array

	//Pass on the onStartRequest call to the next listener in the chain -- VERY IMPORTANT
	this.originalListener.onStartRequest(request, context);
    },
    onDataAvailable: function(request, context, inputStream, offset, count)
    {
       var binaryInputStream = CCIN("@mozilla.org/binaryinputstream;1",
                                 "nsIBinaryInputStream");
        binaryInputStream.setInputStream(inputStream);

        // Copy received data as they come.
        var data = binaryInputStream.readBytes(count);

        this.receivedData.push(data);

        this.buffer.push({request:request, context:context, data:data, offset:offset, count:count});
    },

    onStopRequest: function(request, context, statusCode)
    {
	try
	{
                //QueryInterface into HttpChannel to access originalURI and requestMethod properties
		request.QueryInterface(Ci.nsIHttpChannel);

                //this is specific to the PirateQuesting Add-on, but is left here as an example of how to modify behaviour based on the requested URL
		if (request.originalURI
                    && piratequesting.baseURL == request.originalURI.prePath
                    && request.originalURI.path.indexOf("/index.php?ajax=") == 0)
		{

			var data = null;
			if (request.requestMethod.toLowerCase() == "post")
			{
				var postText = this.readPostTextFromRequest(request, context);
				if (postText)
					data = ((String)(postText)).parseQuery();

			}

                        //Combine the response into a single string
			var responseSource = this.receivedData.join('');

			//fix leading spaces bug
			//(FM occasionally adds spaces to the beginning of their ajax responses...
                        //which breaks the XML)
			responseSource = responseSource.replace(/^\s+(\S[\s\S]+)/, "$1");

                        //gets the date from the response headers on the request.
                        //For PirateQuesting this was preferred over the date on the user's machine
			var date = Date.parse(request.getResponseHeader("Date"));

                        //Again a PQ specific function call, but left as an example.
                        //This just passes a string URL, the text of the response,
                        //the date, and the data in the POST request (if applicable)
			piratequesting.ProcessRawResponse(request.originalURI.spec,
                                               responseSource,
                                               date,
                                               data);
		}

		//Now that we:re done with the data for our part, we can pass it on.
		var buffItem;
		for (var i=0, len=this.buffer.length;i<len;i++) {
                       buffItem = this.buffer[i];

                       var storageStream = CCIN("@mozilla.org/storagestream;1",
                                 "nsIStorageStream");
                       //8192 is the segment size in bytes, count is the maximum size of the stream in bytes
                       storageStream.init(8192, buffItem.count, null); 

                      	var binaryOutputStream = CCIN("@mozilla.org/binaryoutputstream;1",
                                 "nsIBinaryOutputStream");
                       binaryOutputStream.setOutputStream(storageStream.getOutputStream(0));

                       binaryOutputStream.writeBytes(buffItem.data, buffItem.count);

		        this.originalListener.onDataAvailable(buffItem.request,
                                          buffItem.context,
                                          storageStream.newInputStream(0),
                                          buffItem.offset,
                                          buffItem.count);
		}

	}
	catch (e)
	{
		//standard function to dump a formatted version of the error to console
		dumpError(e);
	}
	//Pass it on down the chain
	this.originalListener.onStopRequest(request,
                                         context,
                                         statusCode);
    },
.
.
.
(etc)

What this attempts to do is create new input streams immediately before passing it on to the next listener.

For example:

TracingListener.prototype =
{
    originalListener: null,
    receivedData: null,
    buffer: null,

    onStartRequest: function(request, context) {
    	this.receivedData = []; //initialize the array
    	this.buffer = []; //initialize the array

	//Pass on the onStartRequest call to the next listener in the chain -- VERY IMPORTANT
	this.originalListener.onStartRequest(request, context);
    },
    onDataAvailable: function(request, context, inputStream, offset, count)
    {
       var binaryInputStream = CCIN("@mozilla.org/binaryinputstream;1",
                                 "nsIBinaryInputStream");
        binaryInputStream.setInputStream(inputStream);

        var storageStream = CCIN("@mozilla.org/storagestream;1",
                                 "nsIStorageStream");
        //8192 is the segment size in bytes, count is the maximum size of the stream in bytes
        storageStream.init(8192, count, null); 

	var binaryOutputStream = CCIN("@mozilla.org/binaryoutputstream;1",
                                 "nsIBinaryOutputStream");
        binaryOutputStream.setOutputStream(storageStream.getOutputStream(0));

        // Copy received data as they come.
        var data = binaryInputStream.readBytes(count);

        this.receivedData.push(data);

        binaryOutputStream.writeBytes(data, count);
        this.buffer.push({request:request, context:context, inputStream:storageStream.newInputStream(0), offset:offset, count:count});
    },

onStopRequest: function(request, context, statusCode)
    {
	try
	{
                //QueryInterface into HttpChannel to access originalURI and requestMethod properties
		request.QueryInterface(Ci.nsIHttpChannel);

                //this is specific to the PirateQuesting Add-on, but is left here as an example of how to modify behaviour based on the requested URL
		if (request.originalURI
                    && piratequesting.baseURL == request.originalURI.prePath
                    && request.originalURI.path.indexOf("/index.php?ajax=") == 0)
		{

			var data = null;
			if (request.requestMethod.toLowerCase() == "post")
			{
				var postText = this.readPostTextFromRequest(request, context);
				if (postText)
					data = ((String)(postText)).parseQuery();

			}

                        //Combine the response into a single string
			var responseSource = this.receivedData.join('');

			//fix leading spaces bug
			//(FM occasionally adds spaces to the beginning of their ajax responses...
                        //which breaks the XML)
			responseSource = responseSource.replace(/^\s+(\S[\s\S]+)/, "$1");

                        //gets the date from the response headers on the request.
                        //For PirateQuesting this was preferred over the date on the user's machine
			var date = Date.parse(request.getResponseHeader("Date"));

                        //Again a PQ specific function call, but left as an example.
                        //This just passes a string URL, the text of the response,
                        //the date, and the data in the POST request (if applicable)
			piratequesting.ProcessRawResponse(request.originalURI.spec,
                                               responseSource,
                                               date,
                                               data);
		}

		//Now that we:re done with the data for our part, we can pass it on.
		var buffItem;
		for (var i=0, len=this.buffer.length;i<len;i++) {
                       buffItem = this.buffer[i];
		        this.originalListener.onDataAvailable(buffItem.request,
                                          buffItem.context,
                                          buffItem.inputStream,
                                          buffItem.offset,
                                          buffItem.count);
		}

	}
	catch (e)
	{
		//standard function to dump a formatted version of the error to console
		dumpError(e);
	}
	//Pass it on down the chain
	this.originalListener.onStopRequest(request,
                                         context,
                                         statusCode);
    },
.
.
.
(etc)

note the use of a buffer array to store, in order, every onDataAvaliable call so that we can sort of replay them in the onStopRequest. Please note that I haven’t tested this, but I would expect it to work. We:re basically just holding it back and letting it all go at once, this way. That said, depending on the situation, this could result in highly unexpected behaviour for the end user. most people are used to seeing pages come in gradually rather than all at once.

EDIT: Fixed Type (inputSteam -> inputStream)