バックグラウンド プロセスとポップアップで構成される chrome 拡張機能を作成しています。バックグラウンド プロセスは継続的に ajax リクエストを作成して新しいデータを取得し、ポップアップに情報が表示されます。
background.js プロセスを非常に単純化すると、次のようになります。
var Background = {
data: {},
poll: function() {
$.ajax({
url: 'some_url',
success: function(data) {
this.data = data;
chrome.extension.sendMessage('update');
}.bind(this)
});
},
startPolling: function() {
setInterval(this.poll.bind(this), 10000);
}
};
$(Background.startPolling.bind(Background));
これは 10 秒ごとに ajax リクエストを送信し、データを取得して に設定しBackground.dataます。繰り返しますが、これは非常に単純化されています。sendMessage成功のコールバックで呼び出しを確認できます。
私の popup.js は次のようになりますが、これも非常に単純化されています。
var Background = chrome.extension.getBackgroundPage().Background;
angular.module('App', [])
.controller('PopupCtrl', function PopupCtrl($scope) {
$scope.data = Background.data;
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if (request == 'update') {
console.log('update');
$scope.$apply();
}
});
});
そしてもちろん、popup.html は次のようになります。
<html ng-app="App" ng-csp>
<body ng-controller="PopupCtrl">
<p>{{data.title}}</p>
<p>{{data.body}}</p>
<p>{{data.date}}</p>
</body>
</html>
"update"10 秒間隔ごとにコンソールに出力されるので、メッセージは確実に受信されます。また、ポップアップを閉じて再度開くと、新しいデータが正しく表示されるため、データが適切に更新されていることもわかります。単純$scope.$apply()に何もしないのも同じです。
どうすればこれを修正できますか?