It turns out quite easy to build a Chrome Extension. Basically the extension is a web application containing HTML, JS, images, etc. I tried to build a simple extension using VueJS recommended by colleagues.

There’s just 1 limitation that affected me: The eval JS function is disabled in Chrome Extensions for security reasons. That means there will be no dynamic templates, but only pre-compiled Vue components. Here’s the blog which explained in detail: https://dzone.com/articles/what-i-learned-about-vuejs-from-building-a-chrome

And this blog has very good instructions on how to start a Chrome Extension development with NPM and Vue:  https://blog.damirmiladinov.com/vuejs/building-chrome-extension-with-vue.html#.We7W8OBxW-Y

After all the steps in the above blog are done, I started working on the `app/scripts.babel/popup/Popup.vue` file and adding UI and functions in it while gulp watch is running to rebuild the project when any watched file has been changed. There was 1 issue where gulp can’t watch too many files so here’s the fix:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

🙂