Как внедрить JavaScript в сам Chrome DevTools

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

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

Источник

2 ответа

Решение

Обычно вы не можете создать расширение Chrome, которое внедряет код на странице devtools.
Расширение "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 Web Store с этими возможностями, откажитесь.
Если вы хотите создать такое расширение для личного / внутреннего использования, читайте дальше.

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

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

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

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

  1. Получить paktools.py, unpack.py а также pack.py от https://github.com/DennisKehrig/patch_devtools (на Github).
  2. Найдите каталог Chrome, содержащий resources.pak,
  3. Бежать python2 unpack.py resources.pak, который создает каталог resources содержащий все файлы (все имена файлов являются числами).
  4. Найдите файл, содержащий скрипт, который запускается в контексте инструментов разработчика. Добавьте желаемый код там.
  5. Удалить resources.pak
  6. Бежать python2 pack.py resources создать новый resources.pak файл.

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

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

Источник

Для тех гуглеров, которые заканчивают эту страницу (как и я) в поисках чего-то другого, эта страница отвечает на вопрос о том, как манипулировать САМИМ DevTools, а не добавлять jQuery в DevTools или внедрять javaScript на веб-страницу. Для тех, см. здесь вместо этого:

Внедрение jQuery в DevTools (Chrome или Firefox):
Firefox DevTools: автоматическое внедрение jQuery

Добавьте свой собственный javascript/css на любую веб-страницу:
как изменить цвет фона веб-сайта

Источник
Другие вопросы по тегам