Букмарклет

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

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

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

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

История

Стив Кангас из bookmarklets.com придумал слово букмарклет ^[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 ) {   return d.selection ? d.selection.createRange ( ) . text : d.getSelection ( )​​​​​     } var s = se ( документ );    для ( var i = 0 ; i < frames . length && ( s == null || s == '' ); i ++ ) s = se ( frames [ i ]. document );            если ( ! s || s == '' ) s = prompt ( 'Введите%20термины%20поиска%20для%20Википедии' , '' );       открыть ( 'https://en.wikipedia.org' + ( s ? '/w/index.php?title=Special:Search&search=' + encodeURIComponent ( s ) : '' )). focus ();        })();

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

javascript : location . href = 'https://web.archive.org/save/' + document . location . 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. Джонатан Авила (2014-03-02). "Как создать фавлет для тестирования доступности". Архивировано из оригинала 2018-01-22 . Получено 2023-05-23 .{{cite web}}: CS1 maint: бот: исходный статус URL неизвестен ( ссылка )
2. Домен bookmarklets.com Архивировано 2009-07-07 на Wayback Machine, зарегистрирован 9 апреля 1998 г.
3. "Активация команд JavaScript с персональной панели инструментов". Что нового в JavaScript 1.2 . Netscape Communications Corporation. 1997. Архивировано из оригинала 2002-06-11.
4. Уиллисон, Саймон (10 апреля 2004 г.). «Электронное письмо от Брендана Эйха». SitePoint . Получено 26 сентября 2014 г. .
5. «Ошибка 866522 — букмарклеты, затронутые CSP».
6. «Букмарклеты мертвы». 23 октября 2014 г.
7. «Медленная смерть букмарклетов». 16 ноября 2012 г.
8. «Воскрешение букмарклетов».
9. Рудерман, Джесси. «Закладки для устранения раздражителей». Сайт закладок Джесси . Получено 29 марта 2013 г.
10. "YouTube Video Speed ​​Bookmarklets". sgeos.github.io . 2017-10-29.
11. Кант, Кушал (23 августа 2017 г.). «Как использовать параметры в тегах/атрибутах видео HTML5». findnerd .
12. "HTML-тег видео". www.w3schools.com .
13. Протестировано на Mozilla Firefox , Opera , Safari и Chrome . Не работает в IE7 или IE8. Первоисточник: Alex Boldt

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

• Калишайн, Тара (3 февраля 2004 г.). «Закладки ускоряют веб-серфинг». PC Magazine . Получено 31 августа 2007 г.