Chrome: Get active tab console output?

Question

I'm creating a custom Chrome extension, which is going to retrieve data about an active tab before sending it to a secondary website.

I've been trying to find a method on how to retrieve the console output for an active tab. chrome.tabs.getSelected seemed promising at first, however, it doesn't offer an output of the console text. I've been digging for couple of hours without much success of finding a method that could give me this info.

Could anyone point me in the right direction please?

Edit:

As a way to keep track of everything I've tried so far, for myself and others, I will add info below.

I've found a possible solution which may work for me. The below code will extend the console methods log, error and warn. I'm currently researching for a method that maybe able to attach this code to the active tab, so I can collect the console outputs in the arrays and then make these available on my extension to be sent over to the secondary website.

I will post more info as I progress through it.

var logs = [],
    cLogs = [],
    cErrors = [],
    cWarns = [],
    _log = console.log,
    _error = console.error,
    _warn = console.warn;

console.log = function () {
    for (var i = 0; i < arguments.length; i++) {
        logs.push(arguments[i]);
        cLogs.push(arguments[i]);
    }

    _log.apply(this, arguments);
};

console.error = function () {
    for (var i = 0; i < arguments.length; i++) {
        logs.push(arguments[i]);
        cErrors.push(arguments[i]);
    }

    _error.apply(this, arguments);
};

console.warn = function () {
    for (var i = 0; i < arguments.length; i++) {
        logs.push(arguments[i]);
        cWarns.push(arguments[i]);
    }

    _warn.apply(this, arguments);
};

console.log('welcome');
console.error({'foobar': ['foo','bar']});
console.warn({'foo':'bar'});

_log(logs);

Answer 1

This issue is significantly harder than it appears.

APIs like chrome.tabs have no access to a tab's console. In fact, no "standard" API does.

One could expect a content script running in the context of the page to be able to access it. However, there's no way to access previous output of the console from a JavaScript context.

The method you quote in your update (creating wrappers around console.* functions) can only capture future invocations of those functions, and won't capture things like errors from the JS runtime itself (e.g. unhandled exceptions or network errors). As such, to access console from an arbitrary tab, you'll need to inject this code into every tab, before it loads, even if you only rarely use it.

It is further complicated by the fact that content scripts do not, in fact, run in the same context. To override console for the page itself, you'll need to inject the script in the page context.

So, to summarize:

1. You can do it by overriding console.* functions and listening to error event on window object, but it has to be done in page context by a document_start content script injecting code into every page. Extracting this data from the page context will be a challenge in itself.

   Downsides:

   • It hurts overall browser performance.
   • It won't see some browser-initiated messages that go directly to console.

2. You can take the big hammer and use chrome.debugger API. This API has the same level of access to the page as the Dev Tools themselves - therefore, it's possible to obtain the full console output history.

   Downsides:

   • You'll need to study the remote debugging protocol, see the official examples.
   • A very scary warning will be shown in all tabs when the debugger API is used.

All in all, what you're trying to achieve is a hard task with fragile solutions. Perhaps you need to rethink your approach.