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

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

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

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

Я бы ожидал, что .css появится в "источниках" в разделе "скрипты содержимого" с файлами .js, но их там нет.

Есть ли способ просмотра файла .css с помощью инструментов dev? Если нет, объясните, почему этого не происходит.

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

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

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

и произвести источник:

Рекомендации