Как просмотреть таблицу стилей css, введенную расширением Google Chrome, с помощью инструментов разработчика?

Я вставляю файл css из моего расширения Chrome, используя manifest.json (полный источник):

  "content_scripts": [
    {
      "matches": [
        "http://*/*"
      ],
      "css":["src/inject/gfi_extension.css"],
      "js": [/*...*/]
    }
  ]

В Chrome Dev Tools, если я проверяю элемент, на который влияет внедренный css, правила видны, но в правом верхнем углу, где обычно должно быть имя исходного файла, он просто говорит «внедренная таблица стилей». Я хотел бы просмотреть ВСЕ введенные правила, даже те, которые влияют на элементы, которых в настоящее время нет в DOM.

Я ожидал, что .css появится в «источниках» в «скриптах контента» с файлами .js, но их там нет.

Есть ли способ просмотреть файл .css с помощью инструментов разработчика? Если нет, объясните, почему нет.

Изменить: я только что обнаружил, что этот вопрос также отображается как «подвопрос» этот, однако никто там не пытался ответить на него, хотя есть принятый ответ.


user-interface google-chrome-extension google-chrome-devtools manifest file-browser
person foobarbecue    schedule 09.02.2015    source источник
comment
Модули API chrome.devtools.* доступны только для страниц, загружаемых в окне DevTools. Сценарии контента и другие страницы расширения не имеют этих API. Таким образом, API доступны только в течение всего времени существования окна DevTools. Подробнее см. по ссылке: developer.chrome.com/extensions/devtools.   -  person Dayton Wang    schedule 09.02.2015
comment
gui47, спасибо, но я все равно не понимаю. Почему я вижу внедренные файлы .js, но не вижу .css? Это потому, что css каким-то образом вводится вне времени жизни окна DevTools? Кроме того, если у вас есть ответ, опубликуйте его как ответ!   -  person foobarbecue    schedule 10.02.2015
comment
Вы можете увидеть вложенный файл.js под тегом сценариев содержимого, потому что сценарии содержимого запускаются в контексте веб-страниц, которые находятся внутри окна DevTools. Хотя, как вы упомянули, css не проходит через все время существования окна DevTools.   -  person Dayton Wang    schedule 10.02.2015
comment
Хорошо, спасибо ... это мой голос за ваш комментарий, потому что вы пытаетесь помочь, и кажется, что, возможно, вы имеете смысл, но я все еще не совсем понимаю. Я имею в виду, очевидно, что DevTools может получить доступ к вещам, которые загружены и применены к DOM задолго до того, как DevTools был открыт, например к обычным файлам css. Так почему же Chrome просто не применяет его как обычный файл css?   -  person foobarbecue    schedule 10.02.2015
comment
Согласно документации Match Pattern, возможно, это связано с тем, что раздел схемы очень строг в отношении того, какие URL-адреса он разрешает, и chrome-devtools не входит в их число. developer.chrome.com/extensions/match_patterns   -  person Dayton Wang    schedule 10.02.2015
comment
Ни одно из ваших объяснений не объясняет тот факт, что внедренный .js появляется, а внедренный .css - нет. Поэтому ваши объяснения неверны. Хотел бы я, чтобы вы ясно дали понять, что вы просто догадываетесь - это сэкономило бы мне много времени, пытаясь понять, что вы имеете в виду!   -  person foobarbecue    schedule 11.02.2015
comment
Извините за введение в заблуждение. Сценарии контента — это файлы JavaScript, содержащиеся в расширениях Chrome, которые запускаются в контексте веб-страниц: developer.chrome. com/devtools/docs/settings, в то время как инъекции.css не отображаются: stackoverflow.com/questions/18533820/   -  person Dayton Wang    schedule 11.02.2015
comment
Хорошо, этот вопрос, на который вы ссылаетесь, полезен. В ссылке настроек должно быть что-то полезное? И да... Я знаю, что такое контент-скрипты, потому что я их пишу!   -  person foobarbecue    schedule 11.02.2015
comment
@PaulSweatte Итак, у нас здесь небольшая война редактирования? Пожалуйста, объясните, как теги css и content-script здесь неуместны. Что еще более важно, объясните, как суперуниверсальные теги проявляются и file-browser здесь уместны.   -  person Xan    schedule 03.08.2015
comment
@Ксан. Вопрос включает manifest.json и view the .css file.   -  person Paul Sweatte    schedule 03.08.2015
comment
@PaulSweatte Верно. Пожалуйста, прочитайте описание тега manifest — рекомендуется не использовать его, так как он очень общий. Единственная часть манифеста, имеющая отношение к фактическому вопросу, заключается в том, что это сценарий контента, а расширение Chrome всегда включает манифест, поэтому он излишен. Согласны ли вы поменять manifest на content-script, а чрезвычайно общий user-interface на более подходящий css?   -  person Xan    schedule 03.08.2015
comment
@xan Я бы согласился с content-script и file-browser, поскольку этот вопрос в основном касается того, как просматривать файлы в инструментах разработчика Chrome, которые объявлены в массиве manifest.json content_scripts.   -  person Paul Sweatte    schedule 03.08.2015

Ответы (3)


arrow_upward
6
arrow_downward

Похоже, что нет способа сделать это, если вы внедряете CSS через content_scripts. Я сообщил об ошибке здесь: https://crbug.com/800070

Когда расширение находится под вашим контролем, Пол Айриш предлагает использовать этот шаблон кода, чтобы сделать ваши стили доступными для проверки: https://github.com/lateral/chrome-extension-blogpost/compare/master...paulirish:master

Для расширений других людей, насколько я могу судить, нет возможности просмотреть исходный код внедренных таблиц стилей в DevTools, если вы идете по маршруту content_scripts.

person Kayce Basques    schedule 08.01.2018

arrow_upward
-4
arrow_downward

Перейдите к Sources, а затем Content Scripts. Вы должны перейти к имени расширения, и тогда вы увидите внедренные файлы.

введите здесь описание изображения

person wernersbacher    schedule 08.06.2016

arrow_upward
-6
arrow_downward

Используйте Инструмент разработчика приложений и расширений Chrome на расширение, внедряющее CSS, например Наложение сетки Bootstrap:

Инструмент разработчика расширений для приложений Chrome

введенный URL-адрес можно использовать на вкладке консоли в приложении, чтобы получить URL-адрес среды выполнения с помощью метода getURL:

chrome.runtime.getURL("src/grid.css")

и создайте источник:

grid.css

Ссылки
person Paul Sweatte    schedule 30.07.2015