在chrome的控制台中添加自定义功能

Question

是否可以在google-chrome中使用自定义功能,这些功能将始终在控制台中可用(无论加载哪个页面)？例如,我想有一个名为echo的函数,它只是console.log的一个包装器.这只是节省了一些输入,但后来我可能想要创建一些有用的调试功能.

Answer 1

这很容易实现.您需要的是创建内容脚本.此脚本将在任何页面中注入,并创建一些您将在控制台中使用的必要全局函数.最具挑战性的部分是如何使这些自定义内容scrtipt函数成为您实际window对象的一部分,因为通常您无法访问内容脚本中定义的函数或变量,而不是内容脚本中的其余javascript代码.内容脚本在所谓的隔离环境中运行.

内容脚本在称为孤立世界的特殊环境中执行.他们可以访问注入页面的DOM,但不能访问页面创建的任何JavaScript变量或函数.它将每个内容脚本视为在其运行的页面上没有执行其他JavaScript.反过来也是如此:页面上运行的JavaScript无法调用任何函数或访问内容脚本定义的任何变量.

但是有一些奇特的解决方法.
您可以按如下方式定义清单文件:

的manifest.json

{
    "name": "Content script",
    "version": "0.1",
    "manifest_version": 2,
    "content_scripts": [{
        "matches": ["http://*/*"],
        "js": ["console.js"]
    }]
}

而你的内容脚本:

console.js

function customConsole() {
    window.myNewFunction = function() {
        console.log("Hello I'm available from console.");
    };
}

var script = document.createElement('script'),
    code   = document.createTextNode('(' + customConsole + ')();');
script.appendChild(code);
(document.body || document.head || document.documentElement).appendChild(script);

因此,您将新函数指定为全局函数,以便可以使用它们console.
另外看看这篇文章