如何将JavaScript注入到Chrome DevTools本身中

Question

如何将JavaScript注入到Chrome DevTools本身中

google-chrome-extensiongoogle-chrome-devtools

12

好的，就在前几天我了解到如果开发者工具是独立窗口（这里有解释），你可以检查它。我还了解到，通过编辑计算机上个人资料中的Custom.css文件，你可以使用自己的CSS样式来设置开发者工具（更多信息在此处）。

我想做的不仅是通过Chrome扩展程序添加CSS，还有JavaScript。我非常了解devtools pages，但它们不能满足我的需求。实际上，我想让内容脚本在devtools检查器本身上运行。我找到了一个可以完全实现这一点的扩展，但是我无论如何都无法复制它（即使复制粘贴代码！）。该扩展名为“Discover DevTools Companion extension”，来自Code School（on the webstore）。他们甚至explain how it works，但我仍然没有成功。那是我找到的唯一一个符合我的要求的扩展。所以我想问的是，是不是只有我无法让它工作，还是其他人也遇到了麻烦。

- janka102

2个回答

0

对于那些像我一样误打误撞来到这个页面的谷歌用户，这个页面回答了如何操作DevTools本身的问题 - 而不是将jQuery添加到DevTools中，或者将JavaScript注入到网页中。对于那些问题，请参见以下链接：

将jQuery注入到DevTools（Chrome或Firefox）：
Firefox DevTools：自动注入jQuery

将您自己的JavaScript / CSS注入到任何网页中：
如何编辑网站的背景颜色

- cssyphus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob W · Accepted Answer

通常情况下，您无法创建一个Chrome扩展程序，可以向开发者工具页面注入代码。
“发现开发者工具伴侣”扩展程序（以下简称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 Web Store发布具备这些功能的扩展，那就放弃吧。
如果你想要为个人或内部使用创建这样的扩展，请继续阅读。

方法1：冒充白名单扩展

创建一个具有这些权限的扩展最简单的方法是创建一个扩展，并将其扩展ID设置为白名单扩展的ID（例如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 key来将内容脚本限制为仅在开发工具中使用。

方法二：修改`resources.pak`

如果可能，请使用方法1。当方法1失败时（例如因为扩展不再在白名单中），请使用下一个方法。

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

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

如果您感兴趣，可以在ui/base/resource/data_pack_literal.cc中查找.pak文件格式（用人类语言描述的内容）。

如何将JavaScript注入到Chrome DevTools本身中

方法1：冒充白名单扩展

manifest.json

run_as_devtools.js

方法二：修改resources.pak

`manifest.json`

`run_as_devtools.js`

方法二：修改`resources.pak`