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 s开发者_StackOverflowcripting needs. Method should work in all browsers.

I tried using IFRAME and adding some html into it, but I cant. Please suggest some ways.

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.

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

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.

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.

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.

If I understand correctly, you want to execute a javascript code in any websites you are using in any browser. That means you have to go browser by browser different applications. In chrome supports extension same as firefox, edge, safari browsers supports add-ons. You can add the relevant extension to do that. I am using a scripting extension, that can run the given script whenever I open the page with same URL given in the script. Likewise you have to find different applications for different browsers.

You can't run Javascript on arbitrary Web pages that you do not control the content of. It would be a huge security hole if that were not true.

Think about it: you could run Javascript and wait for someone to log on to their internet banking and then do something with the characters input.

Take a look at jquery JSON and Wikipedia's JSON page.

Alternatively you can simply add a <script> tag to the document:

$("head").append('<script src="..." type="text/javascript"></script>');

This will load the javascript file.