iGoogle 小工具主要是以 XML 為主體，再加上 HTML、CSS 及 JavaScript 所組成的，基本上只要會後面三種語言，要開發 iGoogle 小工具是非常快樂的一件事。
在這裡我只做一些的教學及心得分享，詳細的規範及 API 說明，請察看官方網站
Google 小工具 API 開發人員指南，開發指南裡面寫的很清楚，還有很多的範例可以參考。
心得建議：
- 再開發時建議 XML 的檔名不要太正式，iGoogle 的平台會 cache XML，造成檢視上會出現不一致情況，等到要發佈時再取一個正式的檔名，避免不必要的問題發生。
- 如果要使用 session 和 cookie 做登入驗證的話，最好使用 <iframe> 去處理，會比較容易達成且安全問題也比較少。
- 在 ModulePrefs 中的 category 屬性也記得加上去，在官方的開發人員指南中並沒有說明，共有：
- 多利用[便條簿]做測試可以減少不少時間。
- 在測試時最好在 iGoogle 上另開一個[分頁]，免得自己原本常用的小工具被打亂。
- 在測試的[分頁]中最好加上[開發人員小工具]這個小工具去管理 cache 問題。
小工具範例：
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs
title="單位換算"
description="更方便的介面處理單位制度上的換算"
directory_title="單位換算"
author="Jax"
author_email="weskerjax+feed@gmail.com"
thumbnail=
"http://weskerjax.googlepages.com/unit_converter_thumbnail.png"
screenshot=
"http://weskerjax.googlepages.com/unit_converter_screenshot.png"
title_url="http://jax-work-archive.blogspot.com/"
category="tools"
height="300">
<Locale lang="zh-tw" country="TW"/>
<Require feature="tabs"/>
<Require feature="dynamic-height"/>
</ModulePrefs>
<UserPref
name="type"
display_name="預設開啟的頁籤"
default_value="長度"
datatype="enum">
<EnumValue value="長度"/>
<EnumValue value="重量"/>
<EnumValue value="面積"/>
<EnumValue value="體積"/>
</UserPref>
<Content type="html">
<![CDATA[
<style type="text/css">
.JContent table{
margin-top:5px;
width:100%;
}
.JContent th{
background-color:#99CCFF;
padding-top:5px;
}
.JContent label{
text-align:center;
padding:3px;
display:block;
font-size:12px;
}
.JContent label input{
display:block;
text-align:left;
line-height:1.1em;
font-size:11px;
width:95%;
}
</style>
<script type="text/javascript">
var prefs = new _IG_Prefs(__MODULE_ID__);
function set_event__MODULE_ID__(tabId){
var inputs=_gel(tabId).getElementsByTagName('input');
for (var i=0, j=inputs.length; i<j; i++){
el=inputs[i];
/*設定 onkeyup 時處理單位換算*/
el.onkeyup=function(){
this.value=this.value.match(/[0-9]+[\.]?[0-9]*/);
var rate=this.getAttribute('rate');
var value=parseFloat(this.value)/parseFloat(rate);
var table=this;
while(table.tagName!="TABLE"){table=table.parentNode;}
var inputs=table.getElementsByTagName('input');
for (var i=0, j=inputs.length; i<j; i++){
chg=inputs[i];
r=chg.getAttribute('rate');
if(r==rate){continue;}
if(this.value){chg.value=value*parseFloat(r);}
else{chg.value='';}
};
};
/*設定 onfocus 選取所有文字*/
el.onfocus=function(){this.select()};
};
/*讓小工具能夠自行調整大小*/
_IG_AdjustIFrameHeight();
}
function init() {
/*建立頁籤並選定預選頁籤*/
var tabs = new _IG_Tabs(__MODULE_ID__,prefs.getString("type"));
tabs.addTab("長度","J_length",set_event__MODULE_ID__);
tabs.addTab("重量","J_weight",set_event__MODULE_ID__);
tabs.addTab("面積","J_area",set_event__MODULE_ID__);
tabs.addTab("體積","J_volume",set_event__MODULE_ID__);
}
_IG_RegisterOnloadHandler(init);/*載入時呼叫的事件處理常式*/
</script>
<div class="JContent" id="J_length">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><label>公尺<input rate="1" type="text" /></label></td>
<td><label>公里<input rate="0.001" type="text" /></label></td>
<td><label>海里<input rate="0.00053996" type="text" /></label></td>
<tr>
<td><label>英吋<input rate="39.370" type="text" /></label></td>
<td><label>英呎<input rate="3.2808" type="text" /></label></td>
<td><label>英碼<input rate="1.0936" type="text" /></label></td>
</tr>
<td><label>台尺<input rate="3.3003" type="text" /></label></td>
<td><label>市里<input rate="2e-3" type="text" /></label></td>
<td><label>市引<input rate="0.03" type="text" /></label></td>
</tr>
</table>
</div>
<div class="JContent" id="J_weight">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><label>公斤<input rate="1" type="text" /></label></td>
<td><label>公克<input rate="1e+3" type="text" /></label></td>
<td><label>公噸<input rate="1e-3" type="text" /></label></td>
</tr>
<tr>
<td><label>英磅<input rate="2.2046" type="text" /></label></td>
<td><label>盎司<input rate="35.273" type="text" /></label></td>
<td><label>英噸<input rate="9.8421e-4" type="text" /></label></td>
</tr>
<tr>
<td><label>美噸<input rate="0.0011023" type="text" /></label></td>
<td><label>格令<input rate="15432" type="text" /></label></td>
<td><label>克拉<input rate="5000" type="text" /></label></td>
</tr>
<tr>
<td><label>台斤<input rate="1.6667" type="text" /></label></td>
<td><label>台兩<input rate="26.667" type="text" /></label></td>
<td><label>市擔<input rate="0.02" type="text" /></label></td>
</tr>
</table>
</div>
<div class="JContent" id="J_area">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><label>公畝<input rate="100.00" type="text" /></label></td>
<td><label>公頃<input rate="1" type="text" /></label></td>
<td><label>平方公里<input rate="0.01" type="text" /></label></td>
</tr>
<tr>
<td><label>平方英寸<input rate="155e+5" type="text" /></label></td>
<td><label>平方英尺<input rate="107640" type="text" /></label></td>
<td><label>平方碼<input rate="11960" type="text" /></label></td>
</tr>
<tr>
<td><label>英畝<input rate="2.4711" type="text" /></label></td>
<td><label>平方英里<input rate="0.003861" type="text" /></label></td>
<td> </td>
</tr>
</table>
</div>
<div class="JContent" id="J_volume">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><label>立方公尺<input rate="1" type="text" /></label></td>
<td><label>公升<input rate="1e+3" type="text" /></label></td>
<td><label>毫升<input rate="1e+6" type="text" /></label></td>
</tr>
<tr>
<td><label>英國加侖<input rate="219.97" type="text" /></label></td>
<td><label>液體加侖<input rate="264.17" type="text" /></label></td>
<td><label>固體加侖<input rate="227.02" type="text" /></label></td>
</tr>
</table>
</div>
]]>
</Content>
</Module>
範例預覽：
範例原始檔：
unit_converter.xml第一個開發的小工具：
