本文將詳細介紹 Safari 5 中的這項新功能 , 并通過一個簡單的例子來完整介紹 Safari 擴展的開發 / 部署流程及相關技術細節。

Safari 擴展的相關背景介紹

當我們談到瀏覽器的擴展時 , 很容易被問到的問題是我們為什么要給瀏覽器寫擴展呢 ? 它能給我們帶來什么好處或者便利 ? Safari 的擴展和其他瀏覽器的擴展有什么異同 ? 下面 , 讓我們嘗試著回答這些問題。

目前 , 基于瀏覽器的應用越來越多，而我們每天黏在瀏覽器上的時間也越來越長，看新聞 , 泡 BBS, 搜索技術文檔 等等。對于這樣一個每天都要和它長時間打交道的東西，如何和它和睦相處無疑是很重要的。而如果能把它打造成完全符合你個人需求的，適合你個人使用習慣 , 為你度身定做的軟件，那將會使你的生活更美好些，讓你的工作也更有效率些。

那么，Safari 擴展具體能為我們提供哪些方面的便利呢 ? 請參考下面這幅圖 :

從這副圖能夠看出 , 我們可以擴展 Safari 的如下幾個部分 :

1、我們能夠在工具條上添加自己所需要的按鈕

2、我們能夠添加自己所需要的擴展工具條

3、可以對頁面內容做混搭 (Mashup) 或自定義的修改

4、可以對指定內容添加上下文相關菜單

好吧 , 看上去覆蓋的功能面挺多 , 但還是不夠直觀 ? 讓我來針對每條分別舉一個直觀點的例子吧 :

1、我們可以在工具條上添加一個”GMail” 按鈕 , 可定時檢查新郵件并在圖標上顯示出新郵件的數量

2、可以添加一個新的工具條 , 滾動顯示當前的 Twitter 或者新浪微博里的信息 , 或者滾動顯示每日單詞 ( 我愛背單詞 )

3、對頁面做一些增值混搭 , 按自己的喜好重新排版網頁布局 , 或者自動過濾廣告

4、當用戶選定了頁面中的一些內容后 , 在右鍵的上下文菜單中添加一個”我要分享”選項 , 可以將所選的內容分享到其他 SNS ( 例如 : 開心 / 豆瓣等 )

是不是覺得有點意思了呢 ? 當然你也許已經有了更好的主意或是更有趣的點子 , 趕緊動手打造你自己的瀏覽器吧 !

Safari 擴展開發的準備工作

下面讓我們來看一下開發 Safari 擴展都需要做些什么準備工作吧。 首先 , 開發 Safari 擴展是免費的 , 這和開發 iPhone 應用不同。 在 iTunes 上發布 iPhone 應用需要參加 iPhone Developer Program ( 個人用戶每年 $99, 企業用戶為每年 $299)。 而開發 Safari 擴展只需要在 Apple 網站上免費注冊一個 Apple ID, 獲取到你自己的開發者證書就可以了 ( 我們在下面會詳細介紹這個步驟 )。 開發 Safari 擴展 , 也不需要你學習什么新的技術或是新的編程語言 , 只要你具有標準的 HTML/CSS/JavaScript 相關技術就可以了。 讓我們開始吧 !

啟用擴展功能

在 Safari 5 缺省狀態下擴展功能是關閉的 , 用戶需要手工開啟這項功能。 打開 Safari 菜單中的”編輯”, 再點擊”偏好設置”菜單選項 , 在”高級”這個選項頁中勾選底部的”在菜單中顯示開發菜單”選項 ( 圖二 )。

然后就能從 Safari 的頂級菜單看到一個獨立的”開發”菜單項 ( 圖三 ), 從中選擇”啟用擴展”就大功告成了 !

接下來同樣在”開發”菜單中選擇”顯示擴展創建器 (Show Extension Builder)”, 就能打開 Safari 為開發人員準備的擴展開發功能了 ( 圖四 ), 點擊左下角的”+”按鈕就能創建一個新擴展或是打開一個已存在的擴展項目 我們在第三部分中再來詳細介紹這部分的功能。

讓我們回到 Safari 菜單中的”編輯”里的”偏好設置”菜單選項 , 這時我們就能在”高級”的選項頁旁邊看到新增的”擴展”選項頁了 ( 圖五 )。 由于現在尚未安裝任何擴展 , 所以當前列表是空的 , 讓我們在添加了擴展之后再回來看看發生了什么變化。

注冊 Apple ID 并獲取 Safari 擴展開發的簽名證書

接下來的工作是 , 作為一個 Safari 擴展的開發者 , 你需要去 Apple 的網站上注冊一個免費的 Apple ID (http://developer.apple.com/programs/safari/), 此處步驟省略 , 請跟隨 Apple 注冊向導逐步完成即可 . 接著使用這個 Apple ID 登錄 Safari 開發者網站 , 創建一個開發中要使用的簽名證書 (https://developer.apple.com/safari/certificates /index.action), 選擇左邊標簽頁的第二個標簽 (Request Certificates)

需要注意的是 , 在 Windows 和 Mac 上面的申請證書步驟略有不同，本文中將以 Mac 環境為例 , Windows 環境中的步驟請跟隨網站上的申請向導逐步完成即可。

在所用的開發機上安裝簽名證書

同樣需要注意的是 , 在 Windows 和 Mac 上的簽名證書步驟也略有不同。 在 Windows 環境下直接點擊生成的證書文件 , 系統即可自動安裝好此證書。 而 Mac 環境下簽名證書的步驟是個向導過程 , 本文寫作時 , 在選擇證書安裝分類時 , 在 Mac 下應選擇”登錄”而不是”系統”分類。 而在 Windows 環境下有時候 Safari 不能正常識別出安裝好的簽名證書 , 請參看官方網站的相關指引做相應的修改。

 

如何制作 Safari 擴展

好了 , 通過上面兩部分的介紹 , 相信您已經對 Safari 擴展有了個大致的了解 , 也為此準備好了開發環境。 在動手編寫第一個擴展前 , 讓我們先來了解一下 Safari 擴展的框架結構及相應開發工具吧。

Safari 擴展框架結構

我們知道 , 在 Safari 擴展中 , 我們可以如下幾個部分來提供擴展功能 :

工具欄按鈕

擴展工具條

上下文關聯菜單

注入 (JavaScript) 腳本

注入樣式表單

而 Safari 擴展框架中其實是存在了一條分割線 , 將整個體系結構分為了兩個部分 :

Safari 應用層 : 包含工具條按鈕 , 擴展工具條 , 頁面標簽 , 頁面窗口 , 上下文菜單等

頁面內容層 : 包含修改頁面內容的 JavaScript 和 CSS

而這兩部分不能直接調用對方的代碼 , 需要通過給對方發送消息 , 再由對方的消息處理方法來調用所需的代碼。 當然 , 不是每一個 Safari 擴展都需要做這樣的消息調用 , 例如簡單的”關閉網頁”按鈕擴展就不需要和頁面內容層交互 , 也就不需要消息調用及代理等處理邏輯了。

Safari 擴展開發工具介紹

接下來我們來看一下 Apple 為我們提供的開發工具 , 不是 XCode 這樣的大家伙 , 也不是讓你從零開始完全手工編寫所有的代碼文件 , 部署腳本和打包程序。 Apple 在 Safari 5 里內嵌了一個叫做”擴展創建器”的工具來簡化開發 / 打包及部署步驟。 打開 Safari, 選擇”開發”菜單 , 再選擇”顯示擴展創建器”就能看到它了。

讓我們拿本文中下面即將提供的”CloseOtherTabs”這個示例來分析一下擴展創建器里面的內容 :

前面的三部分比較簡單，分別是

1) 擴展信息 : 包括此擴展的顯示名稱 , 作者 , 描述等

2) 擴展詳細信息 : 包含此擴展的唯一標識以及將來檢查升級時所需的清單文件

3) 擴展版本。

4) “擴展網站訪問”是用來控制此擴展可訪問哪些網址 , 可選的訪問級別有”無”, “部分”及”全部”三種 , 分別對應對所有網址均無權限 , 對指定的部分網址 ( 支持通配符 ) 具有權限 , 和對所有網址都有權限。

5) “擴展全局頁面” 這個頁面文件比較重要 , 全局頁面顧名思義是個掌控全局的頁面 , 但是它又比較特殊 , 位于 Safari 應用層而不是頁面內容層 , 而且此頁面不是用來顯示給終端用戶的。 如果你對 Safari 擴展中這兩個層還有所印象的話 , 應該記得這兩層是不能直接調用對方的 , 必須通過消息代理來間接調用。 那我們為什么要有這個全局頁面呢 ? 簡單的原因是這里面可以存儲一些公共的代碼從而避免多個代碼副本 , 而深一層的原因是將代碼放入全局頁面有利于提高用戶使用時的性能 ! 為什么會提升性能 ? 我們知道 , 在瀏覽器中我們可以開多個窗口 , 每個窗口又可以開多個標簽頁 , 每個標簽頁中才對應著你訪問的網站。 如果你將一些比較耗時的 JavaScript 代碼放入了工具條的擴展文件中 , 那么每開一個新窗口 , 這段代碼都要載入一次。 而如果你將耗時的 JavaScript 代碼放入了修改網頁內容的嵌入腳本中 , 那么每開一個標簽頁 , 這段代碼都會重新載入一次 , 無疑這將會極大的降低網頁載入速度。 而將這些 JavaScript 代碼放入全局頁面 , 那么它只會被載入一次 , 以后再開新窗口 / 新標簽頁 , 都無需重新載入。

6) “擴展 Chrome” 在這里你能夠創建你的工具欄 , 上下文關聯菜單 , 以及工具欄上的按鈕。 你可以隨時點擊”New Bar”或者”New Context Menu Item”來新增一個條目并填寫相應信息。

7) “加入的擴展內容” 這里包含的就是對”頁面內容層”進行擴展的相應文件 (JavaScript/CSS) 了 , 我們可以在這里遍歷頁面的 DOM 樹 , 修改其中的內容 , 改變頁面的布局等等。

8) “擴展設置” 最后的這部分就是你想此擴展里使用的一些參數 , 方便用戶進行個性化自定義。

那么，這么多的設置，擴展創建器最終將它們保存在了什么地方 ? 讓我們看看這個”CloseOtherTabs”擴展的文件結構

真的非常簡單 , 只有三個文件 :

1) global.html 包含當用戶點擊”關閉”按鈕時所需的 JavaScript 處理代碼

2) Info.plist 包含了上面擴展創建器中所有的參數設置

3) close.png 顯示在工具欄中的”關閉”圖標

實戰 Safari 擴展的開發 / 打包 / 安裝 / 發布

看到這里 , 也許你已經開始著急了 , 什么時候才開始開發我們的第一個 Safari 擴展啊 ! 別急 , 其實此時你已經具備了寫一個簡單 Safari 擴展所需的大部分知識。 讓我們動手實現它吧 !

首先 , 描述一下這個擴展所實現的功能 : 我們將提供一個位于工具欄中的”關閉其他”按鈕 , 用戶點擊了此按鈕后會關閉除當前頁面外的其他標簽頁。 當然 , Safari 瀏覽器其實已經提供了別的方式來完成這個功能 , 你可以按住”Alt”鍵 (Mac 上按”Option”鍵 ) 之后點擊當前標簽頁的”x”圖標也可關閉其他所有標簽頁。 在此 , 我們通過嘗試寫一個工具欄按鈕的 Safari 擴展來實現相同的功能從而達到練手的目的。

開發 CloseOtherTabs 擴展

首先是打開 Safari 中的擴展創建器 , 點擊左下角的”+”按鈕并選擇”新建擴展”, 然后在彈出的窗口中為新擴展選擇一個保存目錄。 在這里我們把它命名為”CloseOtherTabs”, 點擊保存。 你將會發現在上一步選擇的保存目錄中新創建了一個叫”CloseOtherTabs.safariextension”的文件夾 , 里面只包含有一個含有基本信息的 Info.plist 文件 , 這里先暫且把它放在一邊 , 等我們完成其他文件之后再來完善它。

接著是為這個擴展提供一個工具欄按鈕圖標 , 在此我們為它提供一個 11*11 像素的 png 文件 , 并將它保存在”CloseOtherTabs.safariextension”文件夾中。

最后 , 此擴展的重頭戲來了 , 我們需要為它寫一個全局頁面 ( 為什么是全局頁面而不是工具欄頁面的原因前面已說明 , 這樣可以減少不必要的反復加載從而提高性能 ), 并在里面實現所需的功能。 主要代碼如下 :

// Register for the validate and command events.  
 safari.application.addEventListener("command", performCommand, false);  
 safari.application.addEventListener("validate", validateCommand, false);   
 function performCommand(event)  
 {  
    if (event.command != "close-other-tabs")  
        return;   
    // return if there are no more tabs to close  
    if (event.target.browserWindow.tabs.length < 2)  
        return;   
 
    // Close others tab except the current one in the target's window.  
    var myTabs = event.target.browserWindow.tabs;  
    var currentTab = event.target.browserWindow.activeTab;   
 
    for (var i = 0; i < myTabs.length; ++i) {  
        var tab = myTabs[i];   
 
        if (currentTab == tab){  
            //do nothing for current tab  
        }else{  
            tab.close();  
        }  
    }  
 }   
 function validateCommand(event)  
 {  
    if (event.command !== "close-other-tabs")  
        return;   
 
    // Disable the button if there are only 1 tab available.  
    eventevent.target.disabled = event.target.browserWindow.tabs.length < 2;  
 } 

小結：Apple 中Safari 實戰 擴展開發的內容介紹完了，希望本文對你有所幫助。

轉自 http://safarix.net/safari-extension-development-practice