Chrome content script using AngularJS causing error on pages with an AngularJS app

1.8k Views Asked by At

I'm having some trouble getting my angular-based extension to play nicely with pages already running angular. I managed to get most of the way with some help from this question: Using Angular in extension on a page that already uses angular

My only issue now is that angular.bootstrap() seems to be attempting to fire the page's ng-app a second time. Presumably because this second attempt is in the wrong context, the bootstrapping fails (yay). However, the function certainly does not fail silently. Any thoughts on how I could fix that?

manifest.json

{
    "name": "Extension",
    "manifest_version": 2,
    "content_scripts": [
        {
            "css": [
                "style.css"
            ],
            "js": [
                "contentscript.js"
            ],
            "matches": [
                "<all_urls>"
            ],
        }
    ]
    // other properties
}

contentscript.js

window.name = 'NG_DEFER_BOOTSTRAP!';


// libs and angular modules


angular.element(document.body).append(''
    +'<div ng-non-bindable>'
        +'<div id="cx-root" ng-csp>'
            +'<ui-view></ui-view>'
        +'</div>'
    +'</div>'
);
window.name = '';
var cxRoot = angular.element(document.getElementById('cx-root'));
angular.bootstrap(cxRoot, ['ext'], {strictDi: true});

error example

Uncaught Error: [$injector:modulerr] Failed to instantiate module msnbc due to:
Error: [$injector:nomod] Module 'msnbc' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.2/$injector/nomod?p0=msnbc
    at chrome-extension://bacjcdbnmokjncpcgkfifdfignbcdafd/contentscript.js:95:12
    at chrome-extension://bacjcdbnmokjncpcgkfifdfignbcdafd/contentscript.js:1779:17
    at ensure (chrome-extension://bacjcdbnmokjncpcgkfifdfignbcdafd/contentscript.js:1703:38)
    at module (chrome-extension://bacjcdbnmokjncpcgkfifdfignbcdafd/contentscript.js:1777:14)
    at chrome-extension://bacjcdbnmokjncpcgkfifdfignbcdafd/contentscript.js:4045:22
    at forEach (chrome-extension://bacjcdbnmokjncpcgkfifdfignbcdafd/contentscript.js:354:20)
    at loadModules (chrome-extension://bacjcdbnmokjncpcgkfifdfignbcdafd/contentscript.js:4029:5)
    at createInjector (chrome-extension://bacjcdbnmokjncpcgkfifdfignbcdafd/contentscript.js:3955:11)
    at doBootstrap (chrome-extension://bacjcdbnmokjncpcgkfifdfignbcdafd/contentscript.js:1466:20)
    at bootstrap (chrome-extension://bacjcdbnmokjncpcgkfifdfignbcdafd/contentscript.js:1487:12)
http://errors.angularjs.org/1.3.2/$injector/modulerr?p0=msnbc&p1=Error%3A%2…on%3A%2F%2Fbacjcdbnmokjncpcgkfifdfignbcdafd%2Fcontentscript.js%3A1487%3A12)
  • removing window.name = '' prevents my app from running
  • strictDi: true does not seem to cause problems
0

There are 0 best solutions below