[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 !

[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 上的載點與步設定步驟的教學圖