Directly Edit Website Live from any Web Browser

We periodically run contests in our forum to give out free licenses to registered members and we use a publicly available vBulletin add-on called vBulletin Raffles to automate the random selection of winners and also posting the results in a designated thread. The old method of asking the readers to post a comment to join the contest, manually extracting the names from the list, randomizing the list from random.org to pick the winner, contacting them via email and waiting for them to respond is just too much work. Moreover sometimes the email that I sent to the winner goes into their junk or spam folder and it takes even more time and effort in trying to send them the license. The good thing about using the vBulletin Raffles add-on is everything is automated as I only need to create the contest and send the license via private message where there’s no spam filter to block it.
Recently we were continuously being asked on how the winners are being selected and to at least provide a screenshot as a proof. To be honest, screenshots can be easily faked when we can effortlessly edit the non-editable text found on other websites. The changes are of course temporary and only visible to the person who changed it but not to other visitors.
The most basic method on editing a text or switching to a different image on a website is to save the webpage to your hard drive by simultaneously pressing CTRL+S and edit the saved HTML file with a text editor such as Notepad. However most modern web browsers today comes with developer tools (Web Inspector for Chrome & Safari, Firefly for Opera, Developer Tools for Internet Explorer) by default and that makes it even easier for us to directly edit the website live from the web browser. You can edit text, change or remove the attached images and even move the contents around the webpage.


Let’s have a walk through on how easy it is to edit the text on random.org list randomizer results page using Google Chrome.

1. First we enter 10 names in the part 1 box and then click the Randomize button.

2. Now we’ll have a list that is being randomized and the text are not editable. Move the mouse cursor over to the items, right click and select “Inspect element”. You will notice a bar being opened at the bottom of the browser showing the HTML code of the webpage.

3. Double click on the item at the bottom bar where it shows the HTML code to edit the text. As you can see, I’ve successfully changed the item number 1 from name2 to RAYMOND.CC. Now if I take a screenshot, you would have thought that it’s genuine but in fact the results has been rigged.

    

     The “Inspect element” feature in right click menu bar is immediately available at Opera and Chrome. As for Safari, you will need to enable the developer tools in Safari by turning on the Develop menu. In Safari preferences, click Advanced, then select “Show Develop menu in menu bar”. For Internet Explorer, press the F12 key will enable the Developer Tools user interface. Do take note that the Inspect Element feature at Firefox doesn’t allow you to edit text. You will need to install the Firebug extension then right click and select Inspect Element with Firebug.
There is an interesting bookmarklet which contains a short line of javascript that turns on contentEditable and designMode to enable editing of the webpage. There are some small differences between the two modes but turning both on seems to be the ultimate solution. Simply drag or save the Edit WebPage link below to your bookmark and opening this bookmarklet from your bookmarks will instantly allow you to edit any webpage live in your web browser.

Edit WebPage <- Drag this to your bookmark or save to your favorites.
Here is a video demonstration on how easy it is to manipulate random.org's results using Google Chrome.

Screenshots from computer as proof are no longer a source that can be trusted and probably video recordings would be more reliable and harder to manipulate. So if you need proof of someone doing something for you on their computer, ask for video recordings rather than screenshots. Also make sure that it doesn’t take them too long to produce the video recordings as it can be easily done with Screencast-O-Matic.