0

I'm trying to manipulate GMail DOM with angularjs into a chrome extension.

For the moment I have a basic app :

(function() { "use strict";

  var html = document.querySelector('html');

  html.classList.add('gmail-detect-response');
  angular.bootstrap(html, ['myGmailApp']);
  html.classList.add('ng-app');
  html.classList.add('ng-csp');

}());

And a directive :

(function(){ 'use strict';
  angular.module('myGmailApp').directive('gmailDetectResponse', detectResponse);

  function detectResponse(){
    return {
      restrict: 'A',
      link: function(scope, element, attrs){
        var target = document.body;
        var config = {
          attributes: true,
          childList: true,
          subtree: true
        };

        var observer = new MutationObserver(function(mutations){
          mutations.forEach(function(mutation){
            if(mutation.addedNodes.length > 0){
              console.log('mutmut');
              var responseDivs = document.getElementsByClassName("gH acX");
              for(var i = 0; i < responseDivs.length; i++){
                if(responseDivs[i].getAttribute('gTrelloSend') == null){
                  responseDivs[i].setAttribute('gTrelloSend', '');
                  var para = document.createElement('p');
                  var textNode = document.createTextNode('TEST');
                  para.appendChild(textNode);
                  responseDivs[i].insertBefore(para, responseDivs[i].firstElementChild);
                }
              }
            }
          });
        });

        observer.observe(target, config);
      }
    }
  };
})();

My mutation observer works fine if I put it in a basic js file. Why my directive isn't executed ?

My goal is to detect all "response divs" into Gmail in order to create a button who can call an angularjs controller.

Thanks a lot !

basshacker
  • 1
  • 1
    Apart from your mutation observer being strange (it doesn't use the provided mutation information) I guess you might need to [inject all your scripts](https://stackoverflow.com/questions/9515704/building-a-chrome-extension-inject-code-in-a-page-using-a-content-script) inside the gmail page but it's a wild guess based on insufficient (IMHO) information from the question. – wOxxOm Nov 13 '15 at 16:04
  • Thanks for your answer. I'm using the mutation only to detect when the DOM change in order to be abble to edit the element containing the my futur button. What more information do you need ? Thanks ! – basshacker Nov 13 '15 at 16:25
  • The usual stuff: manifest.json and the name of the file that contains the posted code to understand how it's declared in the manifest. – wOxxOm Nov 16 '15 at 13:04
  • Possible duplicate of [AngularJS watch DOM change](http://stackoverflow.com/questions/21332671/angularjs-watch-dom-change) – Paul Sweatte Nov 27 '15 at 19:58

0 Answers0