I am working on a chrome extension which reads data from the webpage user is browsing on. I am using jQuery in context script to get the data from the DOM. It works as expected in all pages expect in a website which uses AngularJS. The page uses route mechanism to load consecutive pages. But content script does not get reloaded when this route change happens. I am using Chrome webNavigation to listen to onHistoryStateUpdated in the background.js page.

chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
    console.log(details);
    chrome.tabs.sendMessage(details.tabId, {action: "open_dialog_box"}, function(response) {

    });
});

But this event fires even before the data of the next page loads pletely. I used the below code in developer console, which gives the requested data properly.

angular.element(document.getElementById('container')).injector().get('$rootScope')

But this injector() mand does not work when called from the content script. How do we access this injector data or root scope from chrome extension?

Thank You

I am working on a chrome extension which reads data from the webpage user is browsing on. I am using jQuery in context script to get the data from the DOM. It works as expected in all pages expect in a website which uses AngularJS. The page uses route mechanism to load consecutive pages. But content script does not get reloaded when this route change happens. I am using Chrome webNavigation to listen to onHistoryStateUpdated in the background.js page.

chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
    console.log(details);
    chrome.tabs.sendMessage(details.tabId, {action: "open_dialog_box"}, function(response) {

    });
});

But this event fires even before the data of the next page loads pletely. I used the below code in developer console, which gives the requested data properly.

angular.element(document.getElementById('container')).injector().get('$rootScope')

But this injector() mand does not work when called from the content script. How do we access this injector data or root scope from chrome extension?

Thank You

• javascript
• jquery
• angularjs
• google-chrome
• google-chrome-extension

• Try this.. angular.element(document.getElementById('container')).scope().$root – Vinay K Commented Mar 28, 2015 at 7:45
• @VinayK sorry if my questions was not clear. The problem is accessing the scope from the chrome extension content script. when I run the mand I posted above in console with "top frame", it works. But when I run it in my extension scope, it returns undefined – Sriram Commented Mar 28, 2015 at 9:11

1 Answer 1

Chrome extension content scripts run in a separate execution environment. [official doc]

So chrome extensions cannot access the scope element of angular elements from content script. To access this, we need to inject the script inside the scope of the page from content script and pass data using event listeners.

First create the script which needs to access the root scope in a separate JS file.

angular_inject.js

var $rootScope = angular.element(document.getElementById('midd-container-inner')).injector().get('$rootScope');
var currval = $rootScope.data['id'];			
document.dispatchEvent(new CustomEvent('RW759_connectExtension', {
	detail: {
		id: currval
	}
}));

Inject the above script inside the page from content script

content_script.js

var s = document.createElement('script');
s.src = chrome.extension.getURL('scripts/angular_inject.js');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
    s.parentNode.removeChild(s);
};

// Event listener
document.addEventListener('RW759_connectExtension', function(e) {
    // e.detail contains the transferred data (can be anything, ranging
    // from JavaScript objects to strings).
    // Do something, for example:
	console.log(e.detail);
});

Now using this event listeners you can pass data back and forth from page to content scripts.