8-Bit News

Time to blog about some older projects...

I made a silly Safari extension to rewrite Google News in an 8-bit style.

Despite being a bit silly, this project had a real purpose, which was to make the Google News page less cluttered. Most of the extension is about removing things. Google News adds a lot of unnecessary information to the news page -- the only non-news part preserved by 8bitnews is the link to other articles, because this ability to see multiple interpretations of the same story is the best part about Google News.

There are two other parts to the extension.

The first other part adds a custom font. This wasn't hard at all -- extensions can bundle resources and reference them -- but many C64 fonts didn't actually display in Safari for some reason, even though I could preview them with Font Book. I eventually managed to find a reasonably-licensed font that worked.

The final part of the project is the image manipulation. 8bitnews redisplays each image at 4x scale using a Commodore 64 palette. To convert to the C64 palette, I copied the image to a Canvas object, then accessed the image data from there to choose to most appropriate colour. To choose the best colour, each pixel is converted to the HSL colour space. This is important because variations in saturation and luminance are far less visually annoying than variations in hue.

The pictures mostly look pretty bad, but sometimes there are some gems.

An interesting security consideration: the extension JavaScript is injected into the Google News page and thus behaves as if it were served by the Google News web server. This means that the extension script is prohibited from accessing the image data of images that were served by other Web sites, due to the same-origin policy. Happily, Google News seems to encode about 90% of their images as base64 and include them directly in the HTML page, so this wasn't a problem in practise.

(Incidentally, this is a bit of a weird policy... if the browser makers are worried about malicious (XSS-injected, say) JavaScript modifying an image, well, the JS can easily hide that image and substitute its own without violating the policy. If they are worried about information leakage, well, the JS has access to a whole lot of metadata about the image, such as its width and height -- these may have been supplied by a third party as well. So the policy seems rather inconsistent.)