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.

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/firefox/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. it’s 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 can’t 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 find 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