Porting Flashblock to Jetpack Platform (draft)
1 like499 views
This document outlines plans to port the Flashblock Firefox extension to the Jetpack platform. It describes what Flashblock and Jetpack are, proposes an algorithm to find and replace Flash objects with placeholders, and suggests improvements like adding an on/off button and using storage to remember blocked objects. The port would make Flashblocking easier to develop and more customizable while still needing features like localization.
![FIND FLASH OBJECTS
Better method
Lazzy method
Search for :
function findFlash(doc){ • object[codebase*="swflash.cab"]
return $(doc).find('object, embed'); • object[data*=".swf"]
} • embed[type="application/x-shockwave-flash"]
• etc.](https://image.slidesharecdn.com/flashblockjetpack-090915154123-phpapp01/85/Porting-Flashblock-to-Jetpack-Platform-draft-7-320.jpg)
Porting Flashblock to Jetpack Platform (draft)
- 1. PORTING FLASHBLOCK TO JETPACK PLATFORM DRAFT
- 2. 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.
- 3. WHAT’S JETPACK? • Jetpackis an API for allowing you to write Firefox add-ons using the web technologies you already know (e.g. HTML, CSS and Javascript). • Almostone-clic install and without restart
- 4. WHAT’S THE PLAN? • The basic algorithm • Some code • What could be improved • Conclusion
- 5. ALGORITHM Quite simple : • Look for all Flash object • Replace them by a placeholder •A click on a placeholder put the Flash object back
- 6. 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 ); }); } });
- 7. FIND FLASH OBJECTS Better method Lazzy method Search for : function findFlash(doc){ • object[codebase*="swflash.cab"] return $(doc).find('object, embed'); • object[data*=".swf"] } • embed[type="application/x-shockwave-flash"] • etc.
- 8. 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 }); }
- 9. PLACEHOLDERS • Full CSS3 • Make use of text-shadow, - moz-box-shadow, -moz- border-radius and -moz-linear- gradient (coming with Firefox 3.6)
- 10. NEXT STEPS • Block Flash objects sooner • Use simple storage JEP to remember block status • Improve memory footprint • Usethe coming menu JEP • Better way to remember and simple storage one to removed objects provide whitelist management • BlockSilverlight, Authorware, Director, etc. objects
- 11. CONCLUSION • It’s very easy to develop an extension • Still lacks some features like localisation
- 12. 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 • Andfinally Flashblock for Jetpack : http://tb4.fr/labs/jetpack/ flashblock/