4.12. Adding images without hitting a central server [Dive Into Greasemonkey]

4.12. Adding images without hitting a central server

Firefox supports data: URLs, which are a way to embed chunks of data into a URL instead of retrieving the data from the server in a separate call. You've probably never heard of data: URLs because Internet Explorer doesn't support them, so no one uses them. But they can come in handy in user scripts.

Example: Add a graphical logo at the top of the page

var logo = document.createElement('img');
logo.src = 'data:image/gif;base64,R0lGODlhDQAOAJEAANno6wBmZgAAAAAAACH5BAAAAAAA'+
    'LAAAAAANAA4AQAIjjI8Iyw3GhACSQecutsFV3nzgNi7SVEbo06lZa66LRib2UQAAOw%3D%3D';
document.body.insertBefore(logo, document.body.firstChild);

In this example, the src of the <img> element is a data: URL which contains the entire image data in encoded form. Once the new element is inserted into the page, it will display just like any other image, but without requiring that the image be stored on a central server. In essence, you can embed images in your user scripts and distribute them as part of the same file as the rest of your code.

Use the data: URI kitchen to construct your own data: URLs.

Dive Into Greasemonkey

4.12. Adding images without hitting a central server

Example: Add a graphical logo at the top of the page

Real examples

See also