chrome.runtime.getBackgroundPage(function callback) is the best way to access a global variable in the options page defined from background page. For example, Settings here.
var extension = chrome.extension.getBackgroundPage();
var Settings = extension.Settings;
That any change made in options page to Settings can also be accessed by background page.
But I use the angularjs in the options page, I have to bind the data to the scope. In any angularjs controller:
angular.extend($scope, Settings);
I should also watch specific property and update the Settings:
$scope.$watch('quickSwitchEnabled', function() {
Settings.quickSwitchEnabled = this.last;
});
Only in that way, I can update the Settings when I changed some model.
But angular can't follow any changes made to Settings object by background page. Once I update the Settings in the background page, there would be no esay way to notify angularjs about that. It seems I have to manually watch the Settings and notify the angular in every controller I use the Settings.
Are there any better way to do this?