Vandalising the web with contenteditable

This instructions are written assuming the Firefox browser. Other browsers may work similarly.

Pick a website that is in need of vandalism. From the menu button, pick Save Page. In the save popup, make sure that you pick "Web Page, complete". Now in the browser select Open File (ctrl+o, or cmd+o on a Mac) and pick the file you just saved to. Note how the URL now starts with "file:///". This means that you're viewing a copy of the site that's been saved on your computer.

With a code editor, open the HTML file you saved. Find the

tag (you may need to use the "find" command of your editor). Add the attribute "contenteditable" and save. It should look something like (the blah parts may be different or missing):

    <body blah="foo" blahblah="maybe" contenteditable>

Reload the page. You should now be able to type freely and change text in the page. Images may also be draggable to reposition them. The browser is in fact a quite sophisticated HTML editing tool. Unfortunately, it leaves the "final steps" out assuming that developers will build tools that make use of these features (like contenteditable).

Mini web archives

When you pick "Web Page, complete", Firefox does it's best to record not just the HTML page, but also all the things that are linked from the page such as images, fonts, stylesheets, and javascript. In addition to the HTML file, it creates a folder to contain these linked resources. The HTML page is then rewritten to link to the local files. The links are relative links, so that as long as you keep the HTML and folder of related files in the same folder, you should be able to move the page and still view it without breaking links. However, there may well be links that are still broken as javascript is often used in modern sites to continue loading new things in the background. To see Network activity, open the "Network Monitor" (ctrl-shift-q). Reload the page and see if there is network activity still.