chromeのconsole上において(iframeで読み込まれ勝手に)consoleに出力されたものを 文字列として変数に入れてhtmlに出力したいのですが どのような方法がありますでしょうか?
よろしくお願いいたします。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するライブラリを使わない方法(のヒント)を提示しておきます。
iframe の DOM ノードには contentWindow
というオブジェクトが存在します。
これは iframe 内の window
と同じものです。
幾つかの条件を満たす時には、外側のフレームから
この contentWindow
の内部を書き換えることができます
このことを利用して contentWindow.console.log
やその他を別の関数に差し替えてしまえば、
iframe 内から console.log
への出力(全履歴)を、外側から知ることができます。
おおよそのコードはこんな感じですね。
// 文章内の最初の iframe を取得する。必要に応じて取り方は変えるべし
var firstFrame = document.getElementsByTagName('iframe')[0];
firstFrame.contentWindow.console.log = function() {
// TODO: arguments を履歴として記録する
}
なお 幾つかの条件 とはおおよそ以下のとおりで、全て満たしている場合にのみ書き換え可能なはずです。(動作確認はしていない)
参考文献: インラインフレームについて - JavaScriptプログラミング講座
仮に iframe 内側のコンテンツに任意のJavaScriptを入れられるようならば、
オリジンが異なる場合にも対応する方法があります。
それは parent.postMessage
を使う方法です。
説明は、簡単なコードを示すに留めますが以下のようになります。 なおコードには onload からの呼び出しなどは含まれていませんので、 必要に応じて適宜補ってください。
console.log = function () {
parent.postMessage(JSON.stringify(arguments), '*')
}
window.addEventListener("message", receiveMessage, false);
function receiveMessage(ev) {
// 期待した生成元(オリジン)からのメッセージであるかを確認する
if (ev.origin === 'http://example.org/') {
// 履歴に記録する
}
}
Google Chromeの拡張からであれば、 chrome.experimental.devtools.console APIを利用してコンソールの履歴にアクセスできます。
このAPIは開発者ツール内からしか利用できないので、開発者ツールを拡張する「拡張」として書く必要があります。そしてログを取得するには開発者ツールを開く必要がある、という制約が付きます。また実験段階のAPIなので、ブラウザの設定をいじって利用を許可する必要もあります。流れとしては:
experimental パーミッションを manifest.json に含め、 devtools_page でHTMLファイルを指定する
...
"permissions": [
"experimental"
],
"devtools_page": "devtools.html",
...
devtools.html から参照されるスクリプトで履歴用 API を使う
のようになります。
メッセージングAPIを利用して、開発者ツール内から元のドキュメントに出力できます:
devtools.html から参照されるスクリプトからメッセージを送信し:
// <script src="devtools.js"></script> などで指定したファイル内
chrome.experimental.devtools.console.onMessageAdded.addListener(function(message) {
chrome.runtime.sendMessage({
"to": chrome.devtools.inspectedWindow.tabId,
"payload": message
});
});
Event Pageのスクリプトで受け取り、Content Scriptに中継する:
// マニフェストの "background": {"scripts": [...]} で指定したファイル内
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
chrome.tabs.sendMessage(message.to, message.payload, sendResponse);
});
Content Script側で元のドキュメントに出力する:
// マニフェストの "content_scripts": [...] で指定したファイル内
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
var log = document.createElement('div');
log.innerHTML = JSON.stringify(message);
document.body.appendChild(log);
});
開発者ツール用拡張のドキュメントでもメッセージングAPIを使ういくつかのユースケースが解説されています。
直接console.logの履歴にアクセスする方法ではありませんが、Sinon.jsのようなテストフレームワークを使うと同様の事が出来そうです。
例えば、メソッドが呼ばれた時の引数や戻り値、エラーなどを監視するSpyを使うと、以下のような感じでconsole.logの引数に渡された文字列を取得できます(firstlogに"hoge"、secondlogに"moge"が入ります)。
var spy = sinon.spy(console, "log");
console.log("hoge");
console.log("moge");
var firstlog = spy.getCall(0).args[0];
var secondlog = spy.getCall(1).args[0];