Букмарклет — это закладка, хранящаяся в веб-браузере и содержащая команды JavaScript, добавляющие новые функции в браузер. Они сохраняются как URL-адрес закладки в веб-браузере или как гиперссылка на веб-странице.
Закладки браузера, известные как букмарклеты, запускают JavaScript, а не открывают веб-сайт. Они также известны как закладки JavaScript, фавлеты и апплеты закладок.
Все популярные браузеры, включая Mozilla Firefox и браузеры, созданные на платформе Chromium, такие как Chrome или Brave, поставляются с собственными букмарклетами.
Примеры использования букмарклетов
- Измените внешний вид веб-страницы в браузере.
- Удаление элементов со страницы.
- Щелкайте кнопки виртуально.
- Извлечение контента с веб-сайта: ссылки или изображения.
- Используйте содержимое страницы, чтобы открыть новую страницу.
- Отправить страницу в веб-службу, например в переводчик.
- Просмотр скрытых параметров веб-страницы.
- Поделиться страницей в социальных сетях.
- Найдите что-то на текущей странице и покажите результат, обновив страницу.
Вы также можете создавать закладки, которые вообще не используют контекст, например, условное открытие URL-адреса или создание HTML-кода для новой вкладки.
Некоторые букмарклеты вы найдете в этой статье в разделе Примеры букмарклетов. Они предназначены только для демонстрации, но должны сделать очевидными возможности и реализации.
Как создавать букмарклеты
Создание букмарклета очень похоже на создание стандартной закладки. Основное отличие заключается в том, что в поле URL будет введен JavaScript, а не URL-адрес HTTP или HTTPS.
Перейдите в меню закладок
В Chromium вы можете щелкнуть правой кнопкой мыши панель закладок, а затем нажать «Добавить страницу…». Кроме того, вы можете перейти в диспетчер закладок, затем щелкнуть правой кнопкой мыши и выбрать «Добавить новую закладку»:
В Mozilla Firefox либо на панели закладок, либо на боковой панели закладок (CTRL + B) можно щелкнуть правой кнопкой мыши и выбрать "Добавить закладку...":
Как написать букмарклет
В поле URL модального окна закладки напишите функцию JavaScript в следующем формате.
javascript: (() => {
// Your code here!
})();javascript: — это протокол URL. Это указывает на то, что браузер должен выполнить закладку как JavaScript.
(() => { }) определяет анонимную функцию (лямбда). Вы должны написать код, который хотите выполнить, между фигурными скобками.
(); выполнит только что созданную вами анонимную функцию.
javascript: (() => { alert('Hello, World!'); })();
"Привет, мир!" как букмарклет браузера.
Вы также можете заставить его генерировать HTML и открывать его как HTML-документ:
javascript: (() => {
return '<h1 style="color: white; background-color: black;">Hello, World!</h1>';
})();Как распространять букмарклеты
Чтобы «установить» букмарклет, пользователи создают закладку в своем браузере, копируют и вставляют в нее код.
Это может быть неудобно, поэтому при совместном использовании часто связывают букмарклеты. Это так же просто, как поместить его в атрибут href вашего якоря ссылки.
<a href="javascript: (() => { alert('Hello, World!'); })();">
Hello, World!
</a>Теперь пользователи могут щелкнуть правой кнопкой мыши и «Добавить ссылку в закладки» или перетащить ее на панель закладок и оставить для быстрого доступа.
Щелкнув ссылку на веб-странице, скрипт немедленно запустится. Убедитесь, что он не будет препятствовать тому, чего пользователь пытается достичь на вашем сайте, если он случайно нажмет на него.
Например, по следующей ссылке будет отображаться предупреждение «Hello, World!».
Примеры букмарклетов
Вот список идей букмарклетов вместе с кодом, который их реализует. Вы можете скопировать и вставить их в новые закладки, чтобы попробовать их.
