[Chrome Extensions]從頭開始-第一個範例

開發工具：EmEdit

第一次接觸 Chrome Extensions 當然是從官方的第一個範例開始，首先準備好一個習慣使用的文字編輯器，這邊採用的是 EmEdit，官方推薦的開發環境 Google Chrome Canary(另外一個版本的 Chrome 專門用來開發的環境，比較乾淨，不會與原本電腦已安裝的 Chrome 有所衝突)，接著我們要上路了!!!

官方所提供的第一個範例是簡單的從 Flickr 抓取圖片，顯示在 Chrome's Omnibox，使用的是 browser action 的方式。畫面就像下圖一樣。

第一步：

編寫一個 manifest file manifest.json

這是一個 json 型態的純文字檔，內容如下

{

"manifest_version": 2,

"name": "One-click Kittens",

"description": "This extension demonstrates a browser action with kittens.",

"version": "1.0",

"permissions": [

"https://secure.flickr.com/"

"browser_action": {

"default_icon": "icon.png",

"default_popup": "popup.html"

}

manifest_version：這個 manifest 的檔案版本，通常 1 都是不公開的

name：Extension 名稱

description：描述

version：Extension 版本

permissions：宣告需要存取 https://secure.flickr.com/ 網站的權限

browser_action：使用這一個 Api Function

官方範例還有其他三個檔案，icon.png / popup.html / popup.js 因為是第一個範例，所以對內容不詳加描述，只求第一個範例完成，我有另外將必需的四個檔案打包好，可直接使用。

demo程式 One-click Kittens.7z (右鍵另開視窗下載)

全部都將其放在同一個目錄，然後打開 Google Chrome Canary 進入到 Extensions 的畫面(可直接在瀏覽器列上打 chrome://extensions/)，確認是否進入了開發者模式(需打勾)，如下圖：

接著點選 Load unpacked extension… 選擇檔案所在的目錄，選好確定了之後，就可以看到在瀏覽器上有多了一個我們自製的 Extensions，若完成之後，目錄當中的資料有做任何的修改，請執行該 Extensions 中的 Reload(Ctrl+R)的動作重新載入。

PS.要注意的是 popup.js 檔案中有一段是要取用 Flickr 的部份，如下：

searchOnFlickr_: 'https://secure.flickr.com/services/rest/?' +

'method=flickr.photos.search&' +

'api_key=90485e931f687a9b9c2a66bf58a3861a&' +

'text=' + encodeURIComponent(QUERY) + '&' +

'safe_search=1&' +

'content_type=1&' +

'sort=interestingness-desc&' +

'per_page=20',

上面標記紅色的部份是存取該api 所需要的授權，這部份要自己去作申請的動作：

網址：https://www.flickr.com/services/apps/create/apply/?

需要登入Yahoo 的帳號(不是詐騙，flickr是Yahoo的!!!!!)，接著就直接進入申請一非商業使用的key

接下來的資訊就按照您的需求去填寫，之後會得到一組專屬於你的 key 跟密鑰，這邊我們所需要的只有 key 而已，請將自己的 key 填到上述的 api_key 中(紅色部份)。

完成了!!!!恭喜進入 Chrome Extensions 的世界!!!!