In Creating Google Chrome Extensions, can we send message or any data from devtools.js to content script without opening the DevTools?

[cabaisma]

I’m building a chrome extension and that includes the following scenario in order to achieve my goal.

• I want to send info from devtools.js to content script even the DevTools is close or not open. Is it possible?! Because in the documentation, devtools.html or any script attached to it are called or executed when the DevTools is opened.

• How to access Console Tab , Network Tab and other tabs then pass the information to the content script?

Is there a way to achieve these two points?

[kylec]

In short, yes.
You can send message back and forth with the content script via the usual message passing methods. You can access DevTools panels via the devtools extension API.

[cabaisma]

Thanks for your reply @kylec i appreciate it. But my question is can I use that devtools extention API even i didn’t open the chrome devtools itself?

For example I want to pass the data output using console.log to content script and display it in the page. How can I achieve that?

Just to give more example:

Example a user installed my extension, then he is developing some web application and he run a console.log() somewhere in his/her code, then that result log, how can I catch that and display in the script that i injected. basically when we console.log a variable in our code we open that devtools and see that log. But here i want to display the output log in the screen when the pages is loaded.

I hope it make sense.
Thanks in advance,

[kylec]

You can use the devtools extension API without having devtools open.

I’m not entirely sure I understand your use case but it’s possible you might be able to use the devtool extension API for window inspection to grab what you need from the console. I’ve never tried it though.
I’m not sure it would be considered good practice, but you could also try injecting a script to modify the console object of the page to do what you need it to. Like what is demonstrated here.

["log", "error", "info", "warn"].forEach( (cmdKey) => {
    const cmd = window.console[cmdKey].bind(window.console);
    window.console[cmdKey] = (...args) => {
        cmd(...args);
        // Do your API messaging or page modifications here
    }
})

You would likely need to set the scripts run_at attribute to document_start so that any console actions on DOM load would use your modified console version.