Jetpack

Jetpack 真的很容易開發,大概描述一下他的特性:

  1. 使用純粹的 JavaScript。
    1. 會寫 JavaScript 的網頁設計師幾乎可以無痛轉移,也不需要寫如 Google Chrome Extension 一般的定義檔。
    2. 當然,只要 Firefox 原生的 JavaScript 支援到哪裡、 Jetpack 就支援到哪裡。 (例如 Selector API 及 Geolocation API、JSON API 等等,都已經可以用了。)
  2. 內建 jQuery,所以也可以利用 $("#doc").html("I'm here!") 這種方式來寫,大幅加快速度。
  3. 安裝後不必重新啟動

不用寫定義檔有好有壞,例如相對於 Google Chrome Extension 來說這個東西就沒辦法內嵌什麼 metadata 供其他第三方程式使用,但門檻的確又比「要寫」更低了。

介面

如果要在瀏覽器介面上顯示些什麼,目前方法有這些:

  1. 顯示在狀態列
    • 這個要小心使用者隱藏狀態列的情形
  2. 顯示在 Jetpack Sidebar
  3. 自己用 HTML 在目前的網頁嵌一個畫面進去
    • 這個安全性多少會有點問題,建議不要這麼做
  4. 使用 Menu,新增選單內的項目 (Jetpack 0.6+)

底下的程式碼部份來自於 Jetpack API 範例頁

狀態列

jetpack.statusBar.append({
  html: '<img src="http://www.mozilla.org/favicon.ico">',
  width: 16,
  onReady: function(doc) {
    $(doc).find("img").click(function() {
      jetpack.notifications.show("hai2u");
      });
  }});
  • 本質上是一個 HTML IFRAME,嵌在 XUL 的一個 Block 裡
  • 裡面可以吃所有 HTML 可以吃的東西,但當然要注意一下尺寸問題
  • 介面有點醜,要花點力氣用 CSS 好好調一下才會稍微好看點。
  • 這個 iframe 裡沒辦法跑 JavaScript alert 這類的東西,但可以故意存取目前所在的網頁、然後丟個程式片段進去跑來呼叫 alert (類似 Greasemonkey)
  • 在上面點右鍵不會產生 event,不過 Jetpack 0.6 起好像可以用 menu 來指定快捷選單項目。 (就是,我還沒試過)

側邊欄

https://wiki.mozilla.org/Labs/Jetpack/JEP/16

jetpack.future.import("slideBar");

jetpack.slideBar.append({
    icon: "http://www.mozilla.org/favicon.ico",
    width: 250,
    onReady: function(slider){
        slider.notify();
    },
    onClick: function(slider){
        $(slider.contentDocument).find("p strong").html("Jetpack");
    },
    html: "<p><strong>the</strong> Sidebar!</p>"
});
  • 這跟 Firefox 原本的側邊欄是完全兩回事,行為也不同
  • 必須先以 jetpack.future.import("slideBar"); 來引入這項實驗中的功能。
  • 有趣的地方是,這個側邊欄可以叫用 notification,叫用後會讓你指定的測邊欄圖示左右搖擺來提醒使用者。
  • 側邊欄內部也是一個很大的 HTML IFRAME,可以吃所有 HTML 可以吃的東西,不過跟剛剛一樣點右鍵也沒有預設的行為。 (或許可以用 menu 來指定,還沒試過)

存取目前檢視的網頁

htmlDoc = jetpack.tabs.focused.contentDocument;
$(htmlDoc).find('body').append('<div style="position: absolute; bottom: 0; right: 0; width: 200px; height: 30px; border:1px solid black; background: white; text-align:center">HERE!</div>');
  • 就很像 Greasemonkey
  • 如果要存取的話,要用 tab 物件下的 contentDocument 來取得該分頁網頁的 document 物件
  • tabs 集合物件的 focused 屬性會傳回「目前分頁」的 tab 物件,就是使用者在看的這一頁啦
  • 這個方法插入的東西有可能被網頁設計師也寫 JavaScript 偵測並取得,要小心
  • 如果要存取目前分頁文件中的 window 屬性,使用 jetpack.tabs.focused.contentWindow

零碎的有趣事情

  1. Jetpack 目前可以儲存資訊 (Jetpack.storage.simple)、跳出土司提示使用者 (jetpack.notification)、存取系統剪貼簿等等。 不過有的東西目前仍在實驗中,需要用 jetpack.future.import 叫進來用。
  2. 為了可以叫用其他網域的 API,Jetpack 裡的 XMLHttpRequest() 是所有網頁、無論相同或不同網域都通行無阻的!
  3. Jetpack 的 API 目前十分零散,包括:
    • 基礎的 Jetpack API,請到 MDC 查閱
    • 有些需要 import 的功能目前仍以企劃書 (JEP, Jetpack Enhancement Proposal) 方式存在,功能可能還沒做完或什麼,這時就要到 JEP 那一頁去挖 API 文件來查。例如 Jetpack 0.6 的 Menu 就是這樣
    • 小 B 表示:看原始碼最齊全啦 (炸飛~)
  4. 安裝完 Jetpack 後就可以在 about:jetpack 的 Develop 一頁中開始試著寫些玩意,算是可以即寫即檢查的架構,別忘了善用 console.log("message") 將訊息記到 Firefox 的錯誤主控台, debug 會蠻有用。
  5. 相對於無痛的轉移過程,debug 方式就痛死了,除錯誤主控台外完全沒啥工具可以用,還好 Firefox 的錯誤主控台還不錯…
Creative Commons License
本站文字除特別聲明者外,係採創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權,利用前請見說明