Teach your Browser new tricks

  • 687 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
687
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
3
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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