Как использовать bookmarklety на любом устройстве

Кратко

Bookmarklety — это простые закладки с JavaScript вместо URL. Они запускают код на текущей странице одним нажатием. Работают в настольных и мобильных браузерах, где расширения недоступны. В статье объясняю, что такое bookmarklet, как его установить и запустить на разных платформах, а также как создать и безопасно использовать собственные bookmarklety.

Быстрые ссылки

• Bookmarklety объяснение

• Где найти bookmarkletы

• Как установить bookmarklet

• Как использовать bookmarklet

Bookmarklety объяснение

Веб‑страницы в браузере используют JavaScript для динамики. Bookmarklet — это обычная закладка, но в поле адреса у неё стоит код JavaScript вместо https://… . При клике браузер выполняет этот код на текущей вкладке вместо перехода на другой сайт.

Bookmarklet позволяет выполнить действие на странице одним кликом. Например, многие сервисы (Twitter, Facebook, Pocket и другие) предлагают bookmarklet для быстрого шаринга. При нажатии такой закладки запускается код, который отправляет текущую ссылку в сервис.

Bookmarklet может менять внешний вид страницы: убрать лишние элементы, включить «режим чтения», изменить шрифты или скрыть изображения. Он имеет доступ к тому же документу и DOM, что и страница, поэтому может, например, раскрыть поле с паролем, показанное как *. В отличие от расширений, bookmarklet не запущен постоянно и ничего не делает, пока вы не вызовете его.

Преимущество bookmarkletов — простота и совместимость с мобильными браузерами, которые не поддерживают расширения. Например, на iPad можно добавить кнопку «Добавить в Pocket» через bookmarklet в Safari, даже если браузер не поддерживает системные расширения.

Где найти bookmarkletы

Обычно bookmarkletы размещают на сайтах самих сервисов: страницы «Tools», «Bookmarks» или «Share» часто содержат код для перетаскивания или копирования. Но bookmarklet — всего лишь текст. Его можно скопировать с любого источника и вставить в закладку вручную.

Если вам нужен конкретный инструмент, поищите в интернете, например: “reveal password bookmarklet”. Также существуют подборки популярных bookmarkletов и статьи с описаниями. При загрузке кода с неизвестного ресурса будьте внимательны и проверяйте код перед установкой.

Как установить bookmarklet

Bookmarklet легко установить двумя способами: перетаскиванием или вручную через менеджер закладок.

1. Установка перетаскиванием на рабочем столе

• На странице с bookmarkletом наведите курсор. В адресе вы увидите, что ссылка начинается с “javascript:”.

• Включите панель закладок в браузере (в Chrome и Edge: Ctrl+Shift+B; в Firefox: правый клик по панели и выбор Bookmarks Toolbar).
• Зажмите ссылку bookmarklet и перетащите её на панель закладок.

2. Установка вручную через менеджер закладок

• Скопируйте код bookmarklet (часто это длинная строка, начинающаяся с javascript:).
• Откройте менеджер закладок или добавление новой закладки в браузере.
• Вставьте скопированный код в поле адреса/URL закладки.
• Дайте закладке понятное имя и сохраните.

Советы

• Если ссылка открывается в новом окне при клике, попробуйте правый клик -> Добавить в закладки или редактировать сохранённую закладку и заменить адрес на код JavaScript.
• Короткие имена закладок удобнее искать в адресной строке браузера на мобильных устройствах.

Как использовать bookmarklet

Лучше всего включить панель закладок. Тогда достаточно одного клика, чтобы выполнить код на текущей странице.

Если у вас нет панели закладок — как на Safari на iPad или в некоторых мобильных браузерах — откройте список закладок и нажмите нужную запись.

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

Главная идея — загрузить bookmarklet так, чтобы он был связан с активной вкладкой. Если открыть закладки в отдельной вкладке и выполнить код оттуда, он запустится на странице закладок, а не на той вкладке, где вы хотите.

Быстрая установка в популярных сценариях

Настольные браузеры

• Chrome/Edge: включите панель закладок, перетащите ссылку или добавьте закладку вручную.
• Firefox: включите панель закладок через правый клик по панели, затем перетаскивание или ручной ввод.
• Safari на macOS: перетащите ссылку в панель закладок или в меню “Заметки и закладки”.

iOS и iPadOS (Safari)

• Откройте страницу, в которой размещён код bookmarklet.
• Выберите “Поделиться” → “Добавить закладку” и сохраните её в любом месте.
• Откройте Закладки, отредактируйте созданную запись и в поле Адрес замените URL на код JavaScript (начинается с javascript:). Сохраните.

Android (Chrome)

• В Chrome на Android нельзя напрямую редактировать URL закладки в некоторых версиях. Используйте рабочий обход: добавьте любую закладку, синхронизируйте её с настольным браузером, затем оттуда замените URL на код JavaScript. Или используйте приложение для заметок: добавьте ссылку с кодом и откройте её в Chrome.

Примечание

• Некоторые мобильные браузеры ограничивают выполнение закодированных JavaScript в адресной строке из соображений безопасности. В таких случаях пригодятся инструкции конкретного браузера.

Создание собственного bookmarklet

Мини‑методология

1. Напишите функцию на JavaScript, которая делает требуемое действие на странице. Держите код небольшим и самодостаточным.
2. Убедитесь, что код не зависит от переменных внешней области (scope). Оберните в немедленно вызываемую функцию: (function(){ / код / })();
3. Минимизируйте и экранируйте символы, особенно кавычки и пробелы, если вставляете в адресную строку.
4. Добавьте префикс javascript: и протестируйте локально.

Пример простого bookmarklet для показа всплывающего окна с URL страницы:

javascript:(function(){alert(window.location.href);})();

Для более длинных инструментов используйте внешние минифицированные скрипты и загружайте их динамически:

javascript:(function(){var s=document.createElement(‘script’);s.src=’https://example.com/my-tool.min.js’;document.head.appendChild(s);})();

Советы по разработке

• Разрабатывайте и тестируйте код в консоли разработчика перед упаковкой в bookmarklet.
• Избегайте конфликтов с глобальными переменными страницы, используйте локальный scope.
• Логируйте ошибки в console.error для отладки.

Безопасность и риски

Важное

Bookmarklet выполняет код в контексте страницы. Это даёт ему все те же права, что и странице: доступ к DOM, cookies в пределах origin, localStorage и т. п. Это означает два риска:

• Злонамеренный код может похитить данные формы или токены, если вы запустите непроверенный bookmarklet на доверенной странице.
• Если вы вставляете код из непроверенного источника, он может перенаправить вас, записать данные или выполнить вредоносные действия.

Рекомендации по безопасности

• Просматривайте код bookmarklet перед установкой. Если строка слишком длинная и нечитаема, откажитесь или попросите источник снять минификацию.
• Не запускайте непроверенные bookmarkletы на страницах интернет‑банка или при работе с чувствительными данными.
• Используйте bookmarkletы только от доверенных авторов или создавайте свои.
• При использовании внешних скриптов (s.src=…) проверьте целевой URL и используйте HTTPS.

Приватность и соответствие

• Bookmarklet сам по себе передаёт данные только в те места, куда вы явно указываете в коде. Если bookmarklet отправляет данные на внешний сервер, это может иметь последствия для конфиденциальности.
• Для корпоративного использования согласуйте список разрешённых bookmarkletов с политиками безопасности и, при необходимости, проводите аудит кода.

Когда bookmarkletы не подходят

• Когда требуется постоянное фоновое поведение. Bookmarklet активируется вручную и не может работать в фоне.
• Когда необходима глубокая интеграция с браузером (например, доступ к API расширений). Тут нужны расширения.
• В средах с жёсткой политикой безопасности, где выполнение JavaScript из адресной строки отключено.

Чек‑листы по ролям

Для рядового пользователя

• Найти проверенный bookmarklet или инструкцию.
• Проверить код на предмет явных вызовов внешних URL.
• Установить закладку и дать понятное имя.
• Запустить на тестовой странице.

Для разработчика

• Писать код в изолированном scope.
• Минимизировать и тестировать в разных браузерах.
• Предусмотреть обработку ошибок и совместимость с CSP, если возможно.

Для администратора или ответственного за безопасность

• Вести реестр одобренных bookmarkletов.
• Проверять внешние зависимости и домены, куда отправляются данные.
• Информировать пользователей об ограничениях и рисках.

Сравнение подходов

• Bookmarklet: быстро, просто, не требует установки расширений. Подходит для одноразовых действий и мобильных браузеров.
• Расширение: мощнее, работает в фоне, даёт доступ к расширенным API браузера. Требует установки и, как правило, одобрения пользователя.

Выбор зависит от задачи: если нужно одноразовое улучшение интерфейса или шаринг — bookmarklet удобнее. Если нужна постоянная интеграция — расширение предпочтительнее.

Краткий глоссарий

• Bookmarklet: закладка, адрес которой — JavaScript-код.
• DOM: Document Object Model, модель документа веб‑страницы.
• CSP: Content Security Policy, политика безопасности контента.
• minify: минификация — процесс сжатия кода для уменьшения размера.

Итог

Bookmarklet — простой и гибкий инструмент для выполнения кода на веб‑странице одним нажатием. Он полезен там, где расширения недоступны, особенно на мобильных устройствах. Но перед установкой и запуском всегда проверяйте код на безопасность. Для разработчиков bookmarklet остаётся лёгким способом быстро добавить функциональность или отладочную утилиту.

Важное

Bookmarkletы дают удобный доступ к функциям, но не заменяют расширения, если вам нужна постоянная интеграция или фоновые процессы.

Ключевые действия

• Устанавливайте перетаскиванием или вручную через менеджер закладок.
• Запускайте с панели закладок или через поиск в адресной строке на мобильных устройствах.
• Проверяйте и редактируйте код перед использованием на чувствительных страницах.