Can We Insert Javascript Into Any Webpage Loaded In The Browser

I am looking into methods to inject javascript into any webpage loaded in the browser, so that I can traverse through the page's DOM. I use JQUERY for my scripting needs. Method sh

Solution 1:

Try using Greasemonkey: http://www.greasespot.net/. You can use it to execute custom scripts on page load for any website you want. You can find some basic tutorials here: http://wiki.greasespot.net/Tutorials.

Solution 2:

I suggest to create a page with two iframes one to navigate to the designated website and other to get DOM Objects. in the first one navigate to the site and then select its HTML and append it in the body of the second Iframe.

iframe2.contentWindow.document.body.innerHTML = iframe1.contentWindow.document.body.innerHTML

then traverse the DOM Objects inside the second Iframe with your custom functions

Solution 3:

There are a couple of approaches to solve this problem.

Using BookMarklet

You can create a simple bookmarklet which injects jQuery on the page and you can open Dev Console in your favorite browser and try out your DOM inspection using jQuery or whatever you want to try out.

Use Requestly Chrome Extension

You can use Requestly Script Rule to insert scripts on any webpage. Since your post mentions that you need jQuery, Requestly provides an option to include jQuery as well.

So with a simple click, you can write jQuery supported code without worrying about how jQuery will come in the page. Check these screenshots for reference :-

Script Rule Selection

Sample Script Supported by jQuery

Advantages

A Couple of advantages with using Requestly

1. You can share the script with other Users using the Requestly Share feature
2. jQuery is by default supported
3. After creating the rule, you can simply disable it once you are not using it.
4. Requestly is available on Firefox as well as Chrome so you can run your script cross-browser.

PS: This may be an older post but answering here because the question is still relevant. Disclaimer: I am the founder of Requestly So you blame me if you don't like something.

Solution 4:

You could create a bookmarklet (see http://en.wikipedia.org/wiki/Bookmarklet) which in turn can add a node to the page, with the src pointing to where your own javascript is located. Onde the script node gets added it will run. You can find more details on http://www.johnvey.com/features/deliciousdirector/ under "how does it work?". This way you can have a bookmark in your bookmarks bar which, when click, will add your script to any page you happen to be on.

Solution 5:

I'm using for Chrome TamperMonkey to add custom scripts for a specific web page which is as well awesome and I can really recommend it.