Have you ever wanted to temporarily edit a webpage displayed in Chrome or another browser?
How it works
Let’s take a look at the Google homepage quickly.
Now, after we apply our little “page hack”, let’s look at it again!
How to temporarily edit a webpage
- Go to a website of your choice that you would like to edit.
- Enter the following javascript into the address bar:
javascript:document.body.contentEditable="true"; document.designMode="on"; void 0
Make sure that once you have pasted the above code, it says javascript: at the beginning, as some browsers will try and remove this.
Press Enter.
Now you can edit the page, by simply clicking on any existing text and typing in something yourself!
How to turn this off
You don’t really need to turn this off, because as soon as you refresh the page, or click on a link, it will revert to how it was before.
However, just as we turned it on, we can also turn it off.
You can also stop editing the page by doing the following:
javascript:document.body.contentEditable = 'false'; document.designMode='off'; void 0
Using your bookmarks bar
A nice easy way to do this repeatably, is to select the following code as we did before:
javascript:document.body.contentEditable="true"; document.designMode="on"; void 0
..and drag it to your bookmarks bar. Now you can just click the bookmark each time you want to temporarily edit a page. It’s so easy!