3

我正在编写一个 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>
4

1 回答 1

0

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

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

于 2013-03-13T09:47:25.773 回答