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