如何将 javascript 注入 Chrome DevTools 本身 [英] How to inject javascript into Chrome DevTools itself

问题描述

好的，所以就在前几天我了解到你可以检查 devtools 如果它在它自己的窗口中(解释 此处).我还了解到，您可以通过在计算机上的个人资料中编辑 Custom.css 文件来使用自己的 css 来设置 devtools 的样式(更多关于 这里).

Ok, so just the other day I learned that you can inspect the devtools if it is in its own window(explained here). I also learned that you can style the devtools with your own css by editing the Custom.css file in your profile on your computer(more on that here).

我想要做的不仅是通过 chrome 扩展添加 css，还有 javascript.我非常了解 devtools 页面，但这些页面不符合我的要求.我几乎想得到一个内容脚本来在 devtools 检查器本身上运行.我找到了一个可以做到这一点的扩展，但在我的一生中，我一直无法复制它(即使是复制粘贴代码！！).该扩展是来自 Code School(在网店).他们甚至解释它是如何工作的，但我仍然没有运气.这是我发现的唯一一个可以满足我想要的扩展.所以我想我真正要问的是是否只有我无法使其正常工作，或者其他尝试的人是否也遇到了问题.

What I want to do is not only add css, but also javascript, via a chrome extension. I am very aware of devtools pages, but those do not do what I want. Pretty much I want to get a content script to run on the devtools inspector itself. I found one extension that does exactly this, but for the life of me I have not been able to replicate it(even when copy-pasting the code!!). The extension is the "Discover DevTools Companion extension" from Code School(on the webstore). They even explain how it works, but I still have had no luck. That was the only extension I have found that does what I want. So I guess what I'm really asking is if its just me that cannot get it to work or if others that try are having trouble also.

推荐答案

通常，您无法创建在开发工具页面中注入代码的 Chrome 扩展程序.
Discover DevTools Companion"扩展^{从现在开始，称为DDC} 被允许这样做，因为这个扩展是在源代码中列入白名单Chromium:(情况不再如此)

Usually, you cannot create a Chrome extension which injects code in a devtools page.
The "Discover DevTools Companion" extension ^{from now on, referred to as DDC} is allowed to do this, because this extension is whitelisted in the source code of Chromium: (this is no longer the case)

// Whitelist "Discover DevTools Companion" extension from Google that
// needs the ability to script DevTools pages. Companion will assist
// online courses and will be needed while the online educational programs
// are in place.
scripting_whitelist_.push_back("angkfkebojeancgemegoedelbnjgcgme");

如果您想在 Chrome 网上应用店中发布具有这些功能的扩展程序，请放弃.
如果您想创建这样的扩展供个人/内部使用，请进一步阅读.

If you want to publish an extension in the Chrome Web Store with these capabilities, give up.
If you want to create such an extension for personal / internal use, read further.

创建具有此类权限的扩展程序的最简单方法是使用列入白名单的扩展程序(例如 ChromeVox)的扩展程序 ID 创建扩展程序.这是通过复制其 "key" 键来实现的清单文件到您的扩展程序清单(另请参阅:如何获取密钥?).这是一个最小的例子:

The easiest way to create an extension with such permissions is to create an extension with the extension ID of a whitelisted extension (e.g. ChromeVox). This is achieved by copying the "key" key of its manifest file to your extension's manifest (see also: How to get the key?). This is a minimal example:

{
   // WARNING: Do NOT load this extension if you use ChromeVox!
   // WARNING: Do NOT load this extension if you use ChromeVox!
   // WARNING: This is a REALLY BIG HAMMER.
   "content_scripts": [{
      "js": [ "run_as_devtools.js" ],
      "matches": [ "<all_urls>" ]
   }],
   // This is the key for kgejglhpjiefppelpmljglcjbhoiplfn (ChromeVox)
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDEGBi/oD7Yl/Y16w3+gee/95/EUpRZ2U6c+8orV5ei+3CRsBsoXI/DPGBauZ3rWQ47aQnfoG00sXigFdJA2NhNK9OgmRA2evnsRRbjYm2BG1twpaLsgQPPus3PyczbDCvhFu8k24wzFyEtxLrfxAGBseBPb9QrCz7B4k2QgxD/CwIDAQAB",
   "manifest_version": 2,
   "name": "Elevated Devtools extension",
   "version": "1.0"
}

run_as_devtools.js

if (location.protocol === 'chrome-devtools:') (function() {
    'use strict';
    // Whatever you want to do with the devtools.
})();

注意:这个方法确实是一个黑客.由于扩展程序与 ChromeVox 共享相同的 ID，因此两个扩展程序不能共存.如果 Chrome 决定删除列入白名单的扩展程序，那么您的权限就会消失.

Note: This method is truly a hack. Since the extension shares the same ID as ChromeVox, both extensions cannot co-exist. And if Chrome decides to remove the whitelisted extension, then your permissions will evaporate.

除了通过内容脚本过滤之外，您还可以使用 include_globs 键 将内容脚本限制为仅限 devtools.

Instead of filtering via the content script, you can also use the include_globs key to restrict the content script to devtools only.

如果可能，我建议使用方法 1.当方法 1 失败时(例如，因为扩展程序不再被列入白名单)，使用下一个方法.

I suggest to go with method 1 if possible. When method 1 fails (e.g. because the extension is no longer whitelisted), use the next method.

1. 从 DennisKehrig/patch_devtools(在 Github 上).
2. 找到包含 resources.pak 的 Chrome 目录.
3. 运行python2 unpack.py resources.pak，这会创建一个目录resources，其中包含所有文件(所有文件名都是数字).
4. 找到包含在开发人员工具上下文中运行的脚本的文件.在那里添加您想要的代码.
5. 删除resources.pak
6. 运行 python2 pack.py resources 以创建新的 resources.pak 文件.

1. Get paktools.py, unpack.py and pack.py from DennisKehrig/patch_devtools (on Github).
2. Locate your Chrome directory containing resources.pak.
3. Run python2 unpack.py resources.pak, which creates a directory resources containing all files (all file names are numbers).
4. Locate the file containing a script which runs in the context of the developer tools. Add your desired code there.
5. Remove resources.pak
6. Run python2 pack.py resources to create the new resources.pak file.

注意:resources.pak 可能会在 Chrome 更新时被替换，因此我建议创建一个脚本来自动执行我所描述的算法.那应该不会太难.

Note: resources.pak may be replaced when Chrome is updated, so I suggest to create a script which automates my described algorithm. That shouldn't be too difficult.

如果您有兴趣，可以在 ui/base/resource/data_pack_literal.cc (人类语言描述).

If you're interested, you can look up the .pak file format in ui/base/resource/data_pack_literal.cc (description in human language).

这篇关于如何将 javascript 注入 Chrome DevTools 本身的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！