How can I use a Chrome browser extension to monitor and parse the output in the devtools console?

Question

I am building a chrome extension that is supposed to aid in the debugging of software that runs on top of a website. This software can have a debug mode enabled that will cause a lot of output to the console using console.log.

I want to use my chrome extension to parse the console messages and show the important events in the UI for quicker debugging. However, I am not seeing a way to simply do this with the API. Is there something I am missing? Should I override the console.log function? How would I go about doing that?

Answer 1

There are two methods.

• Override console.log, console.warn, and so on, in page context (this is important!). There are lots of examples (here's a random one). In your case it'll be even simpler as you'll just call the original method and transfer the arguments via CustomEvent to your content script (example), which will accumulate them.
• Use chrome.debugger API with Console.messageAdded or Runtime.consoleAPICalled events. This will show a message bar in the entire browser about debugger being active unless you hide it globally by running chrome with --silent-debugger-extension-api command line, but that's somewhat dangerous if you accidentally install a malicious extension that uses chrome.debugger API.