Google chrome extension 如何将javascript注入Chrome开发工具本身

好的，就在前几天，我了解到如果devtools在自己的窗口中，您可以检查它（解释）。我还了解到，通过在您的计算机上编辑概要文件中的Custom.css文件，您可以使用自己的css为devtools设置样式（更多信息）

---

我想做的不仅是添加css，还通过chrome扩展添加javascript。我很清楚，但这些并不是我想要的。我非常希望在devtools检查器本身上运行一个内容脚本。我找到了一个能做到这一点的扩展，但在我的一生中，我一直无法复制它（即使在复制粘贴代码时！！）。该扩展是Code School（）中的“Discover DevTools Companion extension”。他们甚至会，但我仍然没有运气。这是我找到的唯一能满足我需求的扩展。所以我想我真正想问的是，是不是只有我自己不能让它工作，还是其他尝试的人也有问题。

通常，你不能创建一个在devtools页面中注入代码的Chrome扩展。
从现在起，“Discover DevTools Companion”扩展（称为DDC）可以执行此操作，因为此扩展是：（不再是这种情况）

如果您想在Chrome网络商店中发布具有这些功能的扩展，请放弃。
如果要创建这样的扩展以供个人/内部使用，请进一步阅读

方法1：模拟DDC a白名单扩展 创建具有此类权限的扩展的最简单方法是使用白名单扩展的扩展ID（例如ChromeVox）创建扩展。这是通过将其清单文件的密钥复制到扩展名的清单中来实现的（另请参见：）。这是一个简单的例子：

manifest.json

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

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

方法2：修改

resources.pak

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

从（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更新时被替换，因此我建议创建一个脚本来自动执行我描述的算法。这应该不会太难

---

如果您感兴趣，可以在（）中查找

.pak

文件格式。

嗯，这解释了很多。非常感谢您提供了如此详细和布局良好的答案，我可能需要尝试这些方法供个人使用，再次感谢。对于任何想要查看Chromium源文件的人，它已经移动了DDC扩展名，但chromevox仍然存在，因此需要使用key

“migfma0gcsqgsib3dqebaquaa4gadcbiqkbgqdegbi/oD7Yl/Y16w3+gee/95/EUpRZ2U6c+8orV5ei+3CRsBsoXI/dpgbauz3rwq47aqnfog0sxxigfdja2nhnk9ogmra2vnsrrbjym2bg1twpallsgqppus3pyczbdvhfu8k4wzyetxlrfxagbsebp9qb4k2qgxd/czidaqab“

instead@auser谢谢你的提醒。它似乎在Chrome 44中被删除了。现在我们被迫使用扩展（

Custom.CSS

不再工作）注入CSS，这两个任务（注入CSS和JS）可以在一个扩展中完成吗？

// 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");

{
   // 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"
}

if (location.protocol === 'chrome-devtools:') (function() {
    'use strict';
    // Whatever you want to do with the devtools.
})();