# Page DOM in PageMod Content Script

**URL:** <https://discourse.mozilla.org/t/page-dom-in-pagemod-content-script/6199>\
**Category:** Development\
**Created:** [December 23, 2015, 1:47pm UTC](https://discourse.mozilla.org/t/page-dom-in-pagemod-content-script/6199 "2015-12-23T13:47:58Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![irtza\_qc](https://avatars.discourse-cdn.com/v4/letter/i/e9bcb4/32.png) [@irtza\_qc](https://discourse.mozilla.org/u/irtza_qc)\
**Post date:** [December 23, 2015, 1:47pm UTC](https://discourse.mozilla.org/t/page-dom-in-pagemod-content-script/6199/1 "2015-12-23T13:47:58Z")

</div>

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](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/](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. 😩

---

<div class="post-metadata">

**Author:** ![noitidart](https://avatars.discourse-cdn.com/v4/letter/n/9f8e36/32.png) [@noitidart](https://discourse.mozilla.org/u/noitidart)\
**Post date:** [December 24, 2015, 11:09am UTC](https://discourse.mozilla.org/t/page-dom-in-pagemod-content-script/6199/2 "2015-12-24T11:09:44Z")

</div>

Hey Irtza! Can you jump onto IRC at #extdev channel, let’s work through this together. Here’s an html5 client for irc, my user name on there is `noit` -

[https://client00.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2F%23extdev](https://client00.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2F%23extdev)

If you have your own irc client just click this link - irc://moznet/extdev