PORTING FLASHBLOCKTO JETPACK PLATFORM

DRAFT

WHAT’S FLASHBLOCK?

• Flashblock is an extension for the Firefox that blocks ALL Flash content from loading. It then leaves placeholders on the webpage that allow you to click to download and then view the Flash content.

WHAT’S JETPACK?

• Jetpack is an API for allowing you to write Firefox add-ons using the web technologies you already know (e.g. HTML, CSS and Javascript).

• Almost one-clic install and without restart

WHAT’S THE PLAN?

• The basic algorithm

• Some code

• What could be improved

• Conclusion

ALGORITHM

Quite simple :

• Look for all Flash object

• Replace them by a placeholder

• A click on a placeholder put the Flash object back

ON/OFF BUTTON ON THE STATUS BAR

jetpack.statusBar.append({

html: 'Flashblok?<input type="checkbox">',

width: 76,

onReady: function(widget){

$("input", widget).click(function(){

if( this.checked ){

jetpack.tabs.onReady( removeEmbeds );

removeEmbeds(jetpack.tabs.focused.contentDocument);

}

else jetpack.tabs.onReady.unbind( removeEmbeds );

});

}

});

FIND FLASH OBJECTS

Lazzy method

function findFlash(doc){

return $(doc).find('object, embed');

}

Better method

Search for :

• object[codebase*="swflash.cab"]

• object[data*=".swf"]

• embed[type="application/x-shockwave-flash"]

• etc.

REMOVE FLASH

function removeEmbeds(doc){

findFlash(doc).each(function() {

var placeHolder = createPlaceHolder(...);

// Here I put code to remember my removed Flash object

placeHolder.click(function(eventObject){

$(this).replaceWith(myDeletedEmbed);

});

$(this).replaceWith(placeHolder); // So easy with jQuery

});

}

PLACEHOLDERS

• Full CSS3

• Make use of text-shadow, -moz-box-shadow, -moz-border-radius and -moz-linear-gradient (coming with Firefox 3.6)

NEXT STEPS

• Block Flash objects sooner

• Improve memory footprint

• Better way to remember removed objects

• Block Silverlight, Authorware, Director, etc. objects

• Use simple storage JEP to remember block status

• Use the coming menu JEP and simple storage one to provide whitelist management

CONCLUSION

• It’s very easy to develop an extension

• Still lacks some features like localisation

LINKS

• Jetpack official site: http://labs.mozilla.com/jetpack/

• Jetpack tutorial: https://jetpack.mozillalabs.com/tutorial.html

• JEPs: https://wiki.mozilla.org/Labs/Jetpack/JEPs

• Original Flashblock extension : https://addons.mozilla.org/firefox/addon/433

• And finally Flashblock for Jetpack : http://tb4.fr/labs/jetpack/flashblock/