Как изменить внешний вид любого сайта или страницы

Не нравится дизайн какого-то сайта или просто отдельной странички? Теперь это можно легко исправить, если Вы используете браузер Google Chrome. Я расскажу о том, как создать простое расширение для этого браузера, которое и будет изменять внешний вид практически любого сайта по вашему усмотрению.  

радуга

Для начала немного теории, о том, что такое CSS. CSS - это язык, используемый для оформления внешнего вида веб страниц. Именно он сообщает браузеру, как отображать тот или иной элемент страницы. Какой формы он должен быть, какого цвета, размера и где он должен располагаться. Вообще, практически вся работа над написанием расширения для изменения внешнего вида сайта будет сводиться к написанию кода CSS.

Итак, приступим. В любом месте компьютера создайте папку с произвольным именем. Допустим "Расширение". Далее в папке "Расширение" необходимо создать два файла, manifest.json и style.css. Как их создать? Есть несколько способов создавать файлы с такими расширениями. Самый простой это открыть "Текстовый документ" или по-другому "Блокнот", выбрать пункт "Сохранить как...".

блокнот

Далее в строке "Имя файла" написать manifest.json, в строке "Кодировка" должно быть установлено UTF-8.

сохранить как

 

И теперь сохраняем в нужную нам папку. А именно в папку "Расширение". То же самое необходимо проделать и для создания второго файла (style.css). Не пытайтесь просто переименовать текстовый документ, у вас получится не совсем то, что нам нужно. 
Теперь посмотрите на оба этих файла в папке. 
файлы
Если в столбце "Тип" написано файл "JSON" и файл "CSS", то вы все сделали правильно.
 
Идем дальше, открываем файл manifest и вставляем в него такой вод код. 
{
 "content_scripts": [
{
 "matches": ["http://rooltime.com/*"],
 "css": ["style.css"],
 "run_at":"document_end"
}
 ],
"description": "Дизайнер сайтов",
"name": "Designer",
"version": "0.1.1"
}
И сохраняем изменения в файле.
манифест
В параметре "matches", указываем адрес сайта, на котором будем изменять дизайн. Я указал адрес своего сайта, можно любой другой. 
В "css" указан файл, в котором хранится код css, мы его уже создали (style.css), но он еще пока пустой.
"description" - описание расширения.
"name" - название расширения.
"version" - версия.
 
Теперь надо установить расширение в Google Chrome. Открываем браузер, жмем левой клавишей мыши на иконку в верхнем правом углу (Настройка и управление Google Chrome). Выбираем пункт "Инструменты" --> "Расширения". Ставим галочку в пункте "Режим разработчика", если она не стоит. И нажимаем на кнопку "Загрузить распакованное расширение...", указываем путь к папке "Расширение", жмем "OK".
расширение
Все, расширение установлено.
designer
Теперь можно заниматься изменением внешнего вида сайта, будем писать css код. Для начала изменим цвет текста на красный, а фон сделаем черным.
Код будет выглядеть вот так:
body {
color: red !important;
background: black !important;
}
body - это тело всей веб страницы.
color: red - это красный цвет.
background: black - черный цвет фона.
Проще говоря, я изменил цвет всего текста в теле веб страницы на красный и установил черный фон.
 
В конце каждой строчки необходимо добавлять !important, т.к. возникает противоречие между стилем автора и пользователя. Автор говорит браузеру, что цвет текста должен быть черным, а вы говорите, что он должен быть красным. Браузер выбирает по умолчанию цвет автора, но если вы добавите !important то ваш стиль будет более приоритетным.
 
Сохраните этот код в файле style.css. Введите в адресную строку браузера адрес chrome://chrome/extensions/. Эта страница с расширениями, ее следует обновлять каждый раз после того, как Вы измените код в файле style.css.
А теперь посмотрите, как выглядит эта страница. Я продемонстрировал лишь один из самых простых примеров оформления сайта. Углубляться не стану, т.к. это уже будет отстранение от темы. Но более подробно изучить css Вы всегда можете самостоятельно, благо учебников в сети полным полно.