AngularJS components to build Chrome Extension

I’m building a Chrome extension and surprisingly, I could create one AngularJS app for the extension side and another for the content script side. The latter is useful to work with a modal-like element injected in the page. I injected this app with this content script:

var myApp = angular.module('ContentApp', []);
 * Append the app to the page.
$.get(chrome.runtime.getURL('templates/modal.html'), function(data) {

  // Manually bootstrapping AngularJS app because template was also manually imported.
  angular.element(document).ready(function() {
    angular.bootstrap(document, ['ContentApp']);

The problem comes now that modal.html is getting big and I still have to add more elements. I thought that I could start creating components in Angular and did it like this:

  component('greetUser', {
    template: 'Hello, {{$ctrl.user}}!',
    controller: function GreetUserController() {
      this.user = 'world';

This actually works. I can see the Hello, world message in the rendered page. But when I changed template for templateUrl, it failed:

// This doesn't work
templateUrl: 'templates/component.html',

// Neither does this
templateUrl: 'templates/component.html',

// Although this is similar to the way I got the main template, it didn't worked either
templateUrl: chrome.runtime.getURL('templates/component.html'),

Worth to mention that I added the permission to manifest.json:

  "web_accessible_resources": [

The error that I got in the console is this:

Error: [$sce:insecurl]$sce/insecurl?p0=chrome-extension%3A%2F%2Fext_id%2Ftemplates%2Fmodal.html
    at chrome-extension://ext_id/scripts/lib/angular.min.js:6:426
    at getTrusted (chrome-extension://ext_id/scripts/lib/angular.min.js:154:156)

Does anyone know how to make it work? Or am I asking too much for a Chrome extension?

Plunker renders Angularjs component in dev tools, but not in live preview

I created a Plunker with an AngularJS component. When I run it, the component (“example-component”) fails to render in the live preview window, but when I inspect with dev tools, all of the component’s elements appear correctly.




example.component.html template:


This name is hidden!

dev tools:
Dev Tools shows the correct rendering of <example-component>“></a></p>
<p><strong>live preview:</strong></p>
<p><a href=Live preview fails to render <example-component>“></a></p>
<p>What is causing this? How can I get the component to render in the live preview window?</p>

<!-- WP QUADS Content Ad Plugin v. 1.7.8 -->
<div class=