Как вставить javascript в сам Chrome DevTools

Хорошо, поэтому на днях я узнал, что вы можете проверить devtools, если он находится в своем собственном окне (объясняется здесь). Я также узнал, что вы можете прикрепить devtools своим собственным css, отредактировав файл Custom.css в своем профиле на вашем компьютере (подробнее об этом здесь).

Что я хочу сделать, это не только добавить css, но и javascript через расширение chrome. Я очень хорошо знаю страницы devtools, но они не делают то, что я хочу. В основном я хочу, чтобы контент script запускался на самом инспекторе devtools. Я нашел одно расширение, которое делает именно это, но для жизни меня я не смог воспроизвести его (даже при копировании кода!). Расширение является расширением "Discover DevTools Companion" из Code School ( объясняют, как это работает, но мне все равно не повезло. Это было единственное расширение, которое я нашел, которое делает то, что я хочу. Поэтому я догадываюсь, что я действительно спрашиваю, если это только я, который не может заставить его работать, или если другие, у кого есть проблемы, также возникают проблемы.

Ответы

Ответ 1

Обычно вы не можете создать расширение Chrome, которое вводит код на странице devtools.
Расширение "Discover DevTools Companion" теперь называется DDC, так как это расширение whitelisted в исходном коде 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" файла манифеста в манифест расширения (см. Также: Как получить ключ?. Это минимальный пример:

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, оба расширения не могут сосуществовать. И если Chrome решит удалить добавление в белый список, ваши разрешения будут испаряться.

Вместо фильтрации через контент script вы также можете использовать include_globs key, чтобы ограничить содержимое script devtools only.

Способ 2: Изменить resources.pak

Я предлагаю пойти с методом 1, если это возможно. Когда метод 1 выходит из строя (например, поскольку расширение больше не включено в белый список), используйте следующий метод.

  • Получите paktools.py, unpack.py и pack.py из DennisKehrig/patch_devtools (на Github).
  • Найдите каталог Chrome, содержащий resources.pak.
  • Запустите python2 unpack.py resources.pak, который создает каталог resources, содержащий все файлы (все имена файлов - это номера).
  • Найдите файл, содержащий script, который выполняется в контексте инструментов разработчика. Добавьте туда нужный код.
  • Удалить resources.pak
  • Запустите python2 pack.py resources, чтобы создать новый resources.pak файл.

Примечание: resources.pak может быть заменен при обновлении Chrome, поэтому я предлагаю создать script, который автоматизирует мой описанный алгоритм. Это не должно быть слишком сложно.

Если вам интересно, вы можете посмотреть формат файла .pak в ui/base/resource/data_pack_literal.cc (описание на человеческом языке).