Teach your Browser new tricks
Upcoming SlideShare
Loading in...5
×
 

Teach your Browser new tricks

on

  • 702 views

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.

Statistics

Views

Total Views
702
Views on SlideShare
628
Embed Views
74

Actions

Likes
4
Downloads
2
Comments
0

6 Embeds 74

https://twitter.com 55
http://lanyrd.com 11
http://www.slideee.com 4
https://tweetdeck.twitter.com 2
http://tweetedtimes.com 1
http://feedly.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Teach your Browser new tricks Teach your Browser new tricks Presentation Transcript

  • 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