Currently creating a chrome extension which sits inside other applications. Currently, the application is an ember based app and therefore has it's url changes via javascript.
At some point this was working but I cannot get it to work any longer. Why doesn't it work?
$rootScope.$watch(function(){
return window.location;
}, function(value){
console.log(value)
$rootScope.locationChanged();
}, true)
Try using $window instead:
$scope.location = $window.location;
$watch('location', function () {
... // location changed
})
location is an object, so if you are going to watch it, you need to do:
$scope.$watch('window.location', function(){
}, true);
The third parameter does a deep inspection of the properties of location, rather than the reference to location itself. This will cause the watch to fire if any of the properties change.
As a workaround you can try listening for $locationChangeSuccess events on $rootScope instead
$rootScope.$on('$locationChangeSuccess', function() {
$rootScope.locationChanged();
}
What you're doing can't work. You've got access to the wrong window object:
You can't. The extension's background page runs in one process, while the tab that was updated runs in a separate process. Different processes can't share objects, so you can't directly access the window object of a tab from an extension's background page
From: https://stackoverflow.com/a/22599856/2019281
The window object the content script sees is not the same window object that the page sees.
You can use the following three functions to keep track of route change
HTML
<body ng-app="myApp" ng-controller="AppCtrl">......</body>
JS
.controller('AppCtrl', function ($scope, $rootScope, $log, $location) {
$scope.$on('$routeChangeStart', function (event, toState, toParams, fromState, fromParams) {
});
$scope.$on('$routeChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
});
$scope.$on('$routeChangeError', function (event, toState, toParams, fromState, fromParams) {
});
});
