Porting Flashblock to Jetpack Platform (draft)

1,578 views

Published on

How I started to port Flashblock to Jetpack.

It still needs some performance improvements and polish but it's a good start.

Jetpack is promising platform.

Published in: Technology, Sports
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,578
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Porting Flashblock to Jetpack Platform (draft)

  1. 1. PORTING FLASHBLOCK TO JETPACK PLATFORM DRAFT
  2. 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. 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. 4. WHAT’S THE PLAN? • The basic algorithm • Some code • What could be improved • Conclusion
  5. 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. 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. 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. 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. 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. 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. 11. CONCLUSION • It’s very easy to develop an extension • Still lacks some features like localisation
  12. 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/

×