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。

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 套件說聲明年三月見囉~

Bring CC data to Zotero

Zotero is a Firefox extension which plays the role of EndNote; it helps you to manage the resources you collected from the web, like research papers or articles. Though there's a "Rights" field for copyright / license metadata, it seems that Zotero cannot recognize CC license data.

Zotero supports COinS, but doesn't save "rft.rights" values from OpenURL (I don't know why.) That means you have to enter every rights information by yourself, or you might have copyright issues when you wanna reuse the data.

Luckily we have MozCC, an extension to recognize hidden metadata in the web page. By the following way, we can make another extension to bring the power of MozCC to Zotero. It actually pretty simple, but I do spend way too much time coding to address these issues:

1. After 2.4, MozCC is broken into two extension: One for recognize metadata in web page, and another for UI display. Since the separation is still at the early stage of development, I often feel lost when I read the code. :( Well I'm not a good programmer, I knew it from the very beginning.
2. COinS is totally new for me, and there's only a few example for "rft.rights" on the Internet. This is pretty strange but it's true. Do a search and you'll see. I have to decide if it is the good place to save license data and, if true, in which format. Since I want to solve the multi-licenses issue (see below) in the next step, I save only the license URL at this point. 
3. When there are two (or more) license statements on one page, how do you know which license to follow? Sometimes it means the page is dual-licensed (like Wikipedia, license under both GFDL and CC BY-SA,) but sometimes it means different licenses for different parts on the same page. This could be a problem, and even MozCC doesn't solve this.
4. Bob is too lazy.

Anyway, I made a simple extension (or, "plugin for Zotero") to try out the possibility. If you wanna give it a try, or even help me to improve it, you can get it from my website.

Remember you have to install MozCC and Zotero first. You can use Zotero 1.x or 2.x beta, and for MozCC, please install the newest version IN THE SANDBOX (2.4.9+) from the Firefox Addons site.

Patches and feedback are welcomed, just leave me a message :)

---

練習寫英文的分隔線 (喔對了歡迎幫我改作文 orz 請寄信給我)

---

Zotero 是個 Firefox 的擴充套件，可以用來管理網路文件與你擷取的其他資料，跟 EndNote 的作用非常相近、都是比較偏向學術文件管理的用途。我家老闆希望有個可以管理網路 CC 資源的軟體，這當然是非常棒的東西，但可惜他雖有「授權」欄位、卻認不得 CC 的資料。

我查了一下他支援的 COinS 格式，此格式將 OpenURL 嵌入網頁，規格裡也有 rft.rights 這個欄位，不過 Zotero 不吃… 所以我把腦筋動到 MozCC、一個可以辨識網頁上 CC 資訊的套件上。理論上，可以寫個小程式，讓 Zotero 在儲存資料時「順手」將 MozCC 辨識出來的資訊帶到 相對應的欄位裡，完成任務。

程式其實很簡單… 不過我花的時間好像比較多在查資料，包括：

1. MozCC 2.4.9 開始真的把這套件拆成兩個部份了，一個用來辨識、一個用來顯示。這很棒，也是正確方向，不過目前分割得不是很乾淨，我看程式碼時常迷路 orz 我真的很遜。
2. COinS 跟 OpenURL 對我來說是新東西，其實我不太敢確認  rft.rights「可以」拿來存授權資料；目前反正是心一橫就上了，而且我有看到有人的使用方式跟我相近。另外，要儲存什麼資訊呢？我一開始有想過像 MP3 的授權欄位一樣，儲存「本文章採用創用CC姓名標示條款授權，請見 {網址}」這類的東西，不過考量到我想解決多重授權(看下一條)等問題，所以目前先單純儲存授權條款網址再說。
3. 網頁上如果出現兩個(以上)的授權聲明，怎麼辨識儲存下來的部份該遵從哪一個條款？是平行授權、還是針對網頁的不同部份授予不同權利呢？這真的有難，MozCC 也沒解決這問題，不過我想試試看有沒有什麼好方法可以處理，以後再說。
4. 我好懶。現在每天看棒球轉播是我唯一的嗜好。

總之總之，我還是做了一個小套件。先裝 Zotero 跟 MozCC 2.4.9+ 再裝這個套件，那麼儲存網頁時如果 MozCC 有偵測到 CC 授權資訊、Zotero 就會把授權條款資訊儲存在「權利」那個欄位內。有興趣的可以試試看，也超歡迎幫忙修改、一起討論的。

我覺得寫得簡單又爛，其實很掙扎要不要丟出來 orz 不過考量到其實我好像沒在怕別人知道我多遜，就丟吧 XD 有興趣幫改或提意見的，請直接留言囉。

Native Personas in Firefox 3.6

Information and code example are mainly come from Dao's article.

Light-wight theme (aka. native Personas) has landed on trunk. If you are using a recent nightly build of Firefox, just click the image below and press "Allow" on information bar shows up.

Any site can provide themes for visitors, please check the source code in this blog post. If you wanna preview the theme just like what you can with Personas, you have to add the site's URL in Allowed Sites list (the Exceptions… button in Preference > Security,) which is "blog.bobchao.net" in this case.

So how to uninstall the installed themes? Just like what you did from Firefox 1.0, check the Theme Manager in Tools > Add-ons.

---

練習寫英文的分隔線

---

Firefox 3.6 最新的 Trunk 已經把原生的「輕量佈景主題」功能 (就是 Personas 啦) 加進去了，如果你剛巧就在使用最近的 nightly，點選下面這張圖片、然後按下訊息列的「允許」試試。

任何網站都可以提供佈景主題給人裝 (設計師福音啊)，程式碼也簡單到炸開、看這篇文的原始碼就行。為了安全起見，如果你也想跟在 getpersonas 一樣、擁有預覽佈景的功能，那得先把該網站加入允許網站清單中 (偏好設定 > 安全 裡的「例外網站」給他按下去)。例如你把 blog.bobchao.net 加進去，就可以看到我以後提供的佈景預覽… 所以快加吧 XD

那裝了的佈景怎麼刪掉？就去「工具 > 附加元件」裡的佈景主題刪囉。(BTW，我順手測試一下：用 Zotero 儲存這篇網誌應該可以嵌入 CC 資訊，但不是正規的 ccREL)