Im working on a Firefox Addon using the SDK (FF44.0a2 Developer’s Edition). When the user goes on a certain webpage, a PageMod injects a script into the page. That script then injects an Angular App into the page DOM as well. What I want is that I want to get a hold of the Angular App scope in the PageMod content script. I figured that by using document.getElementById(“div#angular_App”) I’d get it, but for some reason, document isnt giving me the Page DOM. I’ve grappled with this issue for several days, posted questions on SO as well, but all to no avail.
https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts says document will be the DOM. For me its not and it’s driving me nuts. unsafeWindow, window.content, content.document, none of them are giving me what I want. Here’s some code to illustrate what I want to get/do
PageMod :
var gmail_workers = [];
var gmailPageMod = pageMod.PageMod({
include: “https://mail.google.com/*”,
contentScriptWhen: “ready”,
contentScriptFile: [self.data.url(‘js/jquery.js’), self.data.url(‘js/angular.min.js’), self.data.url(‘js/script.js’)]});
script.js:
‘use strict’;
(function() {
var js = document.createElement(‘script’);
js[(js.innerText === undefined ? “textContent” : “innerText”)] = "var private_self = {}; private_self_options = " + JSON.stringify(self.options); + “”;
(document.head || document.documentElement).appendChild(js);
// load jQuery
var jquery_src = document.createElement(‘script’);
jquery_src.src = “resource://” + self.options.extensionId + “/data/js/jquery.js”;
(document.head || document.documentElement).appendChild(jquery_src);
jquery_src.onload = function() {
// load gmai.js
var gmail_src = document.createElement(‘script’);
gmail_src.src = “resource://” + self.options.extensionId + “/data/js/gmail.js”;
(document.head || document.documentElement).appendChild(gmail_src);
gmail_src.onload = function() {
// load angularjs
var angular_src = document.createElement(‘script’);
angular_src.src = “resource://” + self.options.extensionId + “/data/js/angular.min.js”;
(document.head || document.documentElement).appendChild(angular_src);
angular_src.onload = function() {
// load app.js
var app_src = document.createElement(‘script’);
app_src.src = “resource://” + self.options.extensionId + “/data/js/app.js”;
(document.head || document.documentElement).appendChild(app_src);
app_src.onload = function() {
// load gmail-logic.js
var gmail_logic = document.createElement(‘script’);
gmail_logic.src = “resource://” + self.options.extensionId + “/data/js/gmail-logic.js”;
(document.head || document.documentElement).appendChild(gmail_logic);
}
}
}
}
})();
App.js has the following line:
$(’< div ng-app=“ngApp” id=“angular_App_Parent” >< div id=“angular_App” ng-controller=“mainContrller” >< /div >< /div >’).appendTo(‘html’);
In script.js I try the following line
var scope = angular.element(document.getElementById(“angular_App”)).scope();
but this always gives me null or undefined. Even though I know its been injected in properly and is working because I make API calls in another scope(gmail-logic.js) and it works fine there. So why can I not get the scope in script.js? Please help. Im desperate and frustrated and at my wit’s end. 