chrome.storage.sync.get not returning value - Angular services

Question

I am creating chrome extension using angular & trying to use chrome.storage to set & get random generated id but at the time of "get" not getting that id, below is my code:

angular.module('chromeExtension')
.service('customService', ['$window', '$timeout', function ($window, $timeout) {
    this.getUniqueId = function() {
        return chrome.storage.sync.get('unique_app_id', function(data) {
            console.log(data.unique_app_id); // Here I am getting the id
            if(data.unique_app_id) {
                return data.unique_app_id;
            } else {
                uniqueId = Math.round((Math.pow(36, 20 + 1) - Math.random() * Math.pow(36, 20))).toString(36).slice(1);
                chrome.storage.sync.set({'unique_app_id': uniqueId});
                return uniqueId;
            }
        });
    }
}]);

So when I call this getUniqueId in my controller I am getting undefined, I also used timeout thought since chrome.storage.sync is async call so that could be the reason but no luck. Below is my controller where I am calling that function:

angular.module('chromeExtension')
.controller('sampleController',['$scope', 'customService', function ($scope, customService) {
    $scope.uniqueId = customService.getUniqueid();
    console.log("Unique: ", $scope.uniqueId); // this is giving me undefined or null
}]);

What is undefined? `chrome.storage` or `data.unique_app_id`? If former, have you declared `storage` permissions? — Haibara Ai, May 11 '16 at 10:55
Return value on calling getUniqueId is undefined, that value should be of data.unique_app_id & yes I have declared the permission — Dheeraj Agrawal, May 11 '16 at 10:59
Since `chrome.storage.sync.get` is an async call, could you also provide how you call `getUniqueId`? — Haibara Ai, May 11 '16 at 11:02

score 1 · Accepted Answer · answered May 11 '16 at 11:13

chrome.storage.sync.get is an async call, you can't directly get the results.

One workaround would be adding a callback and call console.log in the callback, I'm not familiar with angular.js but sample code would be:

angular.module('chromeExtension')
.service('customService', ['$window', '$timeout', function ($window, $timeout) {
    this.getUniqueId = function(callback) {
        return chrome.storage.sync.get('unique_app_id', function(data) {
            console.log(data.unique_app_id); // Here I am getting the id
            if(data.unique_app_id) {
                callback(data.unique_app_id);
            } else {
                uniqueId = Math.round((Math.pow(36, 20 + 1) - Math.random() * Math.pow(36, 20))).toString(36).slice(1);
                chrome.storage.sync.set({'unique_app_id': uniqueId});
                callback(uniqueId);
            }
        });
    }
}]);


angular.module('chromeExtension')
.controller('sampleController',['$scope', 'customService', function ($scope, customService) {
    customService.getUniqueId(function(uniqueId) {
        console.log("Unique: ", uniqueId);
    });
}]);

Thanks this worked... :) – Dheeraj Agrawal May 11 '16 at 11:58 — Dheeraj Agrawal, May 11 '16 at 11:58

chrome.storage.sync.get not returning value - Angular services

1 Answers1