Easy Deployment of Site-Extensions with a Browser Plugin
Marko Samastur (marko.samastur@zemanta.com)
Zemanta
Zemanta Widget
http://www.zemanta.com
Zemanta Widget (2)
Why having a browser extension?
Pages without appropriate API
Cross-domain requests
- postMessage
- window.name
- GreaseMonkey XHR
Getting extension to work...
Blogger without Zemanta widget
Blogger with Zemanta widget
CSS example
<div id=”#zem1”>
<div id=”#zem2”>
<div id=”#zem3”>
<!-- Here starts and ends actual widget -->
</div>
</div>
</div>
#zem1 #zem2 #zem3 h3 {
}
Microformats rule
Javascript traps
Leave object Object alone
Object.prototype.extend = function() {
var a = arguments;
for( var i = 0; i < a.length; i++ ) {
var o = a[ i ];
for( var p in o ) {
try {
if( !this[ p ] &&
(!o.hasOwnProperty || o.hasOwnProperty( p )) )
this[ p ] = o[ p ];
} catch( e ) {}
}
}
return this;
}
Namespaces
(function () {
})();
var Zemanta = function () {
var privAnswer = 5,
pubAnswer = 42;
function privateFunction () { alert('private');};
function publicFunction () { privateFunction();alert(' and public');}
return {
answer: pubAnswer,
call: publicFunction
}
}();
Timing
Deployment
- When to start our widget on page?
- How to load it?
Example from rules.xml
<rule>
<name>Blogger</name>
<regexp>https?://.*\.blogger\.com/post-create\.g\?blogID=.*</regexp>
<regexp>https?://.*\.blogger\.com/post-edit\.g\?blogID=.*</regexp>
<url>http://static.zemanta.com/widgets/blogger.com/loader.js</url>
</rule>
Where to put widget files?
- part of extension bundle
- on web
Extension bundle - benefits
- always present
- no latency
- potenially cheaper hosting
Loading from web - benefits
- easier reuse of components
- easier debugging
- better control over upgrades
Caching
Better
http://static.zemanta.com/core/123/jquery.zemanta.js
then
http://static.zemanta.com/core/jquery.zemanta.js?123
http://static.zemanta.com/core/123/jquery.zemanta.js
then
http://static.zemanta.com/core/jquery.zemanta.js?123
Amazon S3
150K extension => 30 000 transfers for 5$
Handling different widget versions
Preventing conflicts on multiple load
- check for existance of Javascript objects
- check DOM
Old promise...
Tools for easier development of extensions
- Extension Wizard (mielczarek.org and w3clubs.com)
- FUEL (http://developer.mozilla.org/En/FUEL)
- besttoolbars.net
- Brian (briks.si)
Questions?
- marko.samastur@zemanta.com
- http://markos.gaivo.net/talks/w2eb/
- http://markos.gaivo.net/talks/w2eb/slides.zip