通过 chrome 扩展访问控制台日志命令

Question

我希望通过我的 Chrome 扩展覆盖现有的控制台命令 - 这样做的原因是我希望记录特定站点的控制台日志。

不幸的是，我似乎无法更新 DOM，这是我迄今为止尝试过的方法：

// 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));
};

脚本成功运行并发出 alert()。

我的目标是访问 console.logs - 但它未定义，这意味着我无法访问 DOM，尽管注入了脚本。

如果不可能，即使是第三方集成也会有所帮助，即 Java 或 C?

如有任何想法，我们将不胜感激:)

Answer 1

可能值得尝试重新定义整个控制台对象：

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

但这可能是不可能的，因为内容脚本存在于一个孤立的世界中：

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.

尽管在 Tampermonkey 中此脚本有效。
我相信 Tampermonkey 通过了解扩展主机保护机制的细微差别和跟踪变化来处理这个问题。

顺便说一句，对于小型任务，chrome 扩展有一个不错的替代方案，形式为 code snippets。

Answer 2

我发现这个 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 在页面完全加载之前向您的网站注入新的“polyfill”，如 post 所说。

这里是我之前提到的Wappalyzer的例子，这是在Whosebug中使用Wappalyzer使用代码注入加载JS，我还没有用Tampermonkey测试它

编辑

检查Wappalyzer，如何注入代码是比较容易的部分，你可以使用(Wappalyzer github example):

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

这可能无法解决您的问题，此代码在 DOM 中加载所有内容后执行。但是，您可以在 post

中找到解决该问题的方法

我建议使用 onCommitted 事件 (doc1/doc2)

使用 mozilla.org 示例，您将得到类似

的内容

 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);

通过 chrome 扩展访问控制台日志命令

Accessing the console log commands via chrome extension

javascript

console

dom

google-chrome

google-chrome-extension