CODEWITHSUNDEEP
javascriptgoogle-chromedomgoogle-chrome-extensionconsole
Oliver Kucharzewski
Oliver Kucharzewski

Reputation: 2655

Accessing the console log commands via chrome extension

I'm looking to override the existing console commands via my Chrome extension - the reason for this is I wish to record the console logs for a specific site.

Unfortunately I cannot seem to update the DOM, this is what i've tried so far:

// Run functions on page change
chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
    var s = document.createElement('script');
    // TODO: add "script.js" to web_accessible_resources in manifest.json
    s.src = chrome.runtime.getURL('core/js/app/console.js');
    s.onload = function() {
        this.remove();
    };
    (document.head || document.documentElement).appendChild(s);
});

console.js

// Replace functionality of console log
console.defaultLog = console.log.bind(console);
console.logs = [];
console.log = function(){
    console.defaultLog.apply(console, arguments);
    console.logs.push(Array.from(arguments));
};

// Replace functionality of console error
console.defaultError = console.error.bind(console);
console.errors = [];
console.error = function(){
    console.defaultError.apply(console, arguments);
    console.errors.push(Array.from(arguments));
};

// Replace functionality of console warn
console.defaultWarn = console.warn.bind(console);
console.warns = [];
console.warn = function(){
    console.defaultWarn.apply(console, arguments);
    console.warns.push(Array.from(arguments));
};

// Replace functionality of console debug
console.defaultDebug = console.debug.bind(console);
console.debugs = [];
console.debug = function(){
    console.defaultDebug.apply(console, arguments);
    console.debugs.push(Array.from(arguments));
};

The script runs successfully with an alert().

The goal for me is to access console.logs - but its undefined which means I haven't gotten access to the DOM, despite injecting a script.

If not possible, even a third party integration would be helpful i.e. Java or C?

Any thoughts would be greatly appreciated :)

Upvotes: 2

Views: 2118

Answers (2)

Chcamiloam
Chcamiloam

Reputation: 594

I found this post and I think Tampermonkey injects a script with the immediate function that you add in the Tampermonkey Chrome extension page, I found something similar in extensions like Wappalyzer, and looks good and safe, you could use WebRequest to inject to your website the new "polyfill" before the page is fully loaded as the post says.

Here the example of Wappalyzer that I mentioned before, this is the JS load in StackOverflow with Wappalyzer using the code injection, I didn't test it with Tampermonkey yet

enter image description here

EDIT

Checking Wappalyzer, how to inject the code is the easy part, you can use (Wappalyzer github example):

const script = document.createElement('script')
script.setAttribute('src', chrome.extension.getURL('js/inject.js'))

This probably will not fix your problem, this code is executed after all the content was loaded in the DOM. But, you can find how to fix that problem in this post

I'll suggest to use onCommitted event (doc1/doc2)

Using the mozilla.org example you will have something like

 const filter = {
  url: //website to track logs
  [
    {hostContains: "example.com"},
    {hostPrefix: "developer"}
  ]
}

function logOnCommitted(details) {
  //Inject Script on webpage
}

browser.webNavigation.onCommitted.addListener(logOnCommitted, filter);

Upvotes: 5

Spatz
Spatz

Reputation: 20158

It might be worth trying to redefine the entire console object:

const saved = window.console
window.console = {...saved, log: function(...args){ saved.log("Hello", ...args) }}

But it's probably impossible, because content scripts live in an isolated world:

Isolated worlds do not allow for content scripts, the extension, and the web page to access any variables or functions created by the others. This also gives content scripts the ability to enable functionality that should not be accessible to the web page.

Although in Tampermonkey this script works.
I believe Tampermonkey handles this by knowing the subtleties and tracking changes in the extensions host's protection mechanism.

BTW, for small tasks, there is a decent alternative to chrome extensions in the form of code snippets.

Upvotes: 1

Related Questions