CODEWITHSUNDEEP
javascriptangularjsgoogle-chromegoogle-chrome-extension
Emrys Myrooin
Emrys Myrooin

Reputation: 2231

Is Angular usable in Content Script

I have a Google Chrome extension that injects a content script on given page of a site. This content script replaces the action bound to a button. When the button is clicked, some HTML elements are added (a foundation popup). I want to use Angular to manage the popup I add to the page. Can I do this ?

Here is sample HTML code that could be added when the button is clicked.

<div ng-app="MyApp">
    <div ng-controller="MyCtrl as ctrl">
        <p> {{ctrl.sayHello()}} </p>
    </div>
</div>

Will this work? (I haven't gotten it to work yet, but I'm still trying) If it works, what if the page already contains another Angular app?

After my HTML insertion, the HTML might look something like:

<html ng-app="PageApp">
    <body ng-controller="PageCtrl">
        ...
        ...
        <div ng-app="MyApp">
            <div ng-controller="MyCtrl">
                ...
            </div>
        </div>
    </body>
</html>

Edit: I have found angular.bootstrap(). So I can launch an Angular module on a given DOM element (my div). I think it could be a good solution. Can I still use it if Angular has already tried to load an ng-app directive and failed? Because it will certainly happen when injecting Angular code, and trying to load a PageApp that is not defined for me.

Upvotes: 1

Views: 1937

Answers (1)

andrewgu
andrewgu

Reputation: 1642

What @estus is saying is correct, and answered your question. Your code will not work, since "[you] can't have nested Angular apps", in other words an Angular app cannot have another Angular app inside of it, regardless of whether you have access to the source (which you probably do, since you're injecting code).

Suggestions

  • More radical, but note that most, if not all of AngularJS's functionality can be ported to vanilla JavaScript quite easily, if you ignore the attribute binding. You might have to write more specific and manual code, but this would cut any Angular-related problems out of the picture.
  • There is a hackish workaround that may allow you to nest some Angular apps, but this also requires access to the source of the page in which you're injecting the code, and some crazy DOM searching and manipulation, which may not be too efficient.

Upvotes: 2

Related Questions