Як створити текстовий букмарклет з JavaScript

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

У цій статті ми побачимо, як швидко і легко це зробити придумати букмарклет шляхом створення такої виконує Wikiwand (краще виглядає Вікіпедія) пошук для вибраного тексту на будь-якій веб-сторінці.

Як працюють закладки

URI букмарклета використовує javascript: протоколу що вказує на те складається з коду JavaScript. Коли ви натискаєте на букмарклет, ви можете запустити JavaScript на веб-сторінці та виконувати завдання, такі як зміна зовнішнього вигляду сторінки, перенаправлення на іншу сторінку або відображення нової інформації.

Оскільки закладки по суті є набори кодів JavaScript, їх легко створити за допомогою невеликих знань JavaScript, або для особистого користування, або для надання його користувачам, наприклад, WordPress робить його з його пресі.

Початок роботи з кодом JavaScript

The Структура URL-адреси Використовується Wikiwand для англомовної статті https://www.wikiwand.com/uk/articleTitle. Нам потрібно написати сценарій, який переходить на сторінку Wikiwand, з якої URL-адреси закінчується рядком, який вибрано користувачем - потрібно виділити вибраний текст ставити на місце articleTitle.

По-перше, ми Отримати текст користувач вибрав на сторінці наступний код:

 getSelection (). toString () 

Ми потребуємо лиття об'єкт повертається getSelection () як рядок за допомогою toString () методу, щоб зробити це вивести вибраний текст.

Далі нам потрібно здійснити візит на сторінку статті 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 (). замінити (/ \ t ) 

Необов'язковий замінити (/ 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 з скриптом букмарклета як значення його href атрибут:

   Пошук у вікні пошуку  

Як зберігати букмарклети окремо

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

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

 // додаємо в один рядок без розривів рядків javascript: (() => with (document) let s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Вище вказаний фрагмент коду загорнуті в функцію стрілки, що викликається самостійно, і використовує функції ECMAScript 6, такі як дозволяє для зменшення довжини коду. Він додає a > , що вказує на myscript.js файлу розділу документа коли користувач натискає на букмарклет (зверніть увагу, що вам може знадобитися використовувати абсолютний шлях для myscript.js файл).