How can I use angular inside a Chrome extension content script

Question

I've been working on a Chrome extension using angular. I've built off a simple example that uses the browser action popup (popup.html) to host all of my angular code.

On that page, I load all the angular scripts and attach the angular routing:

<script src="bower_components/jquery/dist/jquery.js"></script> 
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="scripts/shared/google_auth.js"></script>
<script src="scripts/shared/util.js"></script>
<script src="scripts/app.module.js"></script>
<script src="scripts/app.config.js"></script>
<script src="scripts/filepicker/filepicker.module.js"></script>
<script src="scripts/filepicker/filepicker.controller.js"></script>
<script src="scripts/filepicker/filepicker.factory.js"></script>
<script src="scripts/filepicker/filepicker.components.js"></script>
<script src="scripts/filepicker/filepicker.filecreator.js"></script>

<script src="scripts/notetaker/notetaker.module.js"></script>
<script src="scripts/notetaker/notetaker.controller.js"></script>
<script src="scripts/notetaker/notetaker.factory.js"></script>
<script src="scripts/notetaker/notetaker.component.js"></script>

My app.config.js has the routing setup:

angular.
  module('researchBuddyApp').
  config(['$locationProvider', '$routeProvider',
    function config($locationProvider, $routeProvider) {
      $locationProvider.hashPrefix('!');

      $routeProvider.
        when('/filepicker', {
          template: '<filepicker></filepicker>'
        }).
        when('/notetaker', {
          template: '<notetaker></notetaker>'
        }).
        otherwise('/notetaker');
    }
  ]);

So far I've been mostly writing and testing functionality; now it's time to start to actually start integrating this into the pages where my content is. The plan for the app is to be able to take notes from webpages, so the context menu needs to be able to launch a form.

I've figured out how to setup event handlers for context menus and I've also figured out how to use content scripts and inject code into webpages. But, Chrome blocks access to the local pages of extensions unless explicitly allowed. So there are three solutions that I can see moving forward with, and I am not sure the arguments in favor of each practice.

1. I could just use my context menu to launch a new chrome window to the appropriate route off of popup.html.

2. I can add popup.html to "web_accessible_resources" in the manifest file, which will give the content script access to render any part of my angular app inside an iframe.

3. I can rework how I load my app as demonstrated by angularjs templates in chrome extension so it's loaded throught the manifest.json file and then bootstrapped within the content script itself.

I don't have any idea which of these might be a better approach, and I don't have a great need to actually use the browser_action popup itself.