2010年12月21日 星期二

開發Safari Extension (之一)

現在的Browser好像不開放給人家掛一些外掛就落伍了, 大部分的Desktop Browser也都有提供這樣的功能, Apple的Safari也不例外

開發Safari Extension其實不難, 如果有開發過Google Chrome browser extension的話, 可能還更好上手, 架構差不多類似, 文件也沒很多, 大概花個半小時看一下文件就應該可以上手了 

不過, 前置作業的門檻可能就大了一點了!

首先....你必須要有台.... Mac ... 光聽到這需求感覺就很鳥, 我沒在Windows底下的Safari開發, 所以我不確定有沒方法解決, 不過我相信, 至少要能找到Keychain的替代方案才可以! 所以, 用Mac是最保險的!

然後你必須上蘋果的開發者網站去申請一個Safari developer的帳號, 好消息是, 這不像iOS developer方案是要錢的, 它是...完全免費

有了帳號後就要申請憑證, 申請憑證先要透過keychain這隻MacOS內建的程式去產生certificate request (CSR)檔, 如下(中文是憑證授權要求憑證...好爛的翻譯):

把CSR檔上傳後就可以產生憑證, 記得下載回來安裝, 不過這邊有點要注意一點, 用Chrome browser上傳總是會失敗, 用Safari就沒問題了, 光這部份搞了我一個晚上... orz

要開發Safari Extension的起始點是Extension Builder(延伸功能建構器), 打開你的Safari然後從"開發人員"->"顯示延伸功能建構器"

打開後從"+"的地方新增新的Extension, 它會讓你指定你Extension要存放的目錄, 之後只要把你的程式還有資源(圖檔等等)都copy到這目錄即可

先設定一下你的Extension的基本資料:

此外別忘了設定存取權限, 如果你的Extension要存取比預設多的資訊

接著設定一下幾個主要的元件, 以及資料庫所需要的容量大小(如果你會需要儲存資料的話)

這邊稍微簡單介紹幾個基本的元件, 以後有空再細寫

基本上一個Safari extension可以由以下的幾種東西構成

  1. Global page : 不會被顯示出來的一個背景頁面, html檔案, 通常用來提供function而非顯示
  2. Tool button : 工具列上的一個按鈕 (由新增工具列項目那邊新增)
  3. Context menu item : 按滑鼠右鍵叫出的選單(中翻譯成特色選單)
  4. Extension bar(中文翻譯成"列") : 一整列工具列, 可以由一個Html檔案來構成
  5. Injected script : 像是Chrome Browser的content script, 嵌入到網頁的java script
  6. Injected style : 嵌入到網頁的style sheet

基本上這些都可以在extension builder這邊設定, 不過看API, 也應該可以由程式動態控制去設定, 大概組合這六樣就可以簡單寫出一個Safari extension了