А вы знали, что каждый, вот буквально каждый, может сам сделать браузерное расширение для использования в личных целях?
Например, мне на прошлой работе надоело при подключении к виртуальному рабочему месту вводить по несколько раз логин и пароль, который еще обычно ультразащищенный и состоит из кучи самых разных символов. И что забавно, браузер и связка ключей ноута почему-то отказывались адекватно работать с этой УЗ, приходилось все заполнять исключительно ручками. Так что я, как самый настоящий айтишник, автоматизировал ежедневную рутину с помощью расширения.
Если расширение не планируется публиковать в какой-нибудь 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)
#быстростатья
АЙ 
