Question

我一直在使用angular进行Chrome扩展程序。我已经建立了一个使用浏览器动作弹出窗口（popup.html）来托管我所有角度代码的简单示例。

在该页面上，我加载所有角度脚本并附加角度路由：

<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>

我的app.config.js有路由设置：

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');
    }
  ]);

到目前为止，我主要是编写和测试功能;现在是时候开始真正开始将其集成到我的内容所在的页面中。该应用程序的计划是能够从网页上记笔记，因此上下文菜单需要能够启动表单。

我已经弄清楚如何为上下文菜单设置事件处理程序，并且我还想出了如何使用内容脚本并将代码注入到网页中。但是，Chrome会阻止访问扩展的本地页面，除非明确允许。因此，我可以看到有三种解决方案可以推进，而且我不确定支持每种做法的论据。

我可以使用我的上下文菜单从popup.html启动到适当路线的新Chrome窗口。
我可以将popup.html添加到＆＃34; web_accessible_resources＆＃34;在清单文件中，它将允许内容脚本访问以在iframe中呈现我的角度应用程序的任何部分。
我可以重新设计angularjs templates in chrome extension所示的加载应用程序的方式，以便它通过manifest.json文件加载，然后在内容脚本本身内自举。

我不知道哪些可能是更好的方法，而且我并不需要实际使用browser_action弹出窗口本身。

如何在Chrome扩展程序内容脚本中使用angular

0 个答案: