Букмарклет

Закладка веб-браузера, содержащая код JavaScript

Демонстрация букмарклета, подсчитывающего количество слов на странице. Показанный браузер — Firefox 65.0.2, работающий под управлением Windows 10.

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

Другое название букмарклета — favelet или favlet , происходящее от слова «фавориты» (синоним закладки). ^[1]

История

Стив Кангас из bookmarklets.com придумал слово bookmarklet ^[2], когда начал создавать короткие сценарии на основе рекомендаций, содержащихся в руководстве Netscape по JavaScript. ^[3] До этого Тантек Челик называл эти сценарии фавелетами и использовал это слово еще 6 сентября 2001 года (личный адрес электронной почты ^{[ нужны разъяснения ]} ). Брендан Эйх , который разработал JavaScript в Netscape, рассказал о происхождении букмарклетов:

В этом смысле они были преднамеренной функцией: я изобрел javascript:URL-адрес вместе с JavaScript в 1995 году и предполагал, что javascript:URL-адреса можно использовать как любой другой тип URL-адресов, включая возможность добавления в закладки. В частности, я сделал возможным генерировать новый документ, загружая, например javascript:'hello, world', , а также (ключ для букмарклетов) запускать произвольный скрипт против DOM текущего документа, например javascript:alert(document.links[0].href). Разница в том, что последний тип URL-адреса использует выражение, которое в JS возвращает неопределенный тип. Я добавил оператор void в JS до выхода Netscape 2, чтобы упростить удаление любого неопределённого значения в javascript:URL.

-  Брендан Эйх, в электронном письме Саймону Уиллисону ^[4]

Более широкое внедрение Политики безопасности контента (CSP) на веб-сайтах вызвало проблемы с выполнением и использованием букмарклетов (2013–2015 гг.), ^[5] при этом некоторые предполагают, что это означает конец или смерть букмарклетов. ^{[6] [7]} Уильям Доннелли создал обходное решение этой проблемы (в конкретном случае загрузки, ссылки и использования кода библиотеки JavaScript) в начале 2015 года с использованием пользовательского сценария Greasemonkey ( расширение браузера Firefox / Pale Moon ). и простой протокол связи букмарклет-пользовательский скрипт . ^[8] Он позволяет запускать букмарклеты (на основе библиотеки) на любых веб-сайтах, включая те, которые используют CSP и имеют схему https:// URI. Однако обратите внимание, что если/когда браузеры поддерживают отключение/запрет выполнения встроенных скриптов с использованием CSP, и если/когда веб-сайты начнут реализовывать эту функцию, это «сломает» это «исправление».

Концепция

Веб-браузеры используют URI для hrefатрибута тега и закладок. Схема URI, такая как или и которая обычно определяет протокол , определяет формат остальной части строки. Браузеры также реализуют URI, которые для парсера аналогичны любому другому URI. Браузер распознает указанную схему и обрабатывает остальную часть строки как программу JavaScript, которая затем выполняется. Результат выражения, если таковой имеется, рассматривается как исходный код HTML для новой страницы, отображаемой вместо оригинала.<a>httpftpjavascript:javascript

Выполняемый сценарий имеет доступ к текущей странице, которую он может проверять и изменять. Если скрипт возвращает неопределенный тип (а не, например, строку), браузер не будет загружать новую страницу, в результате чего скрипт просто запускается с содержимым текущей страницы. Это позволяет вносить такие изменения, как размер шрифта и цвет на месте, без перезагрузки страницы.

Немедленно вызванная функция , которая не возвращает никакого значения или выражение, которому предшествует voidоператор, не позволит браузеру попытаться проанализировать результат вычисления как фрагмент разметки HTML:

javascript : ( функция (){ //Операторы, возвращающие неопределенный тип, например присваивания})();

Применение

Букмарклеты сохраняются и используются как обычные закладки. По сути, это простые инструменты «одного щелчка», которые добавляют функциональность браузеру. Например, они могут:

• Изменить внешний вид веб-страницы в браузере ( например , изменить размер шрифта, цвет фона и т. д.)
• Извлечение данных с веб-страницы ( например , гиперссылок , изображений , текста и т. д.)
• Удалите перенаправления из результатов поиска (например, Google), чтобы показать фактический целевой URL-адрес ^[9]
• Отправьте текущую страницу в службу блогов, например Posterous , в службу сокращения ссылок, например bit.ly , или в службу закладок, например Delicious.
• Запрос в поисковой системе или онлайн-энциклопедии с выделенным текстом или с помощью диалогового окна
• Отправьте текущую страницу в службу проверки ссылок или службу перевода .
• Установите часто выбираемые параметры конфигурации, если на самой странице нет возможности сделать это.
• Управляйте параметрами воспроизведения аудио и видео HTML5, такими как скорость, положение, переключение зацикливания и отображение/скрытие элементов управления воспроизведением, первый из которых можно настроить за пределами типичных настроек диапазона проигрывателей HTML5. ^{[10] [11] [12]}

Монтаж

«Установка» букмарклета позволяет вам быстро получать доступ к программам JavaScript и запускать их одним щелчком мыши на панели закладок вашего браузера. Выполните следующие подробные шаги, чтобы установить букмарклет:

Способ 1: создание новой закладки

1. Откройте браузер: запустите браузер, в который вы хотите добавить букмарклет.
2. Добавить новую закладку:
   1. Перейдите в диспетчер закладок. В большинстве браузеров доступ к нему можно получить, нажав Ctrl+Shift+Oили выбрав «Закладки» в меню браузера, а затем выбрав «Диспетчер закладок».
   2. Щелкните правой кнопкой мыши панель закладок или папку, в которую вы хотите добавить букмарклет, и выберите «Добавить новую закладку» или «Добавить страницу».
3. Настройте закладку:
   1. В поле «Имя» введите описательное имя вашего букмарклета, которое поможет вам определить его функцию.
   2. В поле «URL» вставьте код JavaScript, предоставленный для букмарклета. Убедитесь, что он начинается с javascript:фрагмента кода.
4. Сохранение закладки: нажмите «Сохранить» или «Готово», чтобы добавить букмарклет на панель закладок или в папку.

Способ 2: перетаскивание

1. Найдите ссылку на закладку. Найдите ссылку на закладку на веб-странице. Эта ссылка обычно отображается в виде кликабельной кнопки или ссылки, помеченной функцией букмарклета.
2. Перетащите букмарклет на панель закладок:
   1. Нажмите и удерживайте ссылку букмарклета.
   2. Перетащите его прямо на панель закладок. Некоторые браузеры могут отображать заполнитель или выделять место, где будет размещен букмарклет.
   3. Отпустите кнопку мыши, чтобы поставить букмарклет на место.
3. Подтверждение: теперь букмарклет должен появиться на панели закладок и быть готовым к использованию.

Запуск букмарклета

Чтобы использовать букмарклет, просто щелкните его значок или имя на панели закладок. Код JavaScript будет немедленно выполнен на текущей веб-странице, которую вы просматриваете. Прежде чем использовать букмарклет, убедитесь, что веб-страница полностью загружена, чтобы обеспечить оптимальную производительность.

Советы

• Предупреждение о безопасности. Будьте осторожны при добавлении букмарклетов из ненадежных источников, поскольку они запускают код JavaScript, который потенциально может повлиять на безопасность или конфиденциальность вашего просмотра.
• Совместимость. Хотя большинство современных браузеров поддерживают букмарклеты, их функциональность может различаться. Проверьте документацию вашего браузера на наличие конкретных инструкций или ограничений.

Пример

Этот пример букмарклета выполняет поиск в Википедии по любому выделенному тексту в окне веб-браузера. При обычном использовании следующий код JavaScript будет установлен в закладку на панели инструментов закладок браузера ^[13] . С этого момента, после выбора любого текста, щелчок по букмарклету выполняет поиск.

javascript : ( функция () { функция se ( d ) {   вернуть д . выбор ? д . выбор . создатьдиапазон (). текст : д . получить выбор ()     } вар s = se ( документ );    for ( var i = 0 ; i < frames . length && ( s == null || s == '' ); я ++ ) s = se ( frames [ i ]. document );            if ( ! s || s == '' ) s = Prompt ( 'Enter%20search%20terms%20for%20Wikipedia' , '' );       open ( 'https://en.wikipedia.org' + ( s ? '/w/index.php?title=Special:Search&search=' + encodeURIComponent ( s ) : '' )). фокус ();        })();

Букмарклеты могут изменять местоположение , например, для сохранения веб-страницы на Wayback Machine .

javascript : местоположение . href = 'https://web.archive.org/save/' + документ . расположение . href ;

Откройте новое окно или вкладку веб-браузера , например, чтобы показать источник веб-ресурса, если веб-браузер поддерживает схему URI источника представления ,

javascript : void ( window . open ( 'view-source:' + location ));

Показать информацию, связанную с текущим URL-адресом , например:

javascript : alert ( '\tdocument.URL\n' + document . URL + ' \n\tdocument.lastModified\n' + document.lastModified + '\n\tlocation\n' + location ) ;

Рекомендации

1. Джонатан Авила (2 марта 2014 г.). «Как создать фавлет для тестирования доступности». Архивировано из оригинала 22 января 2018 г. Проверено 23 мая 2023 г.{{cite web}}: CS1 maint: bot: исходный статус URL неизвестен ( ссылка )
2. Домен bookmarklets.com. Архивировано 7 июля 2009 г. на Wayback Machine, зарегистрировано 9 апреля 1998 г.
3. «Активация команд JavaScript с личной панели инструментов» . Что нового в JavaScript 1.2 . Корпорация Netscape Communications. 1997. Архивировано из оригинала 11 июня 2002 г.
4. Уиллисон, Саймон (10 апреля 2004 г.). «Электронное письмо от Брендана Эйха». СайтПоинт . Проверено 26 сентября 2014 г.
5. «Ошибка 866522 — Букмарклеты, на которые влияет CSP» .
6. «Букмарклеты мертвы» . 23 октября 2014 г.
7. «Медленная смерть букмарклетов». 16 ноября 2012 г.
8. «Воскресение букмарклетов».
9. Рудерман, Джесси. «Букмарклеты для устранения неприятностей». Сайт букмарклетов Джесси . Проверено 29 марта 2013 г.
10. "Букмарклеты скорости видео YouTube" . sgeos.github.io . 2017-10-29.
11. Кант, Кушал (23 августа 2017 г.). «Как использовать параметры в тегах/атрибутах видео HTML5». искатель .
12. «Тег HTML-видео» . www.w3schools.com .
13. Протестировано в Mozilla Firefox , Opera , Safari и Chrome . Не работает в IE7 или IE8. Первоисточник: Алекс Болдт

Внешние ссылки

• Калишаин, Тара (3 февраля 2004 г.). «Букмарклеты ускоряют веб-серфинг». Журнал ПК . Проверено 31 августа 2007 г.