Getting started

with Mozilla's Add-on SDK

Follow along

http://talks.canuckistani.ca/allhands2011

A Brief History

SDK 1.1!

Current State

Roadmap

Published roadmap: https://wiki.mozilla.org/Jetpack/Roadmap

Addon-kit Module overview

Let's Get set up!

Local development

Requirements:

Set-up

Online developer with Builder:

Part 2
Interacting with Web Content

Content scripts

Simple Example: Page Exterminator

var data = require("self").data;

var pageMod = require("page-mod").PageMod({
  include: ['http://talks.canuckistani.ca/*'],
  contentScript: 'if (confirm("EXTERMINATE???")) ' + 
    '{ document.body.innerHTML = ' +
    '\'<img src="http://dailypop.files.wordpress.com/2010/04/dalek.gif">\';' + 
    'document.body.style.display="block"; ' + 
    '};',
  contentScriptWhen: 'end',
});
Link

Anatomy of this page-mod

  1. include: ['http://talks.canuckistani.ca/*']
    A string url pattern, or array of url patterns.
  2. contentScript: "..."
    A string of JavaScript code to run.
  3. contentScriptWhen: 'end'
    When do we run this code? The default is 'end', meaning that the script is not run until the page is done loading

Content script security model

Wait, there's more!

Awesome er, splendid page-mod implementation

var pageMod = require("page-mod").PageMod({
  include: ['*.canuckistani.ca'],
  contentScriptWhen: 'end',
  contentScriptFile: [data.url('lib.js')],
  onAttach: function(worker) {
    workers.push(worker);
    worker.on('detach', function () {
      detachWorker(this, workers);
    });
    
    worker.postMessage('42'); 
  }
});
Link

Previous example, dissected!

Matching content script

Very basic event handler for the 'message' event:

self.on('message', function (payload) {
    window.document.body.innerHTML(
      'The answer to the ultimate question of life, the universe ' +
      'and everything is '+parseInt(payload));
});

Alternate module: Tabs

var data = require("self").data;
var tabs = require("tabs");
 
tabs.on('activate', function(tab) {
  tab.attach({
  contentScript: 'if (confirm("EXTERMINATE???")) ' + 
    '{ document.body.innerHTML = ' +
    '\'<img src="http://dailypop.files.wordpress.com/2010/04/dalek.gif">\';' + 
    'document.body.style.display="block"; ' + 
    '};',
  });
});
Link

page-mod vs. tabs

We are all splendid Rocketeers.

Get involved, kick the tires, let us know.