google-chrome-extension - 如何将 javascript 注入(inject) Chrome DevTools 本身

Question

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

我想要做的不仅是通过 chrome 扩展添加 css，还添加 javascript。我很清楚devtools pages ，但那些不做我想要的。我非常想获得一个在 devtools 检查器本身上运行的内容脚本。我找到了一个完全可以做到这一点的扩展，但在我的一生中，我无法复制它(即使复制粘贴代码!!)。该扩展是来自 Code School (on the webstore) 的“Discover DevTools Companion 扩展”。他们甚至 explain how it works ，但我仍然没有运气。这是我发现的唯一可以满足我要求的扩展。因此，我想我真正要问的是，是否只有我无法使其正常工作，或者其他尝试的人是否也遇到了麻烦。

Answer 1

通常，您无法创建在 devtools 页面中注入(inject)代码的 Chrome 扩展程序。
从现在开始，“Discover DevTools Companion”扩展，简称为 DDC 被允许这样做，因为这个扩展是 whitelisted in the source code of 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)的扩展程序 ID 创建一个扩展程序。这是通过复制 "key" 来实现的。其 list 文件的 key 到您的扩展 list (另请参见: How to get the 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.
})();

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

除了通过内容脚本过滤，您还可以使用 include_globs key将内容脚本限制为仅 devtools。

方法二:修改 resources.pak
如果可能的话，我建议使用方法1。当方法 1 失败时(例如，因为扩展不再被列入白名单)，使用下一个方法。

获取 paktools.py , unpack.py和 pack.py来自 DennisKehrig/patch_devtools (在 Github 上)。

找到包含 resources.pak 的 Chrome 目录.

运行python2 unpack.py resources.pak ，创建一个目录 resources包含所有文件(所有文件名都是数字)。

找到包含在开发人员工具上下文中运行的脚本的文件。在那里添加您想要的代码。

删除 resources.pak

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

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

有兴趣的可以查 .pak ui/base/resource/data_pack_literal.cc 中的文件格式( description in human language)。