Using AngularJS controller as content script?

问题

I am injecting a file modal.html in the current tab. Now this file contains ng attributes in like ng-model and ng-controller. Now I am using my controller as a content script and inside this controller I have a chrome.runtime.onMessage.addListener(). Here are my files :

manifest.json

{
  "name": " Extension 1",
  "version": "0.1",
  "description": "Sample",
  "icons": { "16": "icons/icon16.png",
             "48": "icons/icon48.png",
            "128": "icons/icon128.png" },
    "background": {
    "scripts": [
                "lib/jquery/jquery.min.js",
                 "background/bg.js"
               ]
  },
  "content_scripts": [
    {
      "matches": ["https://mail.google.com/*"],
      "css":["lib/bootstrap/dist/css/bootstrap.css","css/modal.css"],
      "js": [ "lib/jquery/jquery.min.js",
              "lib/bootstrap/dist/js/bootstrap.min.js",
              "lib/angular/angular.min.js",
               "content/insertModal.js",
              "js/app.js",
              "js/appController.js"
             ]
    }
  ],
   "web_accessible_resources": [
    "modal.html"
  ],

  "permissions": ["contextMenus", "tabs","identity","https://accounts.google.com/"],


    "manifest_version": 2
}

content/insertModal.js

$(document).ready(function(){

    $.get(chrome.extension.getURL('modal.html'), function(data) {

      $(data).appendTo('body');

  });
});

modal.html

  <div ng-app="myapp" ng-controller="mainCtrl" class="modal fade" id="addTaskModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">

        <div class="modal-header">

          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
                   <select  ng-options="group.name for group in groups"  ng-model="group.selectedGroup" class="form-control selectbasic">
                      <option value="">Select group</option>
                    </select>
          <div>                     
              <textarea class="form-control" id="taskDescription" ng-model="taskName" name="textarea"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-success">Add</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

app.js

 var app = angular.module("myapp" ,[]);

appController.js

app.controller("mainCtrl",function($scope){
         console.log("In controller");
            chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
            // Listening to messages from background script
            });



  });

Now problem is that console.log("In controller") in appController.js is not called. Also when i press f12 and go to content scripts i dont see js/app.js there.

来源：https://stackoverflow.com/questions/33098128/using-angularjs-controller-as-content-script