Thursday, 15 May 2014

JavaScript Tricks: Edit Websites in Browser (Live)

Post By; Hanan Mannan
Contact Number: Pak (+92)-321-59-95-634
-------------------------------------------------------JavaScript Tricks: Edit Websites in Browser (Live)

Imagine a world where you are a God and have ultimate control on what happens and more importantly, how it happens. Seems too good a dream. Now it has come true, at least for the online world.

JavaScript tricks
Using this trick, you will be able to edit any webpage live in your browser as if it was a Wiki and change the details according to your wish. Yes, you read that right. You can edit Google or even Facebook for that matter right in your browser and that too without requiring any technical know-how or getting deep into hacking and cracking.

Here is an example picture demonstrating the Google Homepage edited by me to say that I own Google.
Edit Websites Browser

This is just an example. You can use it for anything like showing wrong traffic stats or for fooling people by showing that someone said something about them on Facebook or Twitter. It depends only on your creativity. But I would advise you to stay ethical and use it for entertainment purposes only.

(Mozilla Firefox does not support this. If you use Firefox, you can use the bookmarklets given at the end of this post. If you use Google Chrome and the code does not seem to work, precede it with "javascript:" without quotes.)

To use this trick, all you need to do is just copy the code given below and paste it in your address bar after you have opened the website you wish to edit. And start editing.

javascript:document.body.contentEditable%20=%20'true';%20document.designMode='on';%20void%200
You can capture a screenshot by pressing the Print Screen key or by using the Snipping Tool if you use Windows 7 or Windows Vista. If you wish to again make the website non-editable to give a more authentic look, copy and paste the code given below in the address bar after you are done editing (does not work in Firefox).

javascript:document.body.contentEditable%20=%20'false';%20document.designMode='off';%20void%200

Or, alternatively you can use the following bookmarklets by dragging them to your Bookmarks bar.

1.  Edit this Website

2.  Done Editing

The editing that you do will however be temporary as it is not server-sided. You can also save the modified website through your browser by File>Save. This works on all common web browsers including Chrome, Firefox, Opera and Internet Explorer.

0 comments:

Post a Comment