Injecting Javscript into a page

Question

I'm writing a web-based game that involves clicking links on various sites on the internet. I know it sounds strange but the basic premise is that you start on my page where you click a link to some page on another site. You continue to follow links until you get to the page you are trying to reach. Think WikipediaGame.org. The difference being that I don't have control over the actual pages with the links.

What I need to be able to do is track all the links that they clicked, and when they get to the final page, I want to send them back to my site (or something along those lines).

What I was thinking was that perhaps I could somehow intercept the page requests and inject some javscript to track which links they clicked. Is this possible? Has anyone done anything like this? Obviosuly this could pose a security risk. Do I have any other options? I want to avoid making the user collect a list of all the links and then post them into a textbox on my site.

Answer 1

Maybe a bookmarklet to send the current page to your site? That way the user would have complete control over the list of links shared with a minimal amount of work.

Answer 2

To make this cross-browser compatible -- I'm not sure if there is a way without writing a plugin for each browser. But, I could be wrong too :-)

You could try to make a bookmarklet (Javascript that runs when the user clicks a certain bookmark), but that wouldn't run automatically on every page the user loads; the user would have to click on it to run it.

If you want to just support Firefox, you could write a Greasmonkey script that would run on every page/site. But, that would limit the scope of your users.

Answer 3

You cannot do this using javascript alone. You need to either write a firefox plugin, or a GM script.

Answer 4

I don’t know how you would inject JavaScript into someone else’s pages, which would then send you messages. That actually sounds like something a virus would do.

I think you could accomplish something like what you want using an iframe.
A simple method would be to include an iframe preset to load the “start” location on your site, and then include a button on the outer page for the user to post back their current location (in the iframe).

When the button on your page is pressed you could query the current state of the iframe…
References to the window generated by the iframe and to the document loaded into the iframe can be obtained via the frames array using the name attribute.

 window.frames[iframeName]  <br/>
 window.frames[iframeName].document  <br/>

The frames array method of referencing has broad support, even among quite old browsers, as long as you attach a name attribute to the iframe. For best results, use both name and id.

For more up-to-date browsers, the document inside the iframe can also be referenced via contentWindow (IE win) and contentDocument (DOM) properties of the iframe element:

// IE5.5+ windows
document.getElementById(iframeId).contentWindow
document.getElementById(iframeId).contentWindow.document
or,
// DOM 
document.getElementById(iframeId).contentDocument

EDIT: As the comments below suggest, it looks like most browsers prevent you from using an iframe this way. You can start a window anwhere you want, but you are not allowed to communicate with it if it is not on your same domain. I guess you could build a "Man in the Middle" scenerio, where you flow all the trafic through your server first, but that is not very practical.

Here is a good example of jQuery controlling an iframe

http://wwwendt.de/tech/dynatree/doc/sample-iframe.html

Hope that helps.

Answer 5

I'm not sure you can accomplish this the way you're envisioning. Without writing a browser plugin, I would look at what sites like KeepVid are doing. They have you create a bookmark on your toolbar, and the bookmark url is this:

javascript:document.location='http://keepvid.com/?url='+escape(window.location);

That essentially passes the url the user is presently on over to keepvid. If you use this concept, you can have your user click the bookmark button to register that url to you and you can collect that and pass the user back to where they were.

Answer 6

So i figured out what to do. I'm using an iframe like this:

<iframe src="Puzzle/ContinuePuzzle" />

It points the source to my Mvc Controller. In my controller I do a WebRequest for the actual url that I want and then parse the Html and stick my own javascript in the page. The page acts and looks like the other site, but it's actually coming from my site.