現在的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可以由以下的幾種東西構成
- Global page : 不會被顯示出來的一個背景頁面, html檔案, 通常用來提供function而非顯示
- Tool button : 工具列上的一個按鈕 (由新增工具列項目那邊新增)
- Context menu item : 按滑鼠右鍵叫出的選單(中翻譯成特色選單)
- Extension bar(中文翻譯成"列”) : 一整列工具列, 可以由一個Html檔案來構成
- Injected script : 像是Chrome Browser的content script, 嵌入到網頁的java script
- Injected style : 嵌入到網頁的style sheet
基本上這些都可以在extension builder這邊設定, 不過看API, 也應該可以由程式動態控制去設定, 大概組合這六樣就可以簡單寫出一個Safari extension了