А вы знали, что каждый, вот буквально каждый, может сам сделать браузерное расширение для использования в личных целях?

Например, мне на прошлой работе надоело при подключении к виртуальному рабочему месту вводить по несколько раз логин и пароль, который еще обычно ультразащищенный и состоит из кучи самых разных символов. И что забавно, браузер и связка ключей ноута почему-то отказывались адекватно работать с этой УЗ, приходилось все заполнять исключительно ручками. Так что я, как самый настоящий айтишник, автоматизировал ежедневную рутину с помощью расширения.

Если расширение не планируется публиковать в какой-нибудь Google Extension Store, то не нужно платить деньги за кабинет разработчика. Но в структуре расширения все равно придется разобраться, а еще в строении страницы приложения, где будете использовать расширение, ну и, конечно, придется еще чуток разобраться с JS и CSS. Кстати, необязательно становится настоящим джаваскриптизером, большинство запросов можно и загуглить или, как сейчас это модно, заджипитить.

Итак, из чего состоит расширение?
Есть четыре основных блока и один еще:
🔘 Popup – вываливается при клике на иконку, чаще всего там различные настройки
🔘 Content – встраивается непосредственно в страницу или страницы, где запланировано использовать расширение
🔘 Background – работает фоном, обычно используется для связи попапа и контента, либо для выполнения каких-то задач фоном
🔘 InfoPage – открывается в отдельной вкладке, также обычно содержит настройки или полезную информацию
⚡️ Manifest.json – файл, который используется для настройки расширения и подгрузки всех описанных выше частей

Что нужно для того, чтобы начать использовать расширение?
Достаточно простого редактора, например, Notepad или Sublime, и сам браузер, в котором будем использовать расширение. Еще нужно немного разобраться в панели разработчика браузера, там куча полезных вкладок, которые помогут отладиться, провести реверс инжиниринг, найти то, что будет дорабатываться и понять как.

А теперь, когда вы узнали вкратце про расширения, и поняли, что на самом деле все не так просто, как было сказано в заголовке, я вас немного успокою)

Есть уже готовое расширение, которое позволяет встраивать CSS стили и JS код.
Не знаю насколько безопасен Styler, но если никакие пароли вы не вставляете, то, наверное, можно закрыть свои нужды и им, не делая полноценное расширение. А еще стайлером можно как минимум сделать крутую прическу отладить работу, так как это удобнее, когда вы не особо разбираетесь в инструментах браузера или не хотите разбираться во всех описанных выше нюансах расширения. Из коробки расширение дает вам два поля для ввода, первое для стилей, второе для кода. Не надо разбираться в структуре расширения, продумывать лишнюю логику, заморачиваться с установкой расширения и постоянным обновлением версий в ходе отладки и тестирования, не надо в конце концов разбираться в манифесте (а там куча настроек, придется курить доки 🚬)

Далее пойдут простые примеры и перед тем, как вы посмотрите на них, призываю вас писать в комменты все возникшие вопросы, уверен, что много всего нового и ничего непонятно))) С удовольствием расскажу то, что сам знаю. А для тех, кому стало прям интересно, ставьте - 🤩 , если увижу активность, то обязательно выложу продолжение с небольшим проектом и расскажу простым языком что и как работает.

Итак, пример использования Styler`а для Хабра. Я добавил CSS стили, чтобы сделать весь текст жирным (ну или почти весь) для снижения напряжения на глаза 👀:

* {
  font-weight: 700
}



А также добавил небольшой кусок JavaScript для оповещения о том, что уже целых 15 минут сижу и читаю публикации на Хабре ⏰:

const time = 1000 * 60 * 15   //15 минут
const stopChill = () => {
  alert("Что-то ты сильно расчилился, пора бы поработать!")
}

setTimeout(stopChill, time)

#быстростатья