Использование расширения Chrome для вставки CSS в инспектор документов

Question

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

РЕЗУЛЬТАТ: Изучив документацию Match Pattern , я заметил, где я ошибся, раздел схемы очень строг в отношении того, какие URL-адреса он допускает, и "chrome-devtools" не является одним из них.

UPDATE: Итак, после нескольких часов работы я решил использовать экспериментальный API для создания новой панели в Инспекторе, но все еще не повезло с тем, чтобы внедрить css в его родительский элемент.

Answer 1

Теперь есть способ сделать это, но не через Chrome Extensions.

Вы можете поместить стили в Custom.css, который запускается на каждой странице, плюс селектор (#-webkit-web-inspector), который должен быть достаточно уникальным для инспектора.

http://darcyclarke.me/design/skin-your-chrome-inspector/

Answer 2

Я не думаю, что Webkit позволяет вам внедрять CSS или Javascript в инструменты разработчика. Существует экспериментальный API для Chrome, который позволяет добавлять вкладки и некоторые другие вещи: http://code.google.com/chrome/extensions/trunk/experimental.devtools.html

Answer 3

В настоящее время нет способа настроить Chrome DevTools CSS с помощью API расширений.Однако для этого есть особый запрос - вы можете отследить эту проблему: http://crbug.com/83030 На данный момент единственным вариантом будет иметь локально измененную копию DevTools, как описано здесь: http://code.google.com/chrome/devtools/docs/contributing.html

Answer 4

У вас есть "all_frames", установленный в манифесте, и используете ли вы правильные разрешения URL? Блок кода для инструментов разработки:

<a href="chrome-devtools://devtools/devTools.css"
class="webkit-html-resource-link"
title="chrome-devtools://devtools/devTools.css" style="max-width: 100%;
" line_number="1828" preferred_panel="resources">devTools.css:1828</a>