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

我在this link找到了答案。感谢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) {
    ...

用于构建Chrome扩展的AngularJS组件

1 个答案: