Resource Override
В этой заметке я попытаюсь сделать краткий обзор браузерного расширения Resource Override.
Для чего предназначен?
Подменять стили указанного сайта своими.
Зачем?
Дебаг css и js на боевом сайте.
Установка
Переходим по ссылке и жмем на кнопку установить.
Подробнее
На странице настроек доступы четыре действия:
— Подменить файл другим через URL;
— Подменить файл другим через файл;
— Вставить свой файл;
— Подменить заголовки.
Последним я не пользовался, поэтому расскажу о первых трех.
Через URL
Допустим вы разрабатываете на локалке. У вас настроен сборщик, который поднимает сервер.
В итоге URL выглядит как-то так — localhost:3000
Стили компилируются в один bundle — styles.min.css, который также используется на боевом сайте. Это значит, что мы можем посмотреть, как будут выглядеть новые стили на проде.
Для этого достаточно добавить в группу новое правило: URL → URL
В поле from указываем на каком сайте мы хотим подменить стили, а в to — местоположение наших стилей:
https://site.com/styles.min.css → localhost:3000/styles.min.css
Через файл
Аналогично предыдущему способу, только вместо locahost:3000/styles.min.css необходимо вставить код во встроенный текстовый редактор расширения. Это удобно только для маленьких файлов.
Вставить свой файл
Уже без привязки к URL.
Если лень писать Chrome расширения — можно просто вставить кусок JS кода.
Если это вас заинтересовало и вы хотите узнать о расширении поподробнее, то советую посмотреть видео Kyle Paulsen:
Посты на эти и другие темы публикую в канале: https://t.me/filimonovvadim
И в группе вк: https://vk.com/filimonovvadim