Can we insert javascript into any webpage loaded in the browser - javascript

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 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
You can share the script with other Users using the Requestly Share feature
jQuery is by default supported
After creating the rule, you can simply disable it once you are not using it.
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.

Related

Using a page's functions in a Chrome extension

I have a Chrome extension which is injecting some code into a web page (I know that part's working), which is trying to call a function that is part of the original web page. The function works fine from the console, but gives an error when the extension calls it. I assume this is some sort of security feature, but is there a way to get around it? Please help!
PS. It's just for one website, if that helps
You can't do it with content scripts. Chrome extensions content scripts live in isolated worlds, meaning they share DOM, but have separate JavaScript sandboxes. Read more here:
The workaround to this is to inject a <script> into the DOM of the page, but that code won't have privileges to call any chrome.* APIs.

What's a simple way in Google Chrome to insert Javascript into sites?

I would like to be able to add custom snippets of javascript to any site that matches a regex. This is mostly because of sites that I use daily because of specialized content, but which have a poor design. I want to be able to do something like:
Visit site See that sidebar overwrites content
Whip out developer tools, find div id for sidebar
Edit a snippet of javascript which is executed on document.ready for this domain:
$('#sidebar-right').remove();
A bit of searching for user scripts tells me that I need to be writing a Chrome extension, which seems unfortunate and overkill. Is there not an easier way, or an extension which is nothing but a javascript editor that assigns snippets to domains? I'd really like to be able to edit in Chrome itself, or at least have a file that I can just leave open in MacVim all the time. An extension requires unloading/installing to update as far as I can tell.
If I just had one big javascript file, that would be fine. I'd just wrap my customizations in domain checks.
Bonus love if I can write in CoffeeScript.
The answer is to use the Tampermonkey chrome extension.
https://chrome.google.com/webstore/detail/dhdgffkkebhmkfjojejmpbldmpobfkfo
Why not dotjs http://defunkt.io/dotjs/ ? It's local, you can version it with git, you can easily take it to another computer...
Another alternative that neatly solves the problem is Custom JavaScript for websites. You just need to install the extension, which takes around 2 seconds, and then you can immediately start typing your custom JavaScript for the specified website.
The extension automatically recognizes the current website, so all you need to do is write your code and click on Save. You can also easily import jQuery or your external scripts for convenience.
Custom JavaScript for Websites 2 is an alternative to Custom JavaScript for Websites, with some bug fixes and sync scripts across devices feature.
Snippets are available directly in Chrome Devtools
https://developers.google.com/web/tools/chrome-devtools/javascript/snippets
Witchcraft is another Google Chrome extension for loading custom Javascript and CSS, and it is supposedly for more avanced users. The older dotjs project repository lists Witchcraft as its successor.
What you're looking for is Greasemonkey. But wait, Greasemonkey is for Firefox only, right? Turns out, you can install Greasemonkey user-scripts as native Chrome add-ons. Just go to userscripts.org and hit the Install button on one of them, and Chrome will automatically convert it into a native add-on. Then, write your own and install it using Chrome.
Note: This only works in Chrome 4.0.

How to build a web crawler to find a specific advert, which is in an iframe loaded by Javascript

I'm trying to find all instances of an advert on a website. The advert is in an iframe which is loaded by javascript (it doesn't appear at all if javascript is turned off). Detecting the advert itself is extremely simple, both the name of the flash file and the target of the href always contain a certain string.
What would be the best "starting point" for achieving this? At the moment I'm considering an Adobe AIR app, which could crawl the site and examine the DOM to find the ad, and would run javascript and load the content of the iframe. The other option I can think of is using Firefox as the platform (using maybe GreaseMonkey or Selenium? I don't really know how to leverage Firefox like this).
Does anyone know of anything suitable to build this, or have any suggestions on using Firefox to do it?
Extra details:
Being CPU intensive isn't really an issue, nor is anything depending on a browser being open. This doesn't need to run on a headless server, it will be running on a powerful desktop box. OS is also not an issue. It would be advantageous if the crawler loaded each page multiple times, as the advert is in rotation. While the crawler does need to execute the javascript and load the content of the iframe, it does not need to be able to display flash files.
An alternative to using a "browser as a crawler" is using HTMLUnit as the page says, it's:
HtmlUnit is a "GUI-Less browser for Java programs". It models HTML documents and provides an API that allows you to invoke pages, fill out forms, click links, etc... just like you do in your "normal" browser.
It has fairly good JavaScript support (which is constantly improving) and is able to work even with quite complex AJAX libraries, simulating either Firefox or Internet Explorer depending on the configuration you want to use.
I think You don't want a crawler. You are going to run it on a single page and not want it to look around the internet through links, right?
If so - You want to find something on the page with javascript on. You then just have to use javascript.
You'll need:
the site :)
correct rights to access its content - use greasemonkey for FF or user scripts in Opera
a code similar to this jQuery sampe:
finding stuff in iframes:
$('iframe').each(function(){
$(this).contents().find('object').each(function(){
if($(this).attr('name').match(/regex/)){
$(this).remove(); //or do whatever You want
}
});
});
caution: accessing iframe contents may differ in browsers and is influenced by time when You run the script
If the ad is only displayed when javascript is enabled, you are going to have a problem, as no crawler is going to be able to read the web page in that matter.
Is there something in the javascript code itself that could be a tipoff to where the add is displayed? If so, maybe you can check that.
I've tried similar stuff before, and I used BeautifulSoup in python, and it worked really well.

Is there any way to have some javascript (such as a Bookmarklet) autorun on page load?

To execute bookmarklet code the bookmarklet needs to be actioned by the user. Is there any way to have a bookmarklet or indeed any javascript run automatically on page load?
Or is an Add-on the way to go?
Thanks
I don't think that it is possible to autorun a bookmarklet on pageload. This could be used very maliciously.
I think a plugin is the best way to go here. If only for personal use, you should check out greasemonkey for Firefox.
GreaseMonkey
Greasemonkey, or Tampermonkey on Chrome allow this.... but they need the script you want to run
for example, if a certain site always puts up some type of an ad overlay and you can find or write a script to kill that, you can enter that source into Tampermonkey and it will run on each page load globally or at whatever site / domain/ wildcard expression you designate
alternatively if you are looking to block certain scripts and want to automate the process, Notscript for chrome will show you each script that ran when you visited a site and allow you to designate which you want to allow on subsequent visits at that site or all sites, very very cool... that way you need not write or find a script to block behaviors you don't like
as previously pointed out, when you do this stuff you are seriously screwing with browser security, so be careful and just don't set up any old script unless you can read them or trust the source....
I think Opera allows you to auto inject js into a library of sites you specificy 'onload' regardless of ownership.
Well, any javascript runs automatically using onload event, if thats what you need?

Using Firebug Lite (1.2) would you use it in production sites?

I tried to use Firebug Lite (via the bookmarklet and also adding it to one of my web sites).
I seem to get the alert:
Unable to detect the following script "firebug-lite.js" ... if the
script has been renamed then please set the value of
firebug.env.liteFilename to reflect this change
Alot. Especially when I try to close the tab. This happens in Firefox, Camino and Safari.
What I'm wondering is, is this ready for use?, or do I need to copy the code, post it locally and hack it? I already checked the documentation, and it was pretty limited.
I was also looking at the mod dates and the site appears to have been relatively idle since mid-2008.
The javascript file rounds out at 77,305 bytes, so I would think you would not want to use it on a production site unless you were using a dynamic language and could output the script conditionally when you need to do debugging.
(i.e. http://www.somefakesite.com/page?debug=true)
As long as you're only including the file in the page when you are actually debugging, it probably doesn't matter where you pull the script from unless it doesn't work correctly, in which case you would have to modify and serve it yourself.

Categories