How to edit any webpage with one click

This old but neat trick allows you to interactively edit all the text within a webpage right from your browser. Note that all changes will disappear after you refresh the page, unless you set up saving. This trick works best on Google Chrome.

Demo - Click the button below to start editing this page


So how do I do this in my own browser?

To start, create a new bookmark and paste the following code in the "URL" field:

javascript:if (document.designMode=='off') { document.body.contentEditable='true'; document.designMode='on';} else { document.body.contentEditable='false'; document.designMode='off';} void 0

Example: Javascript Bookmark

Now you can go to any page and click on your "Edit Page" bookmark to start editing as if your browser was a text editor.

Great way to troll your friends: Fake Paypal Balance


But what if I want to save my changes?

One method is to save all changes to localStorage and to retrieve them with another bookmark.

Modify your "Edit Page" bookmark to use this code instead:

javascript:if (document.designMode == 'off') { document.body.contentEditable='true'; document.designMode='on';} else { document.body.contentEditable='false'; document.designMode='off'; } document.documentElement.onkeyup = function() { if (document.body.contentEditable == 'true' && document.designMode == 'on') { localStorage.setItem("editedHTML", document.documentElement.innerHTML); }}; void 0

Then create a new bookmark to retrieve your changes using this code:

javascript:var a = localStorage.getItem("editedHTML"); if (a) { document.write(a); document.body.contentEditable = 'false'; document.designMode = 'off'; } void 0

Now, all your edits will be saved. After you refresh a page, simply click on your "retrieval" bookmark to bring back all the changes you previously made.

You may also want to clear all your saved changes. To do this, create another bookmark with this code:

javascript:localStorage.removeItem("editedHTML"); location.reload(); void 0


Additional tips:

I hope this was helpful. If you have any comments or suggestions, feel free to drop a thought below.

0 comments