開發Safari Extension (之一)

Reading time ~1 minute

現在的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了

[筆記][node.js] 使用nvm安裝查克拉版的node.js

從[nodejs 8](https://nodejs.org/en/blog/release/v8.0.0/)開始, nodejs可以不再需要一定跟V8綁在一起了, 之後底層的Engine可以換成微軟的[查克拉](https://github.com/Microsoft/C...… Continue reading