[js] xhrの完了を取得したい

Question

chrome拡張を作っています。

あるサイトではxhrで得た情報をもとに動的に要素を生成しています。
その要素を取得したいのですがwindow.loadの時点ではまだ生成されていません。
setTimeoutでタイミングを遅らせることでなんとか得られていますが気持ちが悪いので、要素の生成が完了したことをトリガーにその要素を取得したいです。

さらにはcontent scriptでdom操作を行うのでオリジナルのページから通知を飛ばさなくてはならないのですが…。

何かいい方法がありましたらご助言ください。

Answer 1

chrome.webRequest.onCompleted で採れそうな気がします。

【通信を垂れ流してなにかするChrome拡張 - Qiita】
http://qiita.com/keiskimu/items/42e74aa46cb3c70d341f

【chrome.webRequest - Google Chrome】
https://developer.chrome.com/extensions/webRequest

Comments

[og24715]

ドンピシャな回答ありがとうございます
event page では webRequest API が使えないようなので background page にしましたが、どのくらいコストがかかるか気になるところです

Answer 2

非同期でwindow.onload時に終わっていない処理があるということでしょうか？
javascriptならpromiseを利用して終了状況を確認できそうです
jQueryで$.when(~).done(function(){})あたり利用できないでしょうか？

Answer 3

Chrome拡張なら XMLHttpRequest ではなく、Fetch API を使うと楽に実装出来そうに思います。
XMLHttpRequest + Promise でも勿論実装出来ますが、Fetch API なら特別なコードを書かずとも Promise を返してくれます。

• Fetch API - Web API インターフェイス | MDN
• JavaScript Promiseの本

XMLHttpRequest と違って書き方に戸惑う面もあるとは思います。

• JavaScript - Fetch API で XMLHttpRequest の progress イベントと同等の機能を実現するには？(40200)｜teratail

Re: og24715 さん

Answer 4

ラップする形で内部のajax返却を取得することはできないような気がします。

私がやるのであれば、
Intervalで特定の要素が出現するまでTimeout等の処理を作ります。