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

问题描述

好的，就在前几天我才知道你可以检查devtools是否在它自己的窗口中（解释这里）。我还了解到，您可以通过在计算机上的配置文件中编辑Custom.css文件来使用自己的CSS对devtools进行样式设置（更多信息请参见

我想要做的不仅是添加css，还有javascript，通过Chrome扩展。我非常了解 devtools网页，但那些网站并没有按照我的意愿去做。几乎我想要一个内容脚本在devtools检查器本身上运行。我发现了一个扩展，它完全符合这一点，但对于我来说，我一直无法复制它（即使在复制粘贴代码时也是如此!!）。扩展是发现DevTools伴侣延伸，从学校的代码（上网络商店）。他们甚至解释它是如何工作的，但我仍然没有运气。这是我发现的唯一的扩展，做我想要的。所以我想我真正要问的是，如果它只是我，不能让它工作，或者如果其他人尝试也有麻烦。

解决方案通常，您无法创建在devtools页面中注入代码的Chrome扩展程序。

从现在开始，Discover DevTools Companion扩展程序^称为DDC 可以执行此操作，因为此扩展程序是中的铬中的源代码列入白名单：（这是不再的情况下）的

  //白名单从Google发现DevTools Companion的扩展名为
 //需要能够对DevTools页面进行脚本编写。 Companion将协助
 //在线课程，并在线上教育课程
 //到位时需要。 
 scripting_whitelist_.push_back（angkfkebojeancgemegoedelbnjgcgme）; 
  

如果您想在Chrome网上应用店中发布扩展程序这些功能，放弃。

如果你想创建一个这样的扩展为个人/内部使用，进一步阅读。

方法1：模拟< s> DDC 列入白名单的扩展程序

使用此类权限创建扩展程序的最简单的方法是使用白名单扩展名的扩展名（例如ChromeVox）。这是通过复制 key 清单文件的关键字添加到您的扩展程序的清单中（另请参阅：如何获得密钥？）。这是一个小例子：
$ b

manifest.json

  {
 //警告：如果您使用ChromeVox，请勿加载此扩展程序！ 
 //警告：如果您使用ChromeVox，请勿加载此扩展程序！ 
 //警告：这是一个非常大的锤子。 
content_scripts：[{
js：[run_as_devtools.js]，
matches：[< all_urls> ] 
}]，
 //这是kgejglhpjiefppelpmljglcjbhoiplfn密钥（是ChromeVox）
 的键：MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDEGBi / oD7Yl / Y16w3 +吉/ 95 / EUpRZ2U6c + 8orV5ei + 3CRsBsoXI / DPGBauZ3rWQ47aQnfoG00sXigFdJA2NhNK9OgmRA2evnsRRbjYm2BG1twpaLsgQPPus3PyczbDCvhFu8k24wzFyEtxLrfxAGBseBPb9QrCz7B4k2QgxD / CwIDAQAB，
manifest_version：2，
name：高级Devtools扩展，
version：1.0
} 
  

run_as_devtools.js

  if（location.protocol ==='chrome-devtools：'）（function（）{
'use strict'; 
 //无论您想要什么关于devtools。
}）（）; 
  

注意：这种方法确实是一种破解。由于延伸股相同的ID 的ChromeVox 时，这两个扩展不能并存。如果Chrome决定删除已列入白名单的扩展程序，那么您的权限将会消失。

您也可以使用 include_globs 键将内容脚本限制为devtools。方法2：修改 resources.pak

如果可能，我建议采用方法1。当方法1失败时（例如因为扩展名不再列入白名单），使用下一个方法。 .py ， unpack.py 和 pack.py from DennisKehrig / patch_devtools （在Github）

找到包含在Chrome目录 resources.pak 。

运行 python2 unpack.py resources.pak resources 包含所有文件（所有文件名均为数字）。 找到包含在开发人员上下文中运行的脚本的文件工具。

删除 resources.pak

运行 python2 pack.py资源来创建新的 resources.pak 文件。

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

如果您有兴趣，可以在 .pak 文件格式：//code.google.com/p/chromium/codesearch#search/& q = ui / base / resource / data_pack_literal.cc& sq = package：chromium& type = csrel =nofollow noreferrer> ui / base / resource / data_pack_literal.cc （在人类语言中的描述）。

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

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.

解决方案

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

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.

Method 1: Impersonate the DDC a whitelisted extension

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:

manifest.json

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

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.

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

Method 2: Modify resources.pak

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. 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.

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.

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屋！