Как создать букмарклет с текстовым поиском с помощью JavaScript

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

В этой статье мы увидим, как быстро и легко создать букмарклет, создав тот, который выполняет Wikiwand (лучше выглядит Википедия) поиск выбранного текста на любой веб-странице.

Читайте также: 100+ полезных букмарклетов для повышения производительности | Окончательный список

Как работают букмарклеты
URI букмарклета использует javascript: протокол это означает, что он состоит из кода JavaScript. Нажав на букмарклет, вы можете запустить JavaScript на веб-странице и выполнять такие задачи, как изменение внешнего вида страницы, перенаправление на другую страницу или отображение новой информации на ней.

Поскольку закладки по сути являются наборами кода JavaScript, их легко создавать с небольшими знаниями JavaScript, как для личного использования, так и для предложения пользователям, как это делает WordPress со своим Нажмите это букмарклет.

Читайте также: Переблог контента с других сайтов с помощью букмарклета «Нажмите это»

Начните с кода JavaScript
Структура URL, которую Wikiwand использует для англоязычной статьи: https://www.wikiwand.com/en/articleTitle. Нам нужно написать скрипт, который переходит на страницу Wikiwand, URL которого заканчивается строкой, которую пользователь только что выбрал – выбранный текст должен быть помещен вместо articleTitle.

Сначала мы получаем текст, выбранный пользователем на странице, со следующим кодом:

GetSelection (). ToString ()

Нам нужно привести объект, возвращенный GetSelection () в виде строки, используя нанизывать() метод, чтобы заставить его выводить выделенный текст.

Далее нам нужно посетить страницу статьи Wikiwand. Мы добьемся этого, используя следующую логику, где newURL будет URL-адрес страницы статьи Wikiwand (которая будет содержать выбранную строку в конце):

location.href = newURL

Когда мы соединяем эти два фрагмента кода вместе, мы получаем следующий скрипт:

location.href =
    «Https://www.wikiwand.com/en/’+getSelection () .ToString ()

Теперь нам нужно только добавить протокол javascript: в начало, и у нас есть окончательный код, который мы будем использовать в нашей закладке:

// добавить в одну строку без разрывов строк
JavaScript: location.href =
    ‘Https://www.wikiwand.com/en/’
        + GetSelection (). ToString (). Заменить (/ п / г, ‘% 20’)

Необязательная замена (/ n / g, ‘% 20’) в конце заменяет любой символ новой строки ( n) в тексте одним пробелом (% 20).

Код JavaScript готов. Обратите внимание, что код должен быть помещен в одну строку без разрывов строк, так как позже он будет добавлен в поле ввода текста.
Создать закладку
Откройте окно закладок вашего браузера и добавьте новую закладку:

• Firefox: нажмите ctrl + shift + B / cmd + shift + B, щелкните правой кнопкой мыши «Панель инструментов закладок» и выберите «Новая закладка».
• Chrome: нажмите Ctrl + Shift + O / CMD + Alt + B, щелкните правой кнопкой мыши «Панель закладок» и выберите «Добавить страницу…».

В поле URL скопируйте и вставьте код JavaScript из ранее. Как только закладка создана, она готова к использованию; перейдите на любую веб-страницу, выберите слово, которое вы хотите найти в Wikiwand, и нажмите на закладку – страница статьи Wikiwand откроется сразу.
Быстрый доступ
Вместо того, чтобы обращаться к меню закладок каждый раз, когда вам нужен букмарклет, вы можете выбрать отображение его прямо в браузере для быстрого доступа.

• Firefox: нажмите «Вид> Панели инструментов» в верхней строке меню и выберите «Панель инструментов закладок».
• Chrome: нажмите Ctrl + Shift + B / CMD + Shift + B.

Создать ссылку на букмарклет
Вы также можете добавить свой букмарклет на веб-сайт в виде гиперссылки, которую посетители могут добавить в закладки, просто перетащив ссылку на панель инструментов закладок, или щелкнув правой кнопкой мыши ссылку и выбрав опцию, чтобы добавить ее в закладки.

Чтобы превратить ваш букмарклет в гиперссылку, создайте HTML-тег со сценарием bookmarklet в качестве значения его атрибута href:

<a href=”https://www.hongkiat.com/javascript:location.href=”https://www.wikiwand.com/en/’
+getSelection().toString().replace(/n/g,’%20′)”>

      Wikiwand Поиск Bookmarklet

Как хранить букмарклеты отдельно
Вы также можете использовать отдельный файл JavaScript для хранения кода букмарклета, что, вероятно, не нужно, если у вас есть короткий скрипт – такой, как мы только что видели в этом руководстве – но он может пригодиться, когда код JavaScript слишком длинный, чтобы скопируйте и вставьте его в панель закладок вашего браузера.

Файл myscript.js будет содержать основной код JavaScript для букмарклета, и вам необходимо добавить следующий код в качестве URL-адреса закладки (либо на панель закладок браузера, либо в качестве значения атрибута href в файле HTML):

// добавить в одну строку без разрывов строк
JavaScript: (() => {
  с (документ) {
    let s = createElement (‘script’);
    s.src = “https://www.hongkiat.com/myscript.js”;
    head.appendChild (ы)}
  }) ();

Приведенный выше фрагмент кода обернут в самозапускающуюся функцию стрелки и использует функции ECMAScript 6, такие как ключевое слово let, для уменьшения длины кода. Добавляет