Teach your Browser new tricks

download Teach your Browser new tricks

of 55

  • date post

  • Category


  • view

  • download


Embed Size (px)


Almost all Browsers allow you to install Extensions/Add-ons to make them more powerful by adding new functionality. Dirk Ginader will show you how he built build such an Browser extension to add a feature all modern Browsers lack, and how you can do the same by using basic web technologies and how to make them run in every Browser.

Transcript of Teach your Browser new tricks

  • 1. Teach your Browser new tricks OPEN WEB CAMP VI - Dirk Ginader http://dir.kg @ginader

2. Teach an old Dog new tricks OPEN WEB CAMP VI - Dirk Ginader http://dir.kg @ginader 3. ~4 years ago 4. http://www.brucelawson.co.uk/2011/longdesc-in-html5/ 5. http://www.w3.org/TR/html-longdesc/ 6. http://www.w3.org/TR/html-longdesc/ 7. http://www.w3.org/TR/html-longdesc/ 8. http://dir.kg/john.foliot.awesome.pose 9. http://dir.kg/longdesc 10. http://dir.kg/longdesc.demo 11. http://dir.kg/longdesc.demo 12. http://dir.kg/longdesc.demo 13. http://dir.kg/longdesc.demo 14. http://dir.kg/tellmemore.bit 15. http://dir.kg/tellmemore 16. https://addons.mozilla.org/en-US/refox/addon/longdesc/ 17. http://www.webaxe.org/longdesc-links-history-future/ 18. 2015 19. http://dir.kg/wp-longdesc 20. http://crossrider.com/ 21. Create a new Extension in the Dashboard 22. The STAGING mode 23. If you have working code simply upload it 24. If you have working code simply upload it (YO Karl! ;-)) 25. load the Resources jQuery is already Preloaded for us! 26. run the code 27. optional but super nice and convenient 28. load images in CSS needs resource-image:// syntax 29. The STAGING Extension makes development easy 30. Download the STAGING extension and install it 31. Enable Developer mode 32. Load the extension 33. Load the extension 34. Extension is now installed and already running 35. All changes made in crossrider are available instantly BUT 36. reload the extension to make sure the changes are loaded 37. test on a http server - python -m SimpleHTTPServer FTW! 38. its ALIIIIIIVE (imagine the crazy scientist laughter) 39. Extensions are powerful! The crossrider docs are your friend! 40. cross domain requests! I can use this for V2! 41. V2? Show all found images ok click of the Browser Button? 42. Sync with production to prepare launch 43. Push to production 44. In PRODUCTION mode code cant be edited 45. Fine tune the appearance in the Settings 46. Icons and Information about the Extension are important 47. Allow users to download your Extension 48. Export the Extension so your users can nd it! 49. The Chrome Developer Dashboard 50. http://dir.kg/longdesc.install.chrome 51. http://www.qbyte.org/puzzles/p045s.html 52. http://www.qbyte.org/puzzles/p045s.html YAY! 53. http://www.qbyte.org/puzzles/p045s.html 54. http://www.qbyte.org/puzzles/p045s.html 55. Thank you! Have fun teaching your DogBrowser new tricks! Slides at http://dir.kg/owc6 http://dir.kg | @ginader