I'd like to inject a couple of local .js files into a webpage. I just mean client side, as in within my browser, I don't need anybody else accessing the page to be able to see it. I just need to take a .js file, and then make it so it's as if that file had been included in the page's html via a <script> tag all along.

It's okay if it takes a second after the page has loaded for the stuff in the local files to be available.

It's okay if I have to be at the computer to do this "by hand" with a console or something.

I've been trying to do this for two days, I've tried Greasemonkey, I've tried manually loading files using a JavaScript console. It amazes me that there isn't (apparently) an established way to do this, it seems like such a simple thing to want to do. I guess simple isn't the same thing as common, though.

If it helps, the reason why I want to do this is to run a chatbot on a JS-based chat client. Some of the bot's code is mixed into the pre-existing chat code -- for that, I have Fiddler intercepting requests to .../chat.js and replacing it with a local file. But I have two .js files which are "independant" of anything on the page itself. There aren't any .js files requested by the page that I can substitute them for, so I can't use Fiddler.

I'd like to inject a couple of local .js files into a webpage. I just mean client side, as in within my browser, I don't need anybody else accessing the page to be able to see it. I just need to take a .js file, and then make it so it's as if that file had been included in the page's html via a <script> tag all along.

It's okay if it takes a second after the page has loaded for the stuff in the local files to be available.

It's okay if I have to be at the computer to do this "by hand" with a console or something.

I've been trying to do this for two days, I've tried Greasemonkey, I've tried manually loading files using a JavaScript console. It amazes me that there isn't (apparently) an established way to do this, it seems like such a simple thing to want to do. I guess simple isn't the same thing as common, though.

If it helps, the reason why I want to do this is to run a chatbot on a JS-based chat client. Some of the bot's code is mixed into the pre-existing chat code -- for that, I have Fiddler intercepting requests to .../chat.js and replacing it with a local file. But I have two .js files which are "independant" of anything on the page itself. There aren't any .js files requested by the page that I can substitute them for, so I can't use Fiddler.

• javascript
• html
• code-injection

• 1 Try firefox's firebug plugin. – KBN Commented Apr 28, 2012 at 18:00
• I have that installed - but what should I do with it? Creating a script tag and appending it to the DOM via the JS console doesn't seem to do the trick. It gets added to the dom and the file contents are loaded, but if I try to access any variable declared therein I still get an 'undefined'. – Jack M Commented Apr 28, 2012 at 18:14
• This can easily be accomplished in a browser-specific extension. – st-boost Commented Apr 28, 2012 at 18:31

4 Answers 4

Since your already using a fiddler script, you can do something like this in the OnBeforeResponse(oSession: Session) function

    if ( oSession.oResponse.headers.ExistsAndContains("Content-Type", "html") &&
         oSession.hostname.Contains("MY.TargetSite.com") ) {

        oSession.oResponse.headers.Add("DEBUG1_WE_EDITED_THIS", "HERE");

        // Remove any compression or chunking
        oSession.utilDecodeResponse();

        var oBody = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes);

        // Find the end of the HEAD script, so you can inject script block there.
        var oRegEx = oRegEx = /(<\/head>)/gi
        // replace the head-close tag with new-script + head-close 
        oBody = oBody.replace(oRegEx, "<script type='text/javascript'>console.log('We injected it');</script></head>");

        // Set the response body to the changed body string
        oSession.utilSetResponseBody(oBody); 
    }

Working example for www.html5rocks.com :

    if ( oSession.oResponse.headers.ExistsAndContains("Content-Type", "html") &&
         oSession.hostname.Contains("html5rocks") ) { //goto html5rocks.com
        oSession.oResponse.headers.Add("DEBUG1_WE_EDITED_THIS", "HERE");
        oSession.utilDecodeResponse();
        var oBody = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes);
        var oRegEx = oRegEx = /(<\/head>)/gi
        oBody = oBody.replace(oRegEx, "<script type='text/javascript'>alert('We injected it')</script></head>");
        oSession.utilSetResponseBody(oBody); 
    }

Note, you have to turn streaming off in fiddler : http://www.fiddler2.com/fiddler/help/streaming.asp and I assume you would need to decode HTTPS : http://www.fiddler2.com/fiddler/help/httpsdecryption.asp

I have been using fiddler script less and less, in favor of fiddler .Net Extensions - http://fiddler2.com/fiddler/dev/IFiddlerExtension.asp

If you are using Chrome then check out dotjs.

It will do exactly what you want!

How about just using jquery's jQuery.getScript() method?

http://api.jquery.com/jQuery.getScript/

save the normal html pages to the file system, add the js files manually by hand, and then use fiddler to intercept those calls so you get your version of the html file