Porting JetQRCode from Jetpack to Google Chrome

(將 Jetpack 套件移植到 Google Chrome — JetQRCode 篇, 點我直接看中文版)

As you may know, Google Chrome browser announced their extension gallery a few days ago. The Google Technology User Group in Taipei hosted a Chrome Hackathon today, I was there and did something insteresting: porting extension between Google Chrome and Jetpack. MozTW is all for "open" (standards, source…) and not for a single product, at least that's the way I doing things.

So here it is, JetQRCode for Google Chrome 0.4, a demo about porting Mozilla Labs Jetpack scripts to Google Chrome.

I've learned a few about the difference between the two:

1. You have to break everything in Jetpack script, which is in a single file, to several parts, like manifest.json, content_script.js / background.html, options.html, to make things work in Google Chrome.
2. Jetpack is highly related to jQuery. To make life easier, you may want to insert jQuery as content script.
3. HttpRequest to different domain is not allowed in content script, do it in background html, and pass the result to content if needed.
4. You have to create a HTML page for user to set preferences, and storage the values in LocalStorage. (But you can't get the setting values in content script, pass them from background html if needed.) Also, there's only one data type in LocalStorage: string. Be careful if you're trying to use boolean or integer in it.
5. There's no APIs for context menu in Google Chrome yet, you might need to do the same behaviors in different way.

IMO, since Jetpack is still in early stage, extension APIs in Google Chrome is more complete (though more complex) in many way than Jetpack. Porting things between the two framework is not as easy as I thought before, and need creativity to conquer the difference.

If you are a not-so-good web developer like me, I think Jetpack is easiar to create extensions to solve problems in daily life. But anyway, creating an extension in either Google Chrome or Jetpack is much simpler then in Firefox (without Jetpack), which results more productivity.

(To correct my poor English, drop me a line with patches, thank you. :)

---

因為我懶得把一樣的話重寫一次了，所以這篇的中英文版大概只有重點一樣、內文會差很多 XD

我原先以為讓 Jetpack 與 Google Chrome 互通套件不算很難，但今天參加 Taipei GTUG 的 Google Chrome Hackathon 時實作一下稍稍有點改觀 —— 的確不難，但是有些東西是比想像中麻煩些。所幸最後仍有斬獲，所以各位親愛的 Google Chrome 使用者、這裡是 JetQRCode for Google Chrome！

拜雙方都遵循網頁標準所賜，其實原理跟很大一部份的程式碼依然相同 (是說我大多都用 jQuery 就是了… 懶惰鬼！)。有些經驗我想還是蠻值得跟大家分享一下，但中文版我想首先講結論：結論是…

1. Jetpack 真的比較好寫 (XD)，對於像我這種沒有很精的人來說可以輕鬆愉快地達到效果，相對來說 Google Chrome extension 就要考慮比較多架構上的問題 —— 或許是因為得拆成數個檔案吧？有些事情要在哪裡做，得先就權限等問題考量一下。
2. 無論你喜歡哪個，兩個都比原來 Firefox 的套件實作方式輕鬆許多，當然也大勝 Internet Explorer。 (Opera 跟 Safari 沒研究)

好，那麼柏強在這次的遊戲中學到什麼呢？

1. Google Chrome 的套件，要完成一件事情就算程式碼再簡單也會需要兩個以上的檔案，例如 manifest.json、content_script.js / background.html、options.html 啥的，所以單一檔案的 Jetpack 要移植過去就要好好想一下該怎麼拆程式。
2. Jetpack 內建 jQuery，很多事情也跟 jQuery 息息相關，所以移植到 Chrome 時、方便起見先把 jQuery 塞進 content script 比較好。
3. 在 Google Chrome 的 content script 裡不能做跨網域 HttpRequest，不過background html 沒問題，所以如果需要的話就在背景做、然後把資訊傳到內容去。
4. 兩者設計哲學中大不同的地方之一是偏好設定，在 Google Chrome 裡你必須自己寫整個 Option 頁面，也要自己把設定值存進 LocalStorage —— 相對自由當然也相對麻煩 (而且從 content page 裡目前還沒辦法直接拿設定值喔！記得從 background html 裡傳。) 這邊我撞到的其中一堵牆是對 LocalStorage 不熟，不知道它什麼都是用字串存，如果要用布林值還是數字的麻煩注意一下。
5. 目前 Google Chrome 裡還沒有調整快捷選單的 API，所以有些效果可能要重新想想使用者可以運用的方法。

以上心得供大家參考，也希望網頁設計師們都可以來玩玩看這兩種比較簡單的套件寫作方式，發揮創意製作出一些好玩的套件。日後有機會再來試試把 Google Chrome 的套件移植回 Jetpack…

JetQRCode: create QRCode with content on web page

Another Jetpack extension :)

JetQRCode is a Jetpack extension which can generate QRCode. With JetQRCode, you can easily get QRCode of…

• (shortened) URL of current tab
• selected text

And you can choose…

• the output encoding of the QRCode
• the image size, from 150px to 500px

Install JetQRCode from Jetpack Gallery. If you don't have Jetpack in your Firefox, Jetpack Gallery will install it first.

For more information on JetQRCode, please check the project page on http://www.bobchao.net/jetqrcode

---

又見 Jetpack 套件… 我真的愛上它了！JetQRCode 是可以拿來製作 QRCode 的 Jetpack 套件… 不知道 QRCode 是啥？蘋果動新聞全靠它啦！有了 JetQRCode，你可以：

• 製作目前網頁網址的 QRCode
• 製作選取文字的 QRCode

接著拿出支援 QRCode 解碼的手機一掃，資訊就跑到手機上囉~

你可以到 Jetpack Gallery 安裝 JetQRCode，關於這個套件的使用方法、未來規劃等等的事項則請參閱 http://www.bobchao.net/jetqrcode。

明年 Jetpack API 完整一點再來辦開發熱鬥會 :) 現在如果你有興趣討論的話，可以參加每週一晚間在生態綠咖啡的 MozTW Lab 台北場，我、小 B、Bryan 都有玩 Jetpack。

MozCC 在 Jetpack 裡重生：JetCC

在弄 ccZotero 時，網頁裡後設資料皆經由 ccMetaView (MozCC 的一部份) 擷取而來。ccMetaView 的目標是要能夠抓到各式相關的後設資料格式 (而不論是否與 CC 相關)，這是好事，不過如果就真的只想抓 CC 的後設資料、是否有跟 MozCC 1.0 一樣的簡單套件呢？又，Firefox 的 API 隨著版本演進而變，而就 CC 總部投注在 MozCC 上的資源，顯然不足以隨著版本變動而更新，是否有更能快速修改的東西呢？

之前提過，我最近花比較多時間玩 Jetpack，所以在想到這些後，就把腦筋動到 Jetpack 上。這種單純的架構果然是實作簡單套件的最佳方式，只花了一點點時間、就把這個 Jetpack feature: JetCC 做出來了。

安裝 JetCC 之後，在狀態列上會顯示目前網頁的授權方式，點選之後則會帶你前往授權條款的說明頁面。其實一切就與 MozCC 1.0 差不多，這也是我覺得比較「輕量」的方式。

拜 HTML 5 Selector API 所賜 (在此以 jQuery 處理)，要找到網頁中有沒有「授權條款」相關資訊，只需要簡單一行：

$(doc).find("a[rel~='license']");

接著再取得該元素中的 href 屬性 (也就是授權條款網址)，即可得知該文件採用什麼授權條款，然後顯示相應圖片即可、輕鬆愉快。

在這個小套件裡有幾件事情值得與大家分享：

1. CC Metadata 格式

從古到今，就我所知有三種在網頁裡嵌入 CC 授權資訊的方法，分別是放在註解裡的 RDF、microformat、以及目前的 ccREL 規格。後兩者都可以用剛剛那樣擷取 rel="license" 的方法來察知，不過對 JavaScript 來說、放在註解裡的東西還真是苦手。實作上還是可以分析網頁後自己寫簡要 RDF parser、不過我懶了…

除了註解中的 RDF 之外，XML 中的 RDF 也是個問題。按理說我不需要管到 XML 的部份、但因為 Firefox 的構成介面：XUL 也是種 XML，所以利用 XUL 做的「網頁」 (例如高橋流 XUL) 也可以由 Firefox 開啟，這麼一來支援一下就是理所當然的事情了。不過同上，目前懶得做，願意幫忙的大德快來吧 XD

2. 產生 referer

點選狀態列的 CC 圖示會帶你到該授權條款的說明網頁。其實 CC 的授權條款說明頁面會自動偵測來源網頁是否有其他 ccREL 的資訊 (例如 morePermission、姓名標示資訊等)，並且顯示出來。因此，如果在這邊單純用 jetpack.tabs.open() 來開啟授權條款說明頁的話，在 HTTP request 內並不會送出 referer，那說明網頁也就無法找到來源網頁上的其他資訊。

只要能送出 referer 就能解決此問題，不過 Jetpack 的 API 目前還沒有提供修改 HTTP Request 內容的方法，所以只能靠其他旁門左道來處理了。在你點選狀態列的 JetCC 圖示時，我們偷偷在目前頁面上插入一個按鈕，設定按下後前往授權條款網頁，再用程式模擬按下動作。這樣就暫時繞過了 referer 的問題。

嚴格說來，這個套件的作用相當有限，但有鑑於 Jetpack 這種方式是未來瀏覽器擴充套件架構必走的道路，當成試作品亦有他的價值。程式碼本身相當簡單，我直接宣告進入 Public Domain 了，歡迎大家隨意使用，如果有興趣改成 Google Chrome 可以安裝的擴充套件也不錯 (應該也相當簡單)。

JetWave 0.2 with waves list in your sidebar.

I just add a feature to JetWave which can show your inbox in Jetpack sidebar. Check the screenshot below:

Also, you can install JetWave from the new Jetpack Gallery, which is still in the alpha stage but usable. Remember to check the "Let me install this unreviewed Jetpack" near the install button.

---

我為 JetWave 新增了在側邊欄內讀取 Wave 清單的功能 (見上圖)，另外也把 JetWave 丟到 Mozilla 實驗中的 Jetpack Gallery 裡了。如果您要從那邊安裝的話，記得先勾選「Install Jetpack」上方的「Let me install this unreviewed Jetpack」。

JetWave, JetPack feature for Google Wave

JetWave is a JetPack "feature" for Firefox. Just like Gmail-notifier extensions, JetWave can help you to check your inbox in Google Wave.

For install and usage information, please check the JetWave page.

我最近花蠻多時間玩 JetPack 的。雖然上官覺得 JavaScript 其實不簡單，不過我自己來講、「簡單」代表的是肉腳如我也可以隨便寫出點東西來，我們這種人是不會要求自己太多、或者要把什麼東西寫得太好太複雜的 ;) JetPack (及 Google Chrome 的擴充套件架構) 就蠻適合我們這些平常只碰網頁設計、會點 JavaScript 的人。

JetWave 是簡單的 Google Wave 檢查套件，安裝後會在狀態列上顯示收件匣內的新訊息數目，點擊後則可前往 Google Wave 查看新訊息。除此之外，我也蠻建議會點 JavaScript 的人看一下程式碼 —— 我並不專精於程式設計，但相信看了後可以大概了解用 JetPack 快速寫個符合需求套件 (或說「feature」) 的方法。

安裝或其他資訊，請往此處去。

我接下來想做中職戰況快速檢視的東西，不過今天晚上我要去ㄆㄘㄉ了 :P 所以就跟預定的 JetCPBL 套件說聲明年三月見囉~