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

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s