Angular, jQuery and Chrome extension

Question

I am trying to create a chrome extension that modifies the content a specific website. Since I do not have access to the src code of the website i have to change it through javascript

I want the new content to be dynamic and updates through angular (the original website does not use angular).

i am injecting a tag with ng-app and ng-controller and create an angular app and controller in js.

However the page does not understand the angular html directives and render it verbatim.

What am i doing wrong?

from the tutorial code : i am injecting this to the html (using js code that's injected by chrome extension, on page load):

<div ng-app="phonecatApp" ng-controller="PhoneListCtrl">

  <ul>
    <li ng-repeat="phone in phones">
      <span>{{phone.name}}</span>
      <p>{{phone.snippet}}</p>
    </li>
  </ul>

</div>

and this to the js (injected through extension, on page load):

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

which is run after page load

Benoit · Accepted Answer · 2015-08-08 00:26:03Z

1

it might be a silly question, but did you also inject the angular.js library in the page before injecting your angular code?

answered Aug 8, 2015 at 0:26

Benoit

7915 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

WindowsMaker · Accepted Answer · 2015-08-08 00:50:42Z

0

I did not bootstrap. Apparently the ng directives are compiled on DOMContentLoaded which happened way before i injected anything. So I need to initialize angular myself

angular.element(document).ready(function() {
    angular.bootstrap(document, ['phonecatApp']);
});

answered Aug 8, 2015 at 0:50

WindowsMaker

3,4387 gold badges32 silver badges47 bronze badges

Collectives™ on Stack Overflow

Angular, jQuery and Chrome extension

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related