3

私は、angularjsを使用してAPIからJSON応答を取得するChrome拡張機能を作成しています。以下のページは、拡張機能のポップアップです。現時点では、角度コントローラーのメソッドを呼び出して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()ます。そのため、希望する方法でメソッドを呼び出すことができません。

これに対する解決策-https経由でAPIを提供するようにtomcatを構成する必要があります。これは、ソースuriがマニフェストファイルに記述されると、CSPによって許可されます。

于 2013-03-13T09:47:25.773 に答える