11

好的，就在前几天我了解到，如果 devtools 在其自己的窗口中，您可以检查它（在此处解释）。我还了解到，您可以通过在计算机上编辑个人资料中的 Custom.css 文件来使用自己的 css 设置 devtools 的样式（更多信息请参见此处）。

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

4

1 回答 1

22

通常，您无法创建在 devtools 页面中注入代码的 Chrome 扩展程序。
从现在开始的“Discover DevTools Companion”扩展，简称为 DDC 被允许这样做，因为这个扩展在 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"其清单文件的密钥复制到您的扩展程序清单来实现的（另请参阅：如何获取密钥？）。这是一个最小的例子：

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密钥将内容脚本限制为仅 devtools。

方法二：修改resources.pak

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

  1. 从DennisKehrig/patch_devtools（在 Github 上）获取paktools.py,unpack.py和。pack.py
  2. 找到包含resources.pak.
  3. Run 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

于 2013-06-11T12:43:32.627 回答