I'm going to show you what's on the chrome console and what's on the console (iframe). I'd like to put it in a variable as a string and output it to html. What are the options?
Thank you for your cooperation.
javascript google-chrome-devtools
Here are some tips for not using the library.
The iframe DOM node has an object called contentWindow
.
This is the same as the window
in iframe.
When some conditions are met from the outside frame
You can rewrite the inside of this contentWindow
Once you have used this to replace contentWindow.console.log
and others with another function,
You can see the output (full history) from within iframe to console.log
from the outside.
The approximate code looks like this.
// Obtain the first iframe in the sentence.You ought to change your approach as necessary.
var firstFrame = document.getElementsByTagName('iframe')[0];
firstFrame.contentWindow.console.log=function(){
// TODO:logging arguments as history
}
Some conditions are approximately as follows, and should only be rewritable if all of them are met.(Not verified)
Reference: About Inline Frames - JavaScript Programming Course
If you can put any JavaScript in the content inside iframe,
There is also a way to deal with different origin situations.
It is a way to use parent.postMessage
.
The explanation is to show a simple code, but it looks like the following: Also, the code does not include calls from online. If necessary, supplement as appropriate.
console.log=function(){
parent.postMessage(JSON.stringify(arguments), '*')
}
window.addEventListener("message", receiveMessage, false);
function receiveMessage(ev){
// Verify the message is from the expected origin
if(ev.origin==='http://example.org/'){
// record in one's history
}
}
From Google Chrome extensions, you can access console history using the chrome.experimental.devtools.console API.
This API is only available from within the developer tool and should be written as an extension to the developer tool.And the restriction is that you need to open the developer tool to get the logs.It is also an experimental API, so you need to manipulate the browser settings to allow it to be used.The flow is:
Include experimental permissions in manifest.json and specify HTML files in devtools_page
...
"permissions": [
"experimental"
],
"devtools_page": "devtools.html",
...
Using the Historical API for Scripts referenced by devtools.html
appears in
Using the messaging API, you can print from within the developer tool to the original document:
Send a message from a script referenced by devtools.html:
//<script src="devtools.js"></script>, and so on.
chrome.experimental.devtools.console.onMessageAdded.addListener(function(message){
chrome.runtime.sendMessage({
"to": chrome.devtools.inspiredWindow.tabId,
"payload": message
});
});
Receive with the script Event Page and relay to Content Script:
//In the file specified in the manifest "background": {"scripts":[...]}
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
chrome.tabs.sendMessage(message.to,message.payload,sendResponse);
});
Content Script prints to original document:
//In the manifest "content_scripts": In the file specified by [...]
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
var log = document.createElement('div');
log.innerHTML = JSON.stringify(message);
document.body.appendChild(log);
});
The Advanced Developer Tool documentation also covers several use cases using the messaging API.
This is not a direct way to access console.log history, but using a test framework like Sinon.js seems to do the same.
For example, Spy, which monitors arguments, return values, errors, and so on when a method is called, can retrieve the string passed to the console.log argument (firstlog contains "hoge" and secondlog contains "moge" as follows:
varspy=sinon.spy(console, "log");
console.log("hoge");
console.log("moge");
var firstlog = spy.getCall(0).args[0];
varsecondlog=spy.getCall(1).args[0];
© 2024 OneMinuteCode. All rights reserved.