Quick Online Tips
Home     About     Popular     Photoblog     Themes     Advertise     Shop     Jobs     Contact

How to Edit Any Web Page Live in Your Browser

July 8th, 2008
ADVERTISEMENTS

How easy is it to edit any webpage on any website in your browser? Very simple and easy. Paste a simple code into the location bar and you can actually edit any page on any site in realtime. Though this sounds like fun, it can have serious implications.

Let me start by surprising you with my million dollar Adsense earnings for today!

Ok so its a fake screenshot and I did not use Adobe Photoshop or any image editing software, so how did I do it? Here is the magic code spreading across the web which can edit any webpage

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Simply copy and paste it into the location bar of your web browser when you are on any page and you can now edit it. Though this is a cool tool to have some fun, it is dangerous tool used by scamsters to create fake screenshots and websites resembling the original to misinterpret facts and for phishing attempts. So you need to be alert on the web and not believe everything you see…

You don’t actually need to remember that code – To make this process faster, use the  Edit Page bookmarklet (drag to your browser bookmarks toolbar, and click when needed). Try it on this page now by simply placing the cursor on any text, deleting it or editing it. These edits are not permanent and limited to your browser window only. Refresh the page and its gone. Techzilo lists many such bookmarklets to modify webpages.

I checked that this code works on Internet Explorer, Firefox, Opera, and Safari. Although it is easy to edit any page by altering its html code, this real time editing is amazing. Opera web browser also has a built in special feature to do this  -  View > Source,  edit in Source Editor and “Apply Changes”.

Edit Source Code in Opera

Firefox users can also try the Firebug firefox extension, a powerful tool that lets you edit, debug, and monitor CSS, HTML, and JavaScript live in any web page, and is popular among webmasters and web designers. Greasemonkey is another popular firefox extension that modifies the web and allows you to customize the way a webpage displays and functions using small bits of JavaScript.

You now know how easy it is to modify web content and even a kid could do it. Beware of what you see online… it could not be true!

RSS Subscribe RSS feed     Bookmark and Share



25 Responses to “How to Edit Any Web Page Live in Your Browser”

  1. This is really FREAKY simple. I’ve already earned my million dollars, hit the top of Yahoo Buzz and the front of Huffpo.
    wow. just wow.

  2. oops, it’s really a funny code, never try before.

  3. Quakeboy says:

    This is sooo coool !

  4. Marc Savoy says:

    This is indeed a neat little trick but to what end?
    Editing the page provides no permanence in the manner in which it was edited and restarting the browser reverts the page back to its intended online appearance. It also un-enables all page usability features such as hypertext linking and the ability to post comments, essentially
    transformed into a dead screen copy page.

    The option to edit any web page has been around for quite some time available via the Firefox add-on ‘Remove It Permanently’ where you can edit any page permanently with all page usability features intact.

  5. Keith Dsouza says:

    Wow this is funky, wonder how many users use this to fool around with their stats and earnings. Lol.

  6. Bum says:

    Cool!

    I have seem some very nice bookmarklets but this one is on of the best.

  7. pjaraj says:

    This is Coool…..

  8. Mark says:

    Great Post. I saw this before and wanted to find it again and came accross your site. Much more informative than the original one I visited .

    If you can do this in the browser, why can’t you make web pages like this? I know, semantics, smantics. haha

    Cool. Thanks

  9. Wow, thanks for the heads up on the Opera trick. I am relatively new to Opera (I switched from Firefox), I haven’t looked back since. I missed Firebug, but Opera has features that come close enough for me.

  10. Leland says:

    Woah… this is actually useful! When you’re on a page for a long time (Wikipedia, video games, etc.) you can use this to get rid of advertisements! Very cool, thanks for sharing!

  11. Ricks says:

    Or use firebug :)

  12. Chris says:

    You ca actually reactivate the page with all of the edits still present by reversing all of the values of the link that you pasted.

    1. After editing the page, post this again

    javascript:document.body.contentEditable=’true’; document.designMode=’on’; void 0

    and if u read it there is a value that says true, one that says on and the number 0 at the end. Change true to false, change on to off and change the 0 to 1 and then press enter and the page will be a regular page again with the edits still on. Enjoy

  13. Arnaud L says:

    Nice trick!
    But still a bit too limited: you can’t save the state of a modified page for instance.
    “Live Website Editor” features persistency of the modified webpages.
    You can find it here: http://code.google.com/p/lwe/
    It’s still in an early version but it works on most of the websites.
    Cheers

  14. reshadat says:

    ah man..this is very easy. now this explains the cheap revenue making books on webmasters forums

  15. Jesi says:

    OMG OMG OMG :O I am stunned to use and you cant believe i am circling on my chair till now to find this kinda tool… even i will never use it negatively and i am not scammer but i am too much happy to find it :) :) Thanks a bunchhhhhhhh

  16. Alan says:

    All you’ve stated has been used as a learning tool for us webmasters. Perhaps you’ve heard of HTML guardian? It will encrypt the HTML basically, leaving the code unreadable and of no use to anyone.

  17. sssss says:

    This realy sucksss

  18. shadowlord says:

    I Kno whow to do it permanatly as well

  19. Rajan says:

    Hai this is a good tool.But whats the use? With this,it only seems like a toy 4 child.So i like to know whats the permanent solution for this.That means if u can please explain how to edit a web page and save it for lng time.please put it.It will be help full for others also.

  20. how can i edit my account there using this one? please tell me how to use this firebug.. thank you..

  21. Brady says:

    Is there an easy way to print an edited page? I’m no expert, but my browser freezes up when I try to print it directly or when I try to save it as a Web Archive (in IE).. I’m guessing because of the active javascript. I would love to use this to edit some unecessary explicit content by removing a few words and print off the rest.. Thanks!

    • Samuel Kaisar says:

      you can press the ”print screen” button (aka ”Prnt Scr” to COPY the webpaage image.. then open Paint and then pasting it inside there by pressing ctrl v as a shortcut… the save the image and print..

Leave a Reply

  • Subscribe free daily email newsletter Why?
  • RSS   Feed readers   Add to Google Reader or Homepage   Twitter
writeWrite a guest article - Showcase your site to our active community of bloggers, technology experts, and geeks. Now read 100+ guest articles
Jobs
Jobs on SEO | Blogging | SEM | Marketing | Software | More...
Jobs in Google | Yahoo | Microsoft | Adobe | Ebay | Cisco | Intel
Post a job - only $50 for 30 days! | 8 more reasons

Must Buy Software