如何将JavaScript注入Chrome DevTools本身

Question

好的,所以就在前几天我了解到你可以检查devtools是否在它自己的窗口中(在这里解释).我还了解到,您可以通过编辑计算机配置文件中的Custom.css文件,使用您自己的css设置devtools的样式(此处更多内容).

我想做的不仅是通过chrome扩展添加css,还有javascript.我非常了解devtools页面,但那些没有做我想要的.我想要在devtools检查器本身上运行一个内容脚本.我找到了一个完全正确的扩展,但对于我的生活,我无法复制它(即使复制粘贴代码!!).扩展名是Code School的"Discover DevTools Companion扩展"(在网上商店).他们甚至解释它是如何工作的,但我仍然没有运气.这是我发现的唯一可以实现我想要的扩展.所以我想我真正想问的是,如果它只是我不能让它工作,或者其他人尝试也遇到麻烦.

Answer 1

通常,您无法创建在devtools页面中注入代码的Chrome扩展程序.^{从现在开始,称为DDC}
的"Discover DevTools Companion"扩展允许执行此操作,因为此扩展在Chromium的源代码中列入白名单 :(不再是这种情况)

// 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网上应用店中发布扩展程序,请放弃.
如果您想为个人/内部使用创建此类扩展,请进一步阅读.

方法1:将DDC模拟为白名单扩展

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

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

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

您也可以使用include_globs密钥将内容脚本限制为仅进行排序,而不是通过内容脚本进行过滤.

方法2:修改 resources.pak

如果可能的话,我建议采用方法1.当方法1失败时(例如,因为扩展名不再列入白名单),请使用下一个方法.

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

注意:resources.pakChrome更新后可能会被替换,因此我建议创建一个自动执行我所描述算法的脚本.这不应该太困难.

如果您有兴趣,可以.pak在ui/base/resource/data_pack_literal.cc(人类语言描述)中查找文件格式.