5 способов изменить сайт на свой вкус

Я рад представить вам бесплатный набор инструментов, который я использую ежедневно. Что общего у всех этих инструментов, так это то, что они имеют некоторую возможность изменять любой сторонний веб-сайт, как вам нравится. Однако любые изменения, которые вы видите, предназначены только для ваших глаз. Так что нет, это не превратит вас в хакера это просто косметика и по своей сути для развлечения. Будучи мудро использованы, эти инструменты могут принести пользу вашему ежедневному использованию интернета, удаляя и изменяя надоедливые вещи на сайтах. Я считаю, что у меня есть абсолютная сила изменить все, что я хочу веб мире. Что-то вроде того, как Нео смотрел вниз на тот коридор в Матрице. Он понял, что может изменить что угодно. 🙂

Имейте в виду, что это не учебник на этот раз (это будет слишком долго). Он просто предназначен для того, чтобы дать вам представление о том, какой инструмент подходит для какой задачи. Я выкладываю решения в порядке необходимого уровня квалификации.

1. Stylish

2. UBlock Origin

3. Greasemonkey

4. Developer tools

5. Burp, an interactive HTTP proxy

Stylish

О, это мой самый любимый косметический плагин для браузера. Это применяет косметику к участкам прежде, чем они даже загрузятся. Так что нет вспышки не стильной  страницы. Этот аспект является важным различием между пользовательскими стилями Stylish и пользовательскими сценариями Tampermonkey (см. Далее).

Для меня нет ничего необычного в том, чтобы сменить сайт на темную тему. Хорошо, может быть, не все, но те веб ресурсы, которые я часто использую. Такие сайты, как Google, Facebook Messenger, панель инструментов CodeCanyon, phpMyAdmin, Grammarly, и этот список можно продолжить. Стильный плагин для такого рода изменений. Просто взгляните на Userstyles.org и посмотрите, не бросается ли вам что-то в глаза. Есть так много фан-редизайнов известных сайтов! Вы когда-нибудь жаловались на изменение стиля на вашем любимом сайте? Возможно, вы не единственный. Может быть, кто-то создал пользовательский стиль, который возвращает сайт к тому, что было раньше! Или вы можете написать свой собственный, но вам нужны знания CSS для создания пользовательского стиля.

UBlock Origin

Как правило, это плагин для блокирования рекламы, и мы не можем исключить его из списка, поскольку он вносит существенные изменения практически на каждый сайт. В конце концов, это имеет самое существенное преимущество при навигации, без навыков программирования.  В любом случае, я всегда удивляюсь, как мало людей, которых я знаю, используют блокировщик рекламы. Всякий раз, когда я вижу сайт, которым я также пользуюсь, например YouTube, я не могу не задаться вопросом…

«Подождите, на этом сайте есть реклама?
… Эмм, это точно бесплатный ресурс! »

Вы можете вручную заблокировать на сайте все, что вам не нравится. Найдите опцию Block Element в контекстном меню, вызываемом правой кнопкой мыши и открываемом над целью. Он отображает интерфейс, который подсвечивает то, что должно быть заблокировано, и вы можете просмотреть его список родителей, чтобы расширить критерии (через селектор CSS). Я использую его все время, чтобы предотвратить ненавязчивую рекламу или просто отдельные изображения, такие как аватары пользователей форума, которые я считаю оскорбительными.

Он также может заблокировать запрос по его URL (даже с использованием подстановочных знаков), если вы используете вкладку Мои фильтры в его настройках. Я использовал его, чтобы запретить целые плагины или темы WordPress от загрузки ресурсов при проверке проблем совместимости.

Tampermonkey

Как вы уже догадались, еще один плагин для браузера. Это самый мощный способ изменить сайт. Мой вариант использования # 1 – участие в войне против всплывающих окон против рекламы. Знаете, когда у вас есть блокировщик рекламы, и сайты его обнаруживают и всплывают во всплывающем окне? Или они отображают отвлекающее сообщение, где раньше была реклама. Несмотря на то, что в uBlock Origin есть фильтр против рекламы, иногда мне приходится брать дело в свои руки. Когда я против этого, я использую JS для поиска любого элемента с определенным изображением или антиблокирующей формулировкой и удаляю все это, начиная с соответствующего родителя. Этот процесс иногда невозможно сделать с блокировкой элементов uBlock, так как некоторые сайты, как правило, используют рандомизированные идентификаторы и классы, чтобы идти ниже радара фильтров (в конце концов, это война).

Более благородные варианты использования Tampermonkey включают добавление ваших ресурсов на страницу или расширение возможностей сайта. Существует множество пользовательских сценариев, и вы можете найти некоторые из них, которые понравятся вам. Я использовал некоторые для YouTube, чтобы заставить HD срабатывать автоматически, но теперь у меня есть плагин для браузера для этого. Но, возможно, вам нравится меньше плагинов и больше пользовательских скриптов? Кто знает. Посмотрите на Greasy Fork и OpenUserJS, чтобы начать работу со сценариями других людей.

Инструменты разработчика

Я думаю, что трачу больше времени на Chrome DevTools, чем на программирование в любой IDE. Когда я разрабатываю плагины для WordPress, часто речь идет о пробах и ошибках. Поскольку я работаю в основном с интерфейсом, я постоянно проверяю фрагменты своего творения. Я делаю то, что я себе представляю (например, перекрашиваю или позиционирую что-нибудь) с помощью инструментов разработчика, и когда мне нравится результат, я кодирую его. 

Используйте инструменты разработчика, если вы хотите временно что-то изменить на веб-сайте. Наиболее заметный случай не продвинутого использования – снимок экрана или распечатка чего-либо. Этот инструмент позволяет скрывать, удалять, изменять все, что снимается или печатается. Используя Инспектор, вы можете изменить любой текст, вставить или удалить любой элемент, изменить порядок или перекрасить что-либо. Перезагрузите страницу, что бы все изменения на сайте пропали.

При отладке сайтов клиентов и поиске сторонних конфликтов я часто блокирую загрузку определенных ресурсов (в данном случае файлов JS). Параметр Блокировать запрос URL в контекстном меню строк на вкладке Сеть особенно полезен для этой цели.

Burp, an interactive HTTP proxy

Здесь все продвигается вперед, но для меня это самый интересный подход. Скорее всего, вы столкнетесь с некоторыми ситуациями, когда вы хотите, чтобы сервер отправлял данные желаемым способом. В этих случаях нецелесообразно пытаться заставить Greasemonkey изменить какой-либо входящий ресурс веб-сайта. Это не так хорошо, чтобы вмешиваться и переписывать вещи на лету. Вот где может сиять интерактивный HTTP-прокси. Их много, но я выбрал Burp без особой причины (Community Edition). Короче говоря, он действует как посредник между вашим браузером и удаленным сервером. Он может перехватывать и изменять любой входящий или исходящий запрос, Требуется изменить настройки прокси-сервера на адрес локального хоста и установить сертификаты SSL, чтобы вы могли по-прежнему работать с сайтами по https. Честно говоря, это самое сложное – установить этот чертов сертификат.

Послесловие

Как видите, с веб-сайтами можно делать интересные вещи, если рассматривать их как игровую площадку. Я, конечно, люблю, и мне искренне нравится манипулировать ими по своему вкусу, даже если никто не видит этого. Думайте об этом как о моддинге в видеоигре или интерьере вашего автомобиля. В основном это только для вас, но если это делает вас счастливее, то делайте это. С детства я занимался настройкой внешнего вида моего компьютерного интерфейса (Windows). Это началось с изменения курсора, чтобы он был анимирован. Моя панель задач Windows даже выглядела как OSX. В какой-то момент я бы переписал интерфейсные тексты, чтобы они были мягче и смешнее. Эта уловка перешла в мир Интернета, когда я начал работать с сайтами. Старые привычки никогда не умирают :).

Как бы вы изменили этот сайт ? Не стесняйтесь – поделитесь этим в комментариях ниже!