Labs/Jetpack/Reboot/JEP/107

JEP 107 - Page Mods

• Champion: Daniel Buchner - daniel@mozilla.com
• Status: Accepted/In-Queue
• Bug Ticket:
• Type: API
• Difficulty: 4

Proposal

Page Mods is chiefly aimed at modifying and manipulating content documents within Firefox. Pages Mods should perform this functionality in a seamless fashion where the end result is the only change visible to the user.

Key Issues

When tabs load that match the "matches" white-list, we must ensure that script and styles injected into the page are evaluated by the parser in the normal load cycle. Perhaps we achieve this by dynamically creating resource or custom protocol file URIs that contain the style and script blocks entered via the Background Page API methods. These URIs would be dynamically created CSS/JS files that would then be injected in the appropriate places withing the matched documents (CSS files in the doc head, JS files just after the close of the body tag).

Dependencies & Requirements

• Are there any Firefox platform bugs blocking it?
• Does other Jetpack platform code need to be modified or added?
• Does its implementation affect any other projects or code?

API Methods

Initialization

var moddingTwoPages = new pageMod({
    'matches': ['*.google.com', 'jetpack.mozillalabs.com'],
    'includes':{
        'script': ['http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js'],
        'styles': ['http://yui.yahooapis.com/3.0.0/build/cssbase/base-min.css']
    },
    'styles': 'body { background: #ffffff; font-family: Trebuchet MS; }' +
              'span.details { font-size: 7px; }'
    },
    'script': function(){
        $('container').addEvents({
            'mouseenter:relay(ul li)':function(){ this.tween('background','#000'); },
            'mouseleave:relay(ul li)':function(){ this.tween('background','#fff'); }
        })
    }
});

Include Methods

Adding includes

moddingTwoPages.add({ 
    'includes':{
        'script': ['http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js'],
        'styles': ['http://yui.yahooapis.com/3.0.0/build/cssbase/base-min.css']
    }
});

Removing includes

moddingTwoPages.remove({ 
    'includes':{
        'script': ['http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js'],
        'styles': ['http://yui.yahooapis.com/3.0.0/build/cssbase/base-min.css']
    }
});

Removing all includes

// This method also takes the options: 'styles', 'script', 'matches', 'all'
moddingTwoPages.empty('includes');

Style Methods

Adding styles via object

 
moddingTwoPages.add({ 
    'styles': {
        'body':{
            'background': '#ffffff',
            'font-family':'Trebuchet MS'
        },
        'span.details':{
            'font-size':'7px'
        }
    }
});

Adding styles via string

moddingTwoPages.add({
    'styles': 'a.special { color: green; font-size: 18px; }'
});

Removing specific styles

moddingTwoPages.remove({
    'styles':{
        'body':['background', 'font-family'],
        'span.details':['font-size']
    }
});

Removing all styles

// This method (also noted above) takes the options: 'includes', 'script', 'matches', 'all'
moddingTwoPages.empty('styles');

Script Methods

Adding script

moddingTwoPages.add({
    'script': function(){
        var pageLog = function(){
            console.log('I just initialized a pageMod!');
        }
    }
});

Removing all script

// This method also takes the options: 'includes', 'styles', 'matches', 'all'
moddingTwoPages.empty('script');

Match Methods

Adding matches

var moddingThreePages = moddingTwoPages.add({
    'matches':['*.digg.com']
});

Removing matches

var moddingOnePage = moddingThreePages.remove({
    'matches': ['*.google.com', 'jetpack.mozillalabs.com']
});

Removing all matches

// This method (also noted above) takes the options: 'includes', 'styles', 'script', 'all'
moddingTwoPages.empty('matches');