先上效果圖：
下面我們一步步來~
建立weather檔案夾，裡面包含manifest.json，popup.html和images檔案夾。images檔案夾放16,48,128三種不同尺寸的圖示
manifest.json内代碼如下：
popup.html的代碼如下：
manifest.json
必需檔案，是整個擴充的入口，每個chrome擴充都包含一個manifest檔案。manifest必須包含name、version和manifest_version屬性。
屬性說明：
<code>manifest_version</code>指定檔案格式的版本，在chrome18之後，應該都是2
<code>name</code>擴充名稱
<code>version</code> 擴充版本号
<code>version</code>擴充的版本
<code>icons</code>擴充清單圖示
<code>browser_action</code>指定擴充在chrome工具欄中的顯示資訊。
<code>default_icon</code>、<code>default_title</code>、<code>default_popup</code>依次指定圖示、标題、對應的頁面
popup頁面
popup頁面是當使用者點選擴充圖示時，展示在圖示下面的頁面。
打開chrome擴充程式界面，勾選"開發者模式",拖入weather檔案夾，然後就可以看到weather擴充已經出現在chrome擴充程式清單了
同時，工具欄也出現了weather的圖示，點選之後會彈出popup界面:
完善靜态popup頁面,模拟天氣資料:
建立css檔案，并在popup頁面引入
點選工具欄weather圖示，此時界面如圖：
google允許chrome擴充應用不必受限于跨域限制。但出于安全考慮，需要在manifest的permissions屬性中聲明需要跨域的權限。
首先，在manifest裡添加要請求的api接口：
然後建立popup.js并在popup頁面中引入
簡單的ajax函數：
和風天氣api可以通過城市名稱，城市代碼,ip三種方式來擷取指定城市天氣資料，不過經過測試發現，ip擷取的方式不準确，城市有偏差，是以，直接用城市名稱來擷取。這裡借用<code>http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json</code>擷取城市名稱。
為了友善的解析圖檔，建構一個json
showweather()函數建構dom;
這時，再點選weather圖示，天氣擴充基本上就完成了，不過因為和風api有請求次數限制，也為了減少請求，這裡做一下資料緩存。
至此，一個簡單的chrome天氣擴充就完成了，是不是比想象中更簡單?
如果覺得本文有幫助，請github賞個star~