Porting Flashblock to Jetpack Platform (draft)
-
Upload
thomas-bassetto -
Category
Technology
-
view
1.377 -
download
1
description
Transcript of Porting Flashblock to Jetpack Platform (draft)
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/