GreasemonkeyスクリプトからXMLHttpRequestsをインターセプトするにはどうすればよいですか？
AJAXリクエストの内容をGreasemonkeyを使用してキャプチャします。
誰かがこれを行う方法を知っていますか？
受け入れられた答えはほぼ正しいですが、少し改善することができます：
(function(open) {
XMLHttpRequest.prototype.open = function() {
this.addEventListener("readystatechange", function() {
console.log(this.readyState);
}, false);
open.apply(this, arguments);
};
})(XMLHttpRequest.prototype.open);
変更する可能性があるopenに与えられているすべての引数を明示的に知る必要がないため、呼び出しよりもapply +引数を使用することをお勧めします。
XMLHttpRequest.prototype.openを変更したり、独自のコールバックを設定して元のメソッドを呼び出したりする置換を使用してメソッドを送信するのはどうですか？コールバックはその処理を実行してから、指定された元のコードをコールバックに呼び出すことができます。
言い換えると：
XMLHttpRequest.prototype.realOpen = XMLHttpRequest.prototype.open;
var myOpen = function(method, url, async, user, password) {
//do whatever mucking around you want here, e.g.
//changing the onload callback to your own version
//call original
this.realOpen (method, url, async, user, password);
}
//ensure all XMLHttpRequests use our custom open method
XMLHttpRequest.prototype.open = myOpen ;
Chrome 55およびFirefox 50.1.0でテスト済み
私の場合、Firefoxでは読み取り専用のプロパティであるresponseTextを変更したかったので、XMLHttpRequestオブジェクト全体をラップする必要がありました。私はAPI全体（特にresponseType）を実装していませんが、所有しているすべてのライブラリーを使用するには十分でした。
使用法：
XHRProxy.addInterceptor(function(method, url, responseText, status) {
if (url.endsWith('.html') || url.endsWith('.htm')) {
return "<!-- HTML! -->" + responseText;
}
});
コード：
(function(window) {
var OriginalXHR = XMLHttpRequest;
var XHRProxy = function() {
this.xhr = new OriginalXHR();
function delegate(prop) {
Object.defineProperty(this, prop, {
get: function() {
return this.xhr[prop];
},
set: function(value) {
this.xhr.timeout = value;
}
});
}
delegate.call(this, 'timeout');
delegate.call(this, 'responseType');
delegate.call(this, 'withCredentials');
delegate.call(this, 'onerror');
delegate.call(this, 'onabort');
delegate.call(this, 'onloadstart');
delegate.call(this, 'onloadend');
delegate.call(this, 'onprogress');
};
XHRProxy.prototype.open = function(method, url, async, username, password) {
var ctx = this;
function applyInterceptors(src) {
ctx.responseText = ctx.xhr.responseText;
for (var i=0; i < XHRProxy.interceptors.length; i++) {
var applied = XHRProxy.interceptors[i](method, url, ctx.responseText, ctx.xhr.status);
if (applied !== undefined) {
ctx.responseText = applied;
}
}
}
function setProps() {
ctx.readyState = ctx.xhr.readyState;
ctx.responseText = ctx.xhr.responseText;
ctx.responseURL = ctx.xhr.responseURL;
ctx.responseXML = ctx.xhr.responseXML;
ctx.status = ctx.xhr.status;
ctx.statusText = ctx.xhr.statusText;
}
this.xhr.open(method, url, async, username, password);
this.xhr.onload = function(evt) {
if (ctx.onload) {
setProps();
if (ctx.xhr.readyState === 4) {
applyInterceptors();
}
return ctx.onload(evt);
}
};
this.xhr.onreadystatechange = function (evt) {
if (ctx.onreadystatechange) {
setProps();
if (ctx.xhr.readyState === 4) {
applyInterceptors();
}
return ctx.onreadystatechange(evt);
}
};
};
XHRProxy.prototype.addEventListener = function(event, fn) {
return this.xhr.addEventListener(event, fn);
};
XHRProxy.prototype.send = function(data) {
return this.xhr.send(data);
};
XHRProxy.prototype.abort = function() {
return this.xhr.abort();
};
XHRProxy.prototype.getAllResponseHeaders = function() {
return this.xhr.getAllResponseHeaders();
};
XHRProxy.prototype.getResponseHeader = function(header) {
return this.xhr.getResponseHeader(header);
};
XHRProxy.prototype.setRequestHeader = function(header, value) {
return this.xhr.setRequestHeader(header, value);
};
XHRProxy.prototype.overrideMimeType = function(mimetype) {
return this.xhr.overrideMimeType(mimetype);
};
XHRProxy.interceptors = [];
XHRProxy.addInterceptor = function(fn) {
this.interceptors.Push(fn);
};
window.XMLHttpRequest = XHRProxy;
})(window);
プロキシサーバーを作成するときに、ajax呼び出しをインターセプトするためのコードをいくつか作成しました。ほとんどのブラウザで動作するはずです。
ドキュメント内のunsafeWindow.XMLHttpRequestオブジェクトをラッパーで置き換えることができます。小さなコード（テストされていません）：
var oldFunction = unsafeWindow.XMLHttpRequest;
unsafeWindow.XMLHttpRequest = function() {
alert("Hijacked! XHR was constructed.");
var xhr = oldFunction();
return {
open: function(method, url, async, user, password) {
alert("Hijacked! xhr.open().");
return xhr.open(method, url, async, user, password);
}
// TODO: include other xhr methods and properties
};
};
しかし、これには1つ小さな問題があります。Greasemonkeyスクリプトはページのロードafterを実行するため、ページはロードシーケンス中に元のXMLHttpRequestオブジェクトを使用または保存できるため、スクリプトの実行前に、または実際のXMLHttpRequestオブジェクトは、スクリプトによって追跡されません。この制限を回避する方法がわかりません。
提案されたソリューションに基づいて、TypeScriptソリューションで使用できる「xhr-extensions.ts」ファイルを実装しました。使い方：
コードを含むファイルをソリューションに追加する
このようにインポート
import { XhrSubscription, subscribToXhr } from "your-path/xhr-extensions";このように購読する
const subscription = subscribeToXhr(xhr => { if (xhr.status != 200) return; ... do something here. });サブスクリプションが不要になったときにサブスクリプションを解除します
subscription.unsubscribe();
「xhr-extensions.ts」ファイルの内容
export class XhrSubscription {
constructor(
private callback: (xhr: XMLHttpRequest) => void
) { }
next(xhr: XMLHttpRequest): void {
return this.callback(xhr);
}
unsubscribe(): void {
subscriptions = subscriptions.filter(s => s != this);
}
}
let subscriptions: XhrSubscription[] = [];
export function subscribeToXhr(callback: (xhr: XMLHttpRequest) => void): XhrSubscription {
const subscription = new XhrSubscription(callback);
subscriptions.Push(subscription);
return subscription;
}
(function (open) {
XMLHttpRequest.prototype.open = function () {
this.addEventListener("readystatechange", () => {
subscriptions.forEach(s => s.next(this));
}, false);
return open.apply(this, arguments);
};
})(XMLHttpRequest.prototype.open);
Greasemonkeyでそれを実行できるかどうかはわかりませんが、拡張機能を作成すると、observerサービスとhttp-on-examine-responseオブザーバーを使用できます。