Букмарклет

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

Другое название букмарклета — favelet или favlet , происходящее от слова «фавориты» (синоним «закладка»). ^[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 и имеют схему URI https://. Однако обратите внимание, что если/когда браузеры поддерживают отключение/запрет выполнения встроенных скриптов с использованием CSP, и если/когда веб-сайты начнут реализовывать эту функцию, это «сломает» это «исправление».

Концепция

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

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

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

javascript:(function(){  //Statements returning a non-undefined type, e.g. assignments})();

Использование

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

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

Установка

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

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

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

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

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

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

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

Советы

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

Пример

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

javascript:(function() {function se(d) {    return d.selection ? d.selection.createRange().text : d.getSelection()} var s = se(document); for (var i=0; i<frames.length && (s==null || s==''); i++) 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) : '')).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);

Ссылки

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

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

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

[1] Джонатан Авила (2 марта 2014 г.). «Как создать фавлет для тестирования доступности» . Архивировано из оригинала 22 января 2018 г. Проверено 23 мая 2023 г. {{cite web}}: CS1 maint: bot: исходный статус URL неизвестен ( ссылка )

[bookmarklets.com-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. Первоисточник: Алекс Болдт

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]