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.

https://dev.to/blarzhernandez/why-you-should-learn-javascript-principles-first-not-the-hottest-frameworks-kb9

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>

app.js

 

  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;

chrome.storage.sync.set({"mapper":$rootScope.mappers}, function(){

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

});


 

background.js

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

chrome.omnibox.onInputEntered.addListener(

function(text) {

vardata= {};

chrome.storage.sync.get("mapper",function(keys){

......

chrome.tabs.query({
.............
}}

 

Here is the link for the app: https://chrome.google.com/webstore/detail/short-cut-for-url-mapper/lafchflokhmpcoaondfeffplkdnoaelh