AngularJS 个要构建的组件 Chrome 个扩展

Question

我正在构建一个 Chrome 扩展，令人惊讶的是，我可以为扩展端创建一个 AngularJS 应用程序，为内容脚本端创建另一个。后者对于处理页面中注入的类似模态的元素很有用。我用这个内容脚本注入了这个应用程序：

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

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

现在问题来了，modal.html变大了，我还要加更多的元素。我以为我可以开始在 Angular 中创建组件，并且是这样做的：

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

这确实有效。我可以在呈现的页面中看到 Hello, world 消息。但是当我将 template 更改为 templateUrl 时，它失败了：

// 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'),

值得一提的是，我添加了 manifest.json 的权限：

  "web_accessible_resources": [
    "templates/*"
  ],

我在控制台中得到的错误是这样的：

Error: [$sce:insecurl] http://errors.angularjs.org/1.5.11/$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)

有谁知道如何让它工作？还是我对 Chrome 延期的要求过高？

Answer 1

我在 . Thanks to faboolous 中找到了答案，他为我指明了正确的方向 ;)

由于 templateURL 在 $scope 执行之前处理，因此在 Chrome 扩展中保护模板路径的正确方法是：

// This works. Yay!
    angular.module('ContentApp').
      component('greetUser', {
        templateUrl: ['$sce', function ($sce) {
          return $sce.trustAsResourceUrl(chrome.runtime.getURL('templates/component.html'));
        }],
        controller: function ($scope) {
    ...

AngularJS 个要构建的组件 Chrome 个扩展

AngularJS components to build Chrome Extension

google-chrome-extension

angularjs

angularjs-components