It is cross origin, not cross domain

XHR (ajax) has cross origin instead of cross domain limit. It needs same host, same protocol and same port, otherwise it is cross origin, and we need turn to below 3 frequently used solutions to solve this issue.

Let's say http://abc.com javascript wants to do ajax call to http://xyz.com.
1. Server side proxy
abc.com should proxy the ajax request to http://xyz.com, so for browser, it is consider same origin.

2. JSONP
Include a script tag in http://abc.com, and the script is to ask for a JSONP response (basically json data wrapped in a callback javascript function) from http://xyz.com
Javascript callback in http://abc.com should process the response. http://xyz.com should set Content-type to application/javascript in http response header

e.g. Twitter supports JSONP
https://api.twitter.com/1/statuses/user_timeline/lucozhao.json?callback=updateTweets
3. CORS (Http access control)
Basically CORS is based on Http headers to communicate between browser and server
Request Headers: 
Origin
Access-Control-Request-Method
Access-Control-Request-Headers

Response Headers:
Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Expose-Headers
Access-Control-Max-Age
Access-Control-Allow-Credentials

If server sends back Access-Control-Allow-Origin: * response header, then it allows ajax calls from other origins.

Browser extension

crossrider.com is an interesting one to support creating cross browser extensions in minutes. The write once, run everywhere concept is very promising like phonegap for mobile web development. I have not tried it out, but recently I work on building, packaging and hosting browser extensions. I have some notes to share.

First thing comes first,  what is a browser extension? From wikipedia, a browser extension is a computer program that extends the functionality of a web browser in some way. Depending on the browser and the version, the term may be distinct from similar terms such as plug-in or add-on. The programming language can be native or web language Javascript/CSS/HTML. Today I will quickly go through the build/package/auto-updata/hosting of Chrome Extension and Safari Extension.

Chrome:
http://developer.chrome.com/extensions/docs.html has all the details about how to develop Chrome extension. My note is:
Build: grunt.js (which will do source code minification, image optimization, copy etc)
Package: chrome://extensions -> pack extension...
Hosting: Chrome web store, or self-hosted web site
Auto-update: manifest.json versioning (Chrome web store)

Safari:
http://developer.apple.com/library/safari/#documentation/Tools/Conceptual/SafariExtensionGuide has all the details about how to develop Safari extension. My note is:
Build: grunt.js (which will do source code minification, image optimization, copy etc). Note that Icon.png should have alpha channel.
Package: Safari -> Develop -> Show Extension Builder, where can package (need apple developer ID before build safari extension)
Hosting: Safari extension gallery or self-hosted web site
Auto-update: Update manifest URL in Info.plist (or Safari extension Gallery?)

Firefox:
https://developer.mozilla.org/en-US/docs/Extensions has all the details about how to developer Firefox Extension (one of Add-on types). However, many information is for old Firefox 1.5, 2.0, 3.0 etc. Look forward to seeing updated documents because as of today latest Firefox version is 19. Also Firefox provides more possible ways (Add-on Bar, Toolbar, Menu etc) to develop extension. It has flexibility, but may also confuse developers/users.
My note is:
Build: grunt.js
Package: xpi is a zip file
Hosting: AMO ( http://addons.mozilla.org) is preferred or you can host on your own website.
Auto-update: If you host your extension on AMO, just leave out the updateURL completely in install.rdf. AMO provides secure updates automatically.

Opera:
TBD

Internet Explorer:
TBD