[Javascript] Some good/bad parts learned from Chrome Extension

Image Credit

Just update my FBBK from version 1.0 to 1.2.1 and think there are some nice features/designs to be noted about Chrome extension.

  1. chrome.storage API

    When using manifest 1, we have to set up a background page  as middleware to communicate between content scripts and localStorage ( used to store users’ selected options ) because the localStorage used in content scripts will be referred to the page localStorage instead of extension localStorage.In this way, developers have to make build up a fake background page to transfer data. But this problem has been solved by chrome.storage API. With this API, we can easily set/get data for content scripts without the help of background page.Better than that, this API can also synchronize data from local to the cloud to solve problems when users using different computers. The most awesome part is that the API would automatically fallback to store data in local if the internet connection breaks !
  2. chrome.i18n API

    It is really important to i18n your extensions/apps if you want to reach the global market ( users ). For FBBK 1.2.0+, I just implemented two locales ( en / zh ). I really like the design that Chrome can automatically detect the right locale to be used  and even falls back to default locale.This API is really smart enough for basic projects but can’t meet more complicated needs. Take FBBK for example, There are many models with i18n needs ( to describe models’ usage, intro … blah ). Because Chrome doesn’t support a good way for me to get the current locale ( can use predefined variable like @@ui_locale in CSS but not in JS  ) , I have to proxy the models descriptions to  use chrome.i18n.getMessage() to get the right locale and match the right message.json ( see the above figure ).

    This is how I do in FBBK :

    https://gist.github.com/4259985.js?file=gistfile1.js

    If you have better ideas to extract models with i18n json, plz comment to let me know !

That’s it ! Have fun on developing chrome extension 😉

[Javascript] Facebook Blocker (FBBK) Still Rocks On

Check : FBBK 的主介紹頁

改變

也許有點老梗,但是最近因為情緒低落,想要參考學徒模式的作法,回到自己的舒適圈,試著找回一些原本稱之為熱情的東西。

其實也是這麼的剛好,因為 Chrome 在版本號 >= 18 後會逐漸遺棄 Manifest V1 的部份實作,提供了更多方便好用的 API 在 Manifest V2(例如說 Content-Script 在 Manifest V1 時,存取 LocalStorage 的限制需要透過 background page 的幫助),其實我覺得是種陰謀啦,畢竟 Extensions 就和 Apps 多如牛毛,所以透過這種手段還可以順便幹掉那些沒在更新的 Extensions … XD

以下是從  Google 那邊擷取的時程說明:

  1. 2013 Q1

    • The Web Store will remove manifest version 1 items from the wall, search results, and category pages.
    • Notice emails will be sent to all developers with manifest version 1 items still in the store reminding them that these items will be unpublished and providing update instructions.
  2. 2013 Q2

    • The Web Store will unpublish all manifest version 1 items.
    • Final notice emails will be sent to developers with manifest version 1 items still in the Web Store.
    • Chrome will continue to load and run installed manifest version 1 items.
  3. 2013 Q3

    • Chrome will stop loading or running manifest version 1 items.

動機

除此之外,還差一些讓我捲起袖子實作的動機 … 想著想著,我就想到我在使用 Facebook 長久以來的困擾,那就是這個:

沒錯,就是那個該死的「Seen」,這個 Feature 真的是我最痛恨的一點,有的時候就是想假裝沒有看到某個人的留言,但是 Facebook 卻會在特定的情況下 Trigger 「讓別人知道你已經看過留言的事件」,這種行為我真的沒辦法接受 … 隱私這種東西在這個設計之下幾乎是蕩然無存呀!

所以我就參考了一些文章還有 Chrome Extension Request 的機制,為 FBBK 加上全新的 Unseen Feature,可以參考選項設定的擷圖:

結果

經過幾位好友的友情測試之後,Unseen 運作的非常良好,終於可以(和別人站在不同的起跑點了) 在聊天的時候暫時找回那一點點曾經屬於自己的隱私了 xD。

以上就是這一次 FBBK 的更新,歡迎大家提供 feedback !

 

立馬安裝 Facebook Blocker – FBBK Chrome Extension

Updated on 2012/08/11,目前審核通過!

P.S. 其實這一篇是 2012/08/07 的時候就寫好了… 但是因為 Chrome Extension 在做版本更新的時候出了一點問題,所以這個版本的更新要等待工人智慧審核通過之後才會發佈,囧。

原本是想要等更新通過再發這一篇文章的啦,但是因為不知道要等多久(可靠消息指出會到兩三天),所以就先放出這個消息來啦!過幾天會把 FBBK 的更新消息統一到一個 Page ,這樣相關的資訊就可以在那邊一目了然啦!

Thanks All ~ FBBK Still Rocks on !

[Javascript] NCKU-GPA calculator

Image Credit

前幾天有個朋友在社團提出了一個有趣的問題:

成大現在成績查詢那邊都沒有GPA的自動計算。要不要來簡單做一個,然後賣回給成大~~~

因為那個時候剛好自己也無聊沒什麼事,又想說很久沒有寫 Chrome Extension 了,就把以前做 FBBK 的東西翻了出來做了些調整,改採 PageAction 的方式去寫這個 Extension,主要的功能就是可以自動幫你把百分制的成績自動計算成 GPA。

NCKU-GPA calculator on Chrome Web Store: Here

不過,原本想說只是快速 Hack 一個 alpha 版本拿來自己用爽就好了,結果誰知道卻遇上了一些問題,多是我以前沒有遇過的有趣問題,所以特別想要在這邊記錄一下。

BTW, Checkout the repository first :]

git checkout git://github.com/EragonJ/NCKU-GPA-calculator.git

Problem – Encoding conflicts

我從來沒有想過我在這個世界還會遇到 big5 編碼的網頁,Well,成功大學的成績查詢網頁就是用 big5 編碼的,除此之外,透過 Inspector 的觀察之後,發現它的頁面是透過 POST 的方式,判斷 Client 回傳的 submit1 值來決定是要 Render 哪一個上/下學期的成績資訊。

但是,問題就在這邊,如果觀察它的 submit1 值,從 Inspector 上會看到unable to decode value。舉兩個實際的例子,如果是「0096上」,則它編碼後的結果是「0096%A4W」,如果是「0096下」,則它編碼後的結果會是「0096%A4U」。

問題來了,如果透過 $.ajax 來傳「0096上」這個值回去的話,會發現它編碼後的結果不會是「0096%A4W」,結果我去查了一下 $.ajax的原始碼後,發現它會呼叫 javascript 內的 encodeURIComponent 來做編碼的動作,所以不管如何,單純把值丟入 $.ajax 是一定不會得到期望的結果!

所以…需要在 $.ajax 的 options 做一些調整,那就是設定 processData 這個屬性,這樣不管我們傳什麼值給他,他都不會幫我們再其它額外的動作(例如 encodeURIComponent ),直接把值傳過去。因此,既然我們可以透過這個設定做到我們想要的效果,就要先把「上」、「下」這兩個字做 Replace 的動作,再傳入設定過的 $.ajax 直接把值傳過去,就可以解決這個問題了。

Well,比較值得記錄的就是這個部分。

有點累了,有沒有收假前一晚還在熬夜寫 Blog 的八卦…改天再回來修文字還有補充資訊,先睡了。

[Watch] What happened after publishing Facebook Blocker extension ?

Check : FBBK 的主介紹頁

這篇文章主要是要為我當初發佈 Facebook Blocker 做一個記錄,而其中我也觀察到了一些有趣的現象與數據,請大家待我娓娓道來。

一開始我們先看一下流量的部分,如果扣除掉前幾天的上線測試,可以發現在發佈後約 20 天其流量就有顯著的成長,而單日最高的造訪人次則發生在 4/4 號為 313 人。有趣的地方是在於「直接流量」佔了 96.67 % (=3524 人次的造訪)、「推薦連結的流量」只佔了 2.23 %(=71 人次的造訪)而那「搜尋引擎的流量」只有 0.80 %。所以除非你的 extension 是殺手等級的,要不然其實「推薦」及「搜尋引擎」所帶來的流量其實相當微小,像我還有 2 % 的流量是因為學姐在 Facebook 上轉貼所致的。

而絕對不重覆訪客的則是 719 人,平均一天有 24 個人使用 / 得知這個 extension。這其實是有原因的,因為外掛的同質性很高,在 Chrome extensions 上可以發現與 Facebook / Blocker 之類有關的外掛非常多,所以像我們這些後輩其實發展的空間就很有限。不過我覺得我的外掛在一個月之內從無到有還能有這樣的市場主要是因為具有差異性,雖然沒有主流 blocker 這麼的 powerful,但是就是因為小巧且能做到他們做不到的事情(Regex + keyword matching + block groups / your own / friends’ walls),所以才會一直有所成長。

那因為這個本身就是 Chrome extension,所以 95.18 %(=3459 人次) 是 Chrome 用戶、 0.55 %(=10 人次)則是 Rockmelt 用戶,其他的就不知道是怎麼連進來的了=_=,更難以置信的就是 IE 還有 3.88 %(=141 人次)。所以這邊可以發現,來看這個 Chrome 外掛介紹的使用者第二多的就是 IE 用戶,所以 IE 的用戶真的是「很多」,非常的多,多到你無法想像,所以做 Web 的雖然討厭 IE series … 但是使用者是無知的,為了這廣大的市場,也只能下海去了。

接下來有個很值得探討的就是使用者的分佈,我想主要的原因是因為我是台灣人,而且該外掛的資訊曾在 Facebook 傳遞了一下子,再加上外掛介紹有配上中文,所以用戶第一多是從台灣(=664 人次)來的應該是可以接受,但是有趣的地方不是在這邊,是在除了台灣以外的使用者,因為有關 Facebook Blocker 的介紹真的是少之又少,能夠得知這個外掛的方法就只能透過 Chrome Extensions 的平台,儘管如此,2 ~ 8 名的國家分別是泰國(=551 人次)、丹麥(=380 人次)、波蘭(=296 人次)、美國(=279 人次)、德國(=200 人次)、義大利(=146 人次)及埃及(=108 人次),其實這裡我只有做一個小小的動作,那就是國際化,整個外掛的主要語言設定是用「英文」,而外掛介紹也是先用「英文」再用「中文」。所以就算是英文不好的開發者,在介紹自己產品的時候就算逼不得已 Google Translator 也是要給他用下去,即使文法或是單字意思不太對。因為這對於以英文為母語或是第二外語的使用者來說,他們會覺得非常親切甚至是試用你的產品。英文真的是你傳播資訊最好的媒介,如果當初我沒有做這個決定,那現在這個外掛大概也就只能停留在小小的台灣了。

所以,

  1. 不要忽略你的蠢主意,因為你不知道你的一個小小的想法,會因此為你帶來多大影響。
  2. Release Early、 Release Often,比起已經搶佔市場的先行者來說,你能做的只有提早釋出你的想法並與以實作,然後持續與使用者互動並以他們的意見及建議來更新版本,讓他們認為參與其中並對這個專案有所貢獻,以建立第一批的擁護者。
  3. i18n(Internationalization、國際化),這邊的國際化其實是指想法上的國際化,因為如果一個專案只是單純的中翻英或是引入多國語系只能說是國際化的一個手段而已,我想表達的是在你在構思產品或專案時候,要想的寬廣一點,不要只是限制在自己所居住的區域或是先預設了使用者的立場,這樣子不僅會縮減你可能的市場也跟不上這個世界的腳步,導致最後的失敗。以我的 Facebook Blocker 為例,我的目標就是 Facebook 上面的使用者,但是使用者使用的語言很不一致,所以除了以英文為主軸來介紹這個 Extension 之外,整個外掛不會讓使用者因為先天上語言的差異而無法使用,這是因為一開始整個 Extension 就設計的非常簡單,用簡單的色塊及小圖示來提示使用者整個操作的流程,如此而已。
  4. Web,它是一個很棒的戰場,就算是個人也能夠站在 Web 上與全世界競爭,也是一個很適合曝光自己的平台,所以無論如何,Please be involved。

以上就是我把從這次製作 Extension 所得到的一些數據及觀察到的現象做一個總結,希望能對有心要寫 Extension 的人會有一些幫助。

[JS] Facebook Blocker

Check : FBBK 的主介紹頁

應該有很多人像我一樣已經厭倦了 Facebook 上面一堆無聊的心理測驗或是騙人氣的按讚論壇,所以身為 Chrome 的愛好者及 Javascript 的初心者,我就為 Chrome 寫了一個小小的擴充功能,名為「Facebook Blocker」。

Facebook Blocker 可以讓你設定自己的「樣式」,然後它會自動在你下次進入 Facebook 的時候讀取樣式並分析當下的頁面,凡是符合該「樣式」的訊息就會自動被隱藏起來,讓你以後再也不用看到那些惱人的廣告。

其實如果你上 Chrome Extensions 看的話,已經有很多名為 「Facebook Blocker」的 Extension 了,但是經過一陣搜尋之後,發現那些 Extension 大多和我想要做的事情都不太一樣,不是太過痴肥要不然就是功能不同,讓我久久不能自己。

所以經過幾天的研究之後,已經寫好了 Facebook Blocker 的雛型了,而且基本的 Hot Key 也在剛剛 1.0.2 版的時候新增上去了。心中還有很多有趣的功能還沒實作,雖然 UI 也有點難看,不過至少在使用上沒有太大的問題,總要留些東西放在後面更新,才不會有人說我在打混(好的不學都在學這個 …)

如果有什麼想要增加的功能或是意見都可以留言給我(在這或是在 Extension 的頁面都可以),我會一一回覆的。

Enjoy blocking 😉

δ Facebook Blocker 在 Chrome Extension 上的載點與步設定步驟的教學圖