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

【问题标题】：adding custom functionality into chrome's console在 chrome 的控制台中添加自定义功能
【发布时间】：2012-02-21 11:59:13
【问题描述】：

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

【问题讨论】：

也许你可以创建一个插件。控制台相对于当前页面工作，所以它应该是可行的。
感谢指点插件方向。让我们看看我是否“足够懒惰”来实际为那个包装器制作一个......

标签： javascript google-chrome console customization

【解决方案1】：

嗯，这很容易实现。您需要创建一个content script。该脚本将被注入任何页面并创建一些您将在控制台中使用的必要全局函数。最具挑战性的部分是如何使这些自定义内容脚本函数成为您实际 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 中使用它们。
也看看这个post

【讨论】：

你和铬摇滚！这真的是那么简单。我可以 echo("hello world!");五分钟后:)。

【解决方案2】：

今天，也许另一种方法是使用Chrome Snippets。它们允许您存储可以多次重复使用的自定义代码。

【讨论】：