На днях я просматривал несколько форумов, и один парень создавал базовые сценарии для какого-то социального приложения/игры, и я заметил интересное слово «букмарклет», и я сразу подумал об обычной закладке браузера, НО ТОГДА…. я прокрутил вниз и увидел какой-то javascript …… ваааа 😕
ВРЕМЯ ДЕЛАТЬ GOOGLE МАТЕРИАЛЫ
Итак, я сделал то, что делает любой средний разработчик, и решил погуглить, и, подняв свою челюсть с пола, я вернулся на YouTube и нашел отличный учебник по ним, и я решил, что пришло время написать свой собственный букмарклет, потому что я внезапно поток идей в моей голове
ТАК ЧТО ЗА ХУМ ТАКОЕ БУКМАРКЛЕТ🤔
Надеюсь, вам нравятся смайлики в этой статье☺️
Итак, я предполагаю, что мы все знаем, что такое расширение браузера, букмарклет — это намного более простой способ добавить больше функциональности в ваш просмотр, поскольку это только один файл javascript, который один раз щелкнут — как в любой закладке, будет выполняться код
КАК НАЧАТЬ НАПИСАТЬ СОБСТВЕННЫЕ БУМАРКЛЕТЫ?
Чтобы начать писать собственные букмарклеты для автоматизации черт знает какие задачи и какие веб-сайты, откройте свой любимый текстовый редактор и вставьте следующий код.
Просто очень простое приветственное оповещение с крошечным маленьким поворотом, к которому мы немного подойдем.
Наш код просто создал самовызывающуюся функцию, которая в основном запускается, как только файл запускается без традиционного способа вызова функции.
Мы добавляем javascript: в начале, потому что это сообщает браузеру следующее:
это закладка, но вместо перехода по URL-адресу я хочу, чтобы вы запустили этот код javascript, пожалуйста
Да, мы можем запустить код javascript в адресной строке, если вы не знали, просто набрав javascript:, а затем любой допустимый оператор javascript, но проблема в том, что вам НЕОБХОДИМО обернуть свой код в функцию — обычную или анонимную, чтобы браузер знал, что он есть запустить его, потому что иначе ничего не произойдет
ОК, ТАК КАК МНЕ ЭТО ЗАПУСТИТЬ?
- Для пользователей Chrome нажмите на три точки в правом верхнем углу -> закладки -> менеджер закладок.
2. Оттуда выберите добавить новую закладку, выберите имя, затем для части URL скопируйте и вставьте код из текстового редактора и нажмите Enter
И если у вас включена панель инструментов закладок, как вы должны, вы должны увидеть там букмарклет
БОЛЕЕ СЛОЖНЫЙ КОД
Теперь, когда вы знаете, что и как запускать букмарклеты с помощью javascript, давайте рассмотрим силу этих знаний и почему важно использовать эти букмарклеты.
Букмарклеты выполняются на каждой вызываемой странице: я нахожу это чрезвычайно полезной функцией, поскольку она открывает дверь для множества проектных идей и творчества.
Теперь я знаю, что вы, вероятно, задаетесь вопросом, как и я, а что, если я хочу добавить более сложный код, мне просто запихнуть его все в одну строку? Ответ - да, и вам действительно не о чем беспокоиться
Google Chrome будет обрабатывать экранирующие символы, если вы скопируете их из текстового редактора, так что просто напишите код, вставьте его туда и нажмите ;)
СОЗДАТЬ ЧТО-ТО ПОЛЕЗНОЕ….. НАДЕЮСЬ 😄
Давайте создадим букмарклет, в котором вы можете выделить выделение, а затем, как только вы щелкнете по букмарклету, он прочитает его вслух 😅
Вернитесь в текстовый редактор и на этот раз вставьте это 😉
Разве веб-API не такие уж удивительные 😍, поэтому скрипт начинает с захвата любого выделенного пользователем текста и сохранения его в переменной.
Затем мы проверяем, действительно ли у нас есть текст, API синтеза текста очень прост, вы просто инициализируете его с помощью window.speechSynthesis, а затем вам нужен объект speechSynthesis.Uterrance(), которому мы передаем выделенный текст.
Наконец, мы используем объект speechSynthesis для произнесения слов, переданных этому объекту SpeechSynthesisUterrance.
Теперь вы можете использовать этот букмарклет, чтобы прочитать все, что вы выберете!
КАК ПОДЕЛИТЬСЯ ЭТИМ?
К сожалению, совместное использование букмарклета — не самый простой способ, особенно для менее технически подкованных людей, поэтому все еще немного неэффективно позволять другим «устанавливать» их, и поэтому существует вещь, называемая пользовательскими сценариями, о которой я расскажу позже в блоге. если вам нравится этот 😃
ПЛЮСЫ И ПРОТИВ ИСПОЛЬЗОВАНИЯ БУКМАРКЛЕТОВ
- Огромный плюс в том, насколько они переносимы и быстро выполняются на любой странице, если, конечно, применяется правильная логика.
- Как я упоминал выше, гораздо меньше работы, чтобы настроить его и начать использовать, в отличие от расширения.
- Они в некоторой степени обеспечивают лучшую безопасность по сравнению с расширением, поскольку код запускается только после вызова, в отличие от сценария работника службы в расширении браузера, который можно легко использовать для вредоносных целей, поскольку он может работать в фоновом режиме.
- Основным недостатком является то, что они не работают в фоновом режиме, как расширения, поэтому они «оживают» только при нажатии на закладку.
- Неудобно делиться/распространять их
- И, наконец, для меня это не проблема, но часть кода не самая элегантная, так как мы должны уместить все в одну строку, но все равно благодаря экранированию хромированных символов 😌
ЗАКЛЮЧЕНИЕ
Букмарклеты — чрезвычайно мощный инструмент, позволяющий еще больше контролировать работу в Интернете. Подумайте обо всех возможностях, которые они открывают.
- парсинг веб-страниц
- принимает пользовательский ввод с помощью
prompt()и фактически делает с ним что-то - автоматическое нажатие
- рекламный блок
и так далее и тому подобное, просто сойти с ума 👀
Большое спасибо вам, ребята, если вы зашли так далеко, и я надеюсь, что вы научились кое-чему, как и я ♥️
