5 дополнений Google Chrome, которые позволят изменить любой сайт в считанные минуты
Ни для кого не секрет, что сегодня веб-сайты используют каскадные таблицы стилей (CSS), содержащие параметры всех элементов страницы. В CSS указываются шрифты, размеры объектов, рамочек, картинок, блоки и таблицы. Мы решили собрать для вас подборку дополнений Google Chrome, которые позволят отредактировать стиль любой страницы в интернете. Бонусом мы покажем, как поменять фон странички.
У каждого человека есть свои предпочтения и интересы, особенно, когда дело касается веб-дизайна. Вспомните хотя бы вечные холивары после каждого обновления YouTube. Да и у вас наверняка есть несколько замечаний к отображению информации на любимом сайте: где-то шрифт некрасивый или мелкий, где-то вообще ненужный блок уведомлений висит. А вот здесь было бы неплохо добавить фоновую картинку!
Сегодняшние браузеры позволяют редактировать сайты буквально в несколько кликов. Пользователь может настроить все что угодно, вплоть до расположения и порядка элементов на странице. Для этого были написаны специальные расширения и дополнения, которые мы разберем, прежде чем приступить к изменению главной страницы Google.
Stylebot
Пожалуй, самое популярное расширение с открытым исходным кодом. Позволяет на лету редактировать шрифты, цвета, размеры и многое другое. Имеет простой режим редактирования: при открытом окне Stylebot вы можете выбрать нужный элемент, просто наведя на него указатель мыши. Изменения сохраняются моментально, пользовательскими стилями можно делиться с друзьями.
Web Override
Приложение для подключения Javascript’овых скриптов ко внешним веб-сайтам. Уже содержит в себе jQuery, async.js, moment.js и Lodash, так что функции этих библиотек можно свободно использовать. Подходит для продвинутых пользователей, умеющих пользоваться Javascript, однако новички могут использовать расширение для внедрения уже написанных кем-то скриптов.
Styler
Принцип тот же, что и у Stylebot: быстро редактируем стиль странички, изменения сохраняются моментально. Интерфейс и последовательность действий немного другие, чуть меньше возможностей. Так что выбор остается за вами: что больше по душе придется.
Stylish
Мощнейший инструмент для кастомизации веб-сайтов, по возможностям близок к Stylebot. Позволяет скрывать ненужные элементы, редактировать стили, делиться результатом с друзьями. Веб-сайт дополнения содержит более 10 000 пользовательских стилей для изменения внешнего вида Facebook, YouTube, App Store и многих других популярных ресурсов.
Live CSS Editor
По нажатию сочетания клавиш открывает небольшое окошко, где пользователь может вписать любой стиль, который тут же будет применен к странице (после закрытия изменения сохраняются). Просто и удобно: ничего лишнего.
Расскажем, как и обещали, как отредактировать фон любой странички на примере Stylebot.
Важно! Этот метод красиво смотрится на “легких” страницах, не перегруженных блоками и меню и представлен только для ознакомления с возможностями дополнений. Советуем пробовать его на сайте Google.com.
- заходим на необходимую страничку
- кликаем по иконке Stylebot в правом верхнем углу Chrome
- нажимаем Open Stylebot
- внизу выбираем опцию Edit Css
- Вводим следующий код:
body {
background: url(https://dl.dropboxusercontent.com/u/28029149/NGC_2818_by_the_Hubble_Space_Telescope.jpg) ;
background-size: 100% 100%;
!important;
}
- закрываем Stylebot
Готово! Вместо картинки, приведенной в качестве примера, можно использовать любую другую (нужно просто заменить ссылку в коде выше). Для более сложной кастомизации сайтов придется почитать мануалы по CSS, но поверьте: в этом нет ничего сложного.
Читайте также: 5 красивых дополнений Google Chrome.
Комментарии | 10
Спасибо за полезный материал. Знал только о Stylebot и Stylish.
Спасибо, интересная подборка, нужно попробовать протестировать
Привет, читатели! Я автор дополнения Styler. Можете задать вопросы и посоветовать фичи.
Отдельное вам спасибо. Я бы ещё позаимствовал визуальный редактор у Stylebot.
здорово добавить возможность применить изменения стиля по умолчанию ко всем посещаемым страницам, например цвет фона страницы и цвет текста
А что мешает просто в том же хроме(или в опере, или в фф — везде есть) открыть DevTools (ctrl+shift+i) и точно так же на лету вносить изменения в css?
они не сохраняются после перезагрузки.
здорово добавить возможность применить изменения стиля по умолчанию ко всем посещаемым страницам, например цвет фона страницы и цвет текста
а як щодо безпеки сайтів? ну з css зрозуміло, а от javascript?
А что именно вас беспокоит в безопасности? Консоль JS никуда не девалась, любые хранимые на клиентской части ресурсы прекрасно разложены по полочкам, любые ограничения браузера (типа всяких кроссдоменопроблем) запросто обходятся при помощи имитации его с помощью CURL какого нибудь… Ничего нового — просто чуть удобнее.
Кстати, расширения для CSS я ещё понимаю для разработчика (и правда удобно на лету проверять результат), а вот зачем рядовой пользователь тратит на это время — для меня загадка… Хотя, на вкус и цвет, как говорится…