JavaScript Trick: 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 content according to your wish. Yes, you read that correctly. 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. However, I would advise you to stay ethical and use it for entertainment purposes only.

Note: Mozilla Firefox does not support directly executing javascript code in the address bar for security reasons. If you use Firefox, you can use the bookmarklets given at the end of this post. If you use Google Chrome or Microsoft Edge and the code does not seem to work, precede it with "javascript:" without quotes. These browsers automatically remove the "javascript:" portion of the copied code for safety reasons.

To use this trick, all you need to do is open the website you wish to edit, copy the code given below (make sure it is preceded by "javascript:"), paste and execute it (by pressing the Enter key) in your address bar to 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 and pasting in Paint. You can also use the Snipping Tool for taking a screenshot if you use newer versions of Windows (Windows Vista and later). If you wish to again make the website non-editable to give a more authentic look, copy, paste and execute the code given below in the address bar after you are done editing.

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

These bookmarklets work on all common web browsers including Google Chrome, Mozilla Firefox, Opera, Microsoft Edge and Internet Explorer.

You can also save the modified website with your browser through the Save page as option. The editing that you do will, however, be temporary and limited only to your browser as it is not server-sided. The online webpage will not change.

Also Read
  1. Notepad tricks for Windows
  2. Keyboard Trick (Windows) : Make a Disco

Reader Comments

Javascript Countdown Timer said...

very cool & good tips, thank you very much for sharing.

HKR said...

Very nice to see a comment form here. Why have you restricted it to certain posts ? Anyway, you've got a great blog and thank you for this article.

Author About

Akhilesh Sharma maintains and writes Tweak And Trick. He is a technology enthusiast and a science student.
You can contact him at tweakandtrick@gmail.com.

read more >>
Featured Posts