如何将JavaScript注入Chrome DevTools本身

时间：2013-06-11 11:03:17

标签： google-chrome-extension google-chrome-devtools

好的，所以就在前几天我了解到你可以检查devtools是否在它自己的窗口中（解释here）。我还了解到，您可以通过编辑计算机配置文件中的Custom.css文件来使用您自己的css设置devtools样式（更多内容见here）。

我想做的不仅是通过Chrome扩展程序添加css，还可以添加javascript。我非常清楚devtools pages，但那些不符合我的要求。我想要在devtools检查器本身上运行一个内容脚本。我找到了一个完全正确的扩展，但对于我的生活，我无法复制它（即使复制粘贴代码!!）。扩展名是Code School的“Discover DevTools Companion扩展”（on the webstore）。他们甚至explain how it works，但我仍然没有运气。这是我发现的唯一可以实现我想要的扩展。所以我想我真正想问的是，如果它只是我不能让它起作用，或者其他人尝试也遇到麻烦。

1 个答案:

答案 0 :(得分：21)

通常，您无法创建在devtools页面中注入代码的Chrome扩展程序 ＆＃34;发现DevTools伴侣＆＃34;从现在开始扩展，称为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）。这可以通过将其清单文件的"key"密钥复制到您的扩展程序清单来实现（另请参阅：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.
})();

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

您也可以使用include_globs key将内容脚本仅限制为devtools，而不是通过内容脚本进行过滤。

方法2：修改resources.pak

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

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

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

    如果您有兴趣，可以在ui/base/resource/data_pack_literal.cc（description in human language）中查找.pak文件格式。

相关问题
最新问题