commonJS vs ES Module

for nodeJS, the server side is by default using commonJS for moduling.

//export data data.js
exports.staffs = [{
   name: "Bush",
   id: 1,
   name: "Forest",
   id: 2

//default export from module, default.js
module.exports = {name: "Gump"};

//then corresponding import
const { staffs, .... } = require('./data')
const anything = require('./default')

while client side is using ES modules:

export const log = winston.createLogger({....});

import log from './logging/logger';

JS Frameworks

This crazy race has no winner at all since it is neverending. That’s it! Yesterday you were learning Backbone.js, jQuery, Knockout.js, Ember.js, then AngularJS and now ReactJS, Next.js, Vue.js, all Angular flavors. Today, up comes Ext JS and Aurelia, the new ones. And tomorrow another will come up. The framework array list is endless.

Chrome App with AnguarJS & JQuery

There are mainly 3 parts to build an chrome app:

Static Page

  1. popup.html, would be the popup view when you click on the icon of the app/plugin

here you define the view, and the binding to the controller/service functions

<div ng-controller="shortCutController" ng-model="option" class={...}

<button id="configure" class="btn btn-info" ng-click="option = !option; initMap()">{{ option ? "Hide": "Show"}} Configure</button>



  1. which is the place to put your controller/services:
app.controller( 'shortCutController', ['$scope', '$rootScope', 'mapStore', function( $scope, $rootScope,mapStore ) {
I am using chrome storage, so did a sync on each update
$scope.update=function(key, value) {//update the storage

//mapStore.update(key, value);

$rootScope.mappers[key] =value;{"mapper":$rootScope.mappers}, function(){

console.log("check the updated mappers: "+$rootScope.mappers);




this is the place, for your plugin to listen to registered actions. for this case, it’s listening omnibox:


function(text) {

vardata= {};"mapper",function(keys){




Here is the link for the app: