I'm writing a chrome extension that uses angularjs to get a JSON response from an API. The page bellow is the popup for the extension. At the moment there is a form that calls a method in the angular controller to get the JSON from the API, however I would like to have this called when the popup is opened. I have tried many things to get this to work and failed. I'd like some guidance if anyone knows what is required to achieved what I want.
Thanks.
Here's my code.
I declare my app like so
var extension = angular.module('StackAPI',['ngResource']);
In my controller file i have the following.
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});
}
});
And my html popup page looks like this
The form with the ng-submit="doSearch()" is what currently calls the method in the angular controller. I would like this method doSearch() to be called when I open the extension popup page.
<!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>
It turns out that what I am doing is not possible with my current setup due to the content security policy (CSP) chrome has. The API I created is currently serving only with http, this is where the problem lies. The doSearch() method calls a ngResource that has been initialized with my http API and due to the CSP it can only run in a sandbox defined in the manifest file. The sandboxing means other parts of the extension can not comuiniacte with what ever is running in the sandbox, and so I can not call the doSearch() method in the way that I want.
The solution to this - I have to configure tomcat to serve the API over https, which is allowed by the CSP once the source uri is stated in the manifest file.