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

Call angular method in chrome extension popup page when popup page is loaded?

本文关键字：调用 方法 扩展 angular 加载 chrome      更新时间：2023-09-26

我正在编写一个chrome扩展，使用angularjs从API获得JSON响应。下面的页面是扩展的弹出。目前有一个表单调用angular控制器中的一个方法来从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()"的表单是当前在angular控制器中调用该方法的。我想这个方法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="answerswer in soResult.answers">
            <div id="answerswer-{{answer.answer_id}}" class="answerswer" 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="answerswercell" align="left">
                        <div class="post-text" ng-bind-html-unsafe="answerswer.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>

事实证明，我所做的是不可能与我目前的设置由于内容安全策略(CSP) chrome有。我创建的API目前只提供http服务，这就是问题所在。doSearch()方法调用了一个ngResource，这个ngResource已经被我的http API初始化了，由于CSP，它只能在manifest文件中定义的沙盒中运行。沙箱意味着扩展的其他部分不能与在沙箱中运行的任何东西通信，因此我不能以我想要的方式调用doSearch()方法。

解决方案-我必须配置tomcat通过https服务API，这是CSP允许的，一旦源uri在manifest文件中声明。

相关文章：