Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Teach your Browser new tricks OPEN WEB CAMP VI - Dirk Ginader http://dir.kg @ginader
Teach an old Dog new tricks OPEN WEB CAMP VI - Dirk Ginader http://dir.kg @ginader
~4 years ago
http://www.brucelawson.co.uk/2011/longdesc-in-html5/
http://www.w3.org/TR/html-longdesc/
http://www.w3.org/TR/html-longdesc/
http://www.w3.org/TR/html-longdesc/
http://dir.kg/john.foliot.awesome.pose
http://dir.kg/longdesc
http://dir.kg/longdesc.demo
http://dir.kg/longdesc.demo
http://dir.kg/longdesc.demo
http://dir.kg/longdesc.demo
http://dir.kg/tellmemore.bit
http://dir.kg/tellmemore
https://addons.mozilla.org/en-US/firefox/addon/longdesc/
http://www.webaxe.org/longdesc-links-history-future/
2015
http://dir.kg/wp-longdesc
http://crossrider.com/
Create a new Extension in the Dashboard
The STAGING mode
If you have working code simply upload it
If you have working code simply upload it (YO Karl! ;-))
load the Resources — jQuery is already Preloaded for us!
run the code
optional but super nice and convenient
load images in CSS needs resource-image:// syntax
The STAGING Extension makes development easy
Download the STAGING extension and install it
Enable Developer mode
Load the extension
Load the extension
Extension is now installed and already running
All changes made in crossrider are available instantly BUT…
…reload the extension to make sure the changes are loaded
test on a http server - python -m SimpleHTTPServer FTW!
it’s ALIIIIIIVE (imagine the crazy scientist laughter…)
Extensions are powerful! The crossrider docs are your friend!
cross domain requests! I can use this for V2!
V2? Show all found images ok click of the Browser Button?
Sync with production to prepare launch
Push to production
In PRODUCTION mode code can’t be edited
Fine tune the appearance in the Settings
Icons and Information about the Extension are important
Allow users to download your Extension
Export the Extension so your users can find it!
The Chrome Developer Dashboard
http://dir.kg/longdesc.install.chrome
http://www.qbyte.org/puzzles/p045s.html
http://www.qbyte.org/puzzles/p045s.html YAY!
http://www.qbyte.org/puzzles/p045s.html
http://www.qbyte.org/puzzles/p045s.html
Thank you! Have fun teaching your DogBrowser new tricks! Slides at http://dir.kg/owc6 http://dir.kg | @ginader
Upcoming SlideShare
Loading in …5
×

Teach your Browser new tricks

2,316 views

Published on

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.

Published in: Technology
License: CC Attribution-ShareAlike License
no profile picture user

  • Be the first to comment

Teach your Browser new tricks

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

×