Question

我正在编写一个chrome扩展，它使用angularjs从API获取JSON响应。下面的页面是扩展名的弹出窗口。目前有一个表单调用角度控制器中的方法从API获取JSON，但是我希望在打开弹出窗口时调用它。我已经尝试了许多方法来使其工作并失败。如果有人知道实现我想要的东西需要什么，我想要一些指导。

感谢。

这是我的代码。

我宣布我的应用程序是这样的

var extension = angular.module('StackAPI',['ngResource']);

在我的控制器文件中，我有以下内容。

extension.controller('StackAPICtrl', function ($scope, $resource) {

    $scope.stackAPI = $resource('http://*/question/params?questionId=:questionId',
        {port:'80', questionId:'', callback:'JSON_CALLBACK'},
        {get:{method:'JSONP'}});
    $scope.doSearch = function () {
        $scope.soResult = $scope.stackAPI.get({questionId:$scope.search});
    }
});

我的html弹出页面看起来像这样

带有ng-submit="doSearch()"的表单是当前在角度控制器中调用的方法。我希望在打开扩展弹出页面时调用此方法doSearch()。

<!DOCTYPE html>
<html ng-app="StackAPI" ng-csp>
<head>
    <title>Test</title>
    <script type="text/javascript" src="/js/angular.min.js"></script>
    <script type="text/javascript" src="/js/angular-resource.min.js"></script>
    <script type="text/javascript" src="/js/extension.js"></script>
    <script type="text/javascript" src="/js/query.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/all.css" media="screen"/>
</head>
<body>
<div ng-controller="StackAPICtrl">

    <form align="left" ng-submit="doSearch()">
        <input id="input" type="text" placeholder="Enter a question id..." ng-model="search" size="115">
    </form>

    <div class="container">
        <div ng-repeat="answer in soResult.answers">
            <div id="answer-{{answer.answer_id}}" class="answer" data-answerid={{answer.answer_id}}>
                <table>
                <tr>
                    <td class="votecell">
                        <div class="vote">
                            <span class="vote-count-post " title="up-ranked">
                                <img src="/images/arrow.png" alt="arrow" height="64" width="64">
                            </span>
                        </div>
                    </td>
                    <td class="answercell" align="left">
                        <div class="post-text" ng-bind-html-unsafe="answer.body">

                        </div>
                        <table class="fw">
                            <tr>
                                <td class="vt">
                                    <div class="post-menu">
                                        <a class="short-link">share</a>
                                        <span class="lsep">|</span>
                                        <a class="suggest-edit-post" title="revise and improve this post">edit</a>
                                    </div>
                                </td>
                                <td align="right" class="post-signature">
                                    <div class="user-info ">
                                        <div class="user-action-time">answered {{answer.creation_date}}
                                            <span title="2013-02-22 23:12:55Z" class="relativetime"></span>
                                        </div>
                                        <div class="user-gravatar32">
                                            <!-- ${profile_picture} -->
                                            <img src="{{answer.owner.profile_image}}"
                                                 alt="" width="32" height="32">
                                        </div>
                                        <!-- users details stuff here -->
                                        <div class="user-details">
                                            <!-- ${name} -->
                                            <a>{{answer.owner.display_name}}</a><br>
                                <span class="reputation-score" title="reputation score" dir="ltr">
                                <!-- ${reputation} -->
                                    {{answer.owner.reputation}}
                                </span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
</div>
</body>
</html>

Answer 1

事实证明，由于内容安全策略（CSP）chrome具有我目前的设置，我正在做的事情是不可能的。我创建的API目前只提供http，这就是问题所在。 doSearch()方法调用已使用我的http API初始化的ngResource，并且由于CSP，它只能在清单文件中定义的沙箱中运行。沙盒意味着扩展的其他部分无法与沙箱中运行的内容进行通信，因此我无法以我想要的方式调用doSearch()方法。

解决方法 - 我必须配置tomcat以通过https提供API，一旦源uri在清单文件中声明，CSP就允许这样做。

加载弹出页面时，在chrome扩展弹出页面中调用angular方法？

1 个答案: