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