Labs/F1/Modularity/WebMod HOWTO

This HOWTO is specifically tailored to web sites that wish to be tightly integrated with Firefox functionality in the form of a Web Module (WebMod).

Architecture

A WebMod is a way to extend targeted browser functionality with HTML and JavaScript. WebMods have no standalone abilities to modify the user agent, they only respond to API calls from the user agent. A WebMod is made available by a provider of a certain feature, e.g. Twitter for link-sharing, as HTML and JavaScript served from the provider's domain. It is advertised by a Web-accessible manifest, and it can be "installed" into a user agent that supports this functionality.

The user agent and a WebMod communicate over postMessage(). Effectively, a WebMod is a way for a web site to expose an API over postMessage(). Some advanced WebMods may eventually have a User Interface, but for now we describe purely the case of WebMods loaded in invisible IFRAMEs that provide only an API abstraction.

Advertising a WebMod

A web site can advertise to user agents that it has WebMods available to answer certain API calls using a manifest:

{
 "version": "1.0",
 "name": "MozillaBall",
 "description": "Exciting Open Web development action!",
 "icons": {
   "16": "/img/icon-16.png",
   "48": "/img/icon-48.png",
   "128": "/img/icon-128.png"
 },
 "widget": {
   "path": "/widget.html",
   "width": 100,
   "height": 200
 },
 "developer": {
   "name": "Mozilla Labs",
   "url": "http://mozillalabs.com"
 },
 "installs_allowed_from": [
   "https://appstore.mozillalabs.com"
 ],
 "locales": {
   "es": {
     "description": "¡Acción abierta emocionante del desarrollo del Web!",
     "developer": {
       "url": "http://es.mozillalabs.com/"
     }
   },
   "it": {
     "description": "Azione aperta emozionante di sviluppo di fotoricettore!",
     "developer": {
       "url": "http://it.mozillalabs.com/"
     }
   }
 },
 "default_locale": "en"

}