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

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

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

9
google-chrome-devtools google-chrome-extension

1 ответов

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

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

Метод 2: Изменить resources.pak

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

  1. Get paktools.py, unpack.py и pack.py С 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 может быть заменен при обновлении Chrome, поэтому я предлагаю создать скрипт, который автоматизирует мой описанный алгоритм. Это не должно быть слишком сложно.

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

20