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

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

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

Как работают букмарклеты

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

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

Начните с кода JavaScript

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

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

 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 (). replace (/ \ n / g, '% 20' ) 

Необязательный заменить (/ \ п / г, '% 20') в конце заменяет любой символ новой строки (\ п) в тексте с одним пробелом (% 20).

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

Создать закладку

Откройте окно закладок вашего браузера и добавить новую закладку:

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

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

Быстрый доступ

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

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

Создать ссылку на букмарклет

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

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

   Wikiwand Поиск Bookmarklet  

Как хранить букмарклеты отдельно

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

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

 // добавить в одну строку без разрывов строк javascript: (() => with (document) let s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Фрагмент кода выше обернутый в самозапускающуюся функцию стрелки, и использует функции ECMAScript 6, такие как позволять ключевое слово, чтобы уменьшить длину кода. Добавляет > тег, указывающий на myscript.js подать в раздел документа когда пользователь нажимает на закладку (обратите внимание, что вам может понадобиться использовать абсолютный путь для myscript.js файл).