Блоґ одного кібера

Історія хвороби контуженого інформаційним вибухом

Як написати свій букмарклет?

with 22 comments

Букмарклет (bookmark) – це слово створене поєднанням слів bookmark (закладка) і applet (application (застосунок) + зменшувальний суфікс -let). Таким чином правильним перекладом bookmarklet було б “закластуночок” (чи “застокладочка”), але ви цього краще не кажіть Юрку Зеленому. Але я відхиляюсь. Отож, букмарклет, це маленька програма що міститься в закладці.

Як її туди помістили? Ну, виявляється браузери крім протоколів http, ftp, ітп, розуміють такий протокол як javascript. І коли отримують посилання з цим протоколом, при кліку по ньому не змінюють сторінку, а виконують його href як код JavaScript. Щоб побачити приклад простого букмарклету, створіть документ bookmarklet.htm, і помістіть в нього такий код:

<html>
<head><meta charset="utf-8" /></head>
<body>
<a href="javascript:
    alert('Привіт!')
">Мій букмарклет</a>
</body>
</html>

Якщо відкрити його в браузері, ви побачите чисту сторінку з єдиним посиланням Мій букмарклет, яке при кліку буде показувати повідомлення “Привіт!”. Якщо перетягнути це посилання на панель закладок в браузері, то тепер ви зможете в будь-який момент отримати привітання на будь-якій сторінці яку дивитесь, досить лише натиснути букмарклет.

Але це не дуже корисний букмарклет. Щоб він робив щось корисніше, досить замінити код в рядку 5, на якийсь корисніший.

Наприклад є такий сайт – lib.rus.ec. Вони хоч мають домен еквадору – але москалі, і коли відкрити їх сайт, то вискакує повідомлення, яке блокує доступ до сторінки, і просить грошей за чужі книжки. Я переконаний що в цьому випадку дозволяється використати принцип “грабуй награбоване”, і додати в букмарклет такий код:

 document.getElementsByClassName('lsp-overlay')[0].remove()

І тоді при кліку по букмарклету це вікно пропадатиме. Клас, правда? (Не забудьте забрати виклик alert() який ми написали там раніше)

Але давайте зробимо ще щось складніше і корисніше. Давайте зробимо букмарклет, який оформлює посилання на веб-сторінку в форматі вікіпедії cite web, і дає її нам в якомусь вікні. Це такий шаблон, який гарно оформлює посилання, але заповнювати його руками – ще та морока.

Для букмарклетів є кілька правил. Їх код все таки міститься всередині атрибуту елемента HTML, і повинен відповідати стандартам цієї мови. Наприклад всі подвійні лапки """ (ну ви зрозуміли), повинні бути заміненими HTML-кодом ". Крім того, перехід на новий рядок вважається еквівалентним пробілу, тому однорядкові коментарі можливі лише в кінці скрипта:

alert('Це вискочить');
// alert('Це не вискочить бо закоментовано');
alert('Це теж не вискочить бо коментар продовжується');

Ну і тому що ввесь скрипт здається браузеру написаним на одному рядку – бажано шанувати крапки з комою.

Якщо ми хочемо написати великий букмарклет, який можливо використовуватиме jQuery, та інші бібліотеки, нам захочеться їх якось підвантажувати. Але, віднедавна в адміністраторів серверів з’явилась нова можливість збільшувати безпеку вводячи обмеження на джерела з яких на сайт завантажуються ресурси – Content Security Policy, тому такі букмарклети можуть працювати не всюди. Можливо доведеться все переписати, мініфікувати і запакувати, але на всяк випадок, ось вам код підвантаження скрипта:

(function () {
    var script = document.createElement('script');
    script.src='https://gist.githubusercontent.com/bunyk/6ae97e5c3de490cfb4a1/raw/b7fcfde5c40314262893761418a6a25dd6ed0ce8/cite_web.js';
    document.body.appendChild(script);
}());

Подібним чином вже з того скрипта ми можемо підвантажити jQuery та наприклад CSS.

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

cite_web

Щоб поставити собі такий, перенесіть оце посилання в закладки: “{{cite web|…“, а тоді в контекстному меню закладки натисніть “Властивості”, чи “Редагувати”, і замініть текст поля “Location” на

javascript:(function () {
    var script = document.createElement('script');
    script.src='https://gist.githubusercontent.com/bunyk/6ae97e5c3de490cfb4a1/raw/3102c3e285c6e24a9aed98d1bc7f0b7abeda20fc/cite_web.js';
    document.body.appendChild(script);
}());

Ось код:

Written by bunyk

Березень 10, 2016 at 14:31

Відповідей: 22

Subscribe to comments with RSS.

  1. Букмарклети дійсно корисна штука, користуюсь деякими для seo. Ось їх приклади – http://www.searchengines.ru/articles/69_poleznykh_bu.html , http://www.lucky-seo.com/services/bookmarklets

    Ivan

    Березень 11, 2016 at 10:58

  2. та, букмарклети цікава штука, не знав, що є букмарклет який пише посилання в вікі. В мене особисто недавно була якась біда з посиланнями. Пробував перекладати одну статтю, а посилання скопіювати, але таке враження, що при копіюванні ті посилання якось пошкодились, а я не до кінця знаю, як їх виправити – і в тій статті пише “Помилка цитування: Некоректний теґ ; назва «PRL-20160211» визначена кілька разів з різним вмістом Помилка цитування: Некоректний теґ ; назва «PRL-20160211» визначена кілька разів з різним вмістом”

    patlatus

    Березень 12, 2016 at 15:48

  3. […] ще щойно подумав що мій букмарклет cite web, при застосуванні на сайті Google Books повинен був би […]

  4. Можливо той букмарклет для cite web міг би запитувати у користувача ім’я автора і все інше в одній формі з деякими полями вже заповненими. Тільки це мало б бути не модальне вікно.

    harmyder

    Березень 13, 2016 at 18:17

    • Там стоїть content editable, тобто можна дописати прямо в тексті. А не модальне це яке?

      Думаю я з цим проектом продовжу, бо бачу що не одному мені воно може знадобитись.🙂

      bunyk

      Березень 13, 2016 at 19:20

      • може у вебі такого немає, та з моїх давніх запасів знань модальне – це таке, що головне вікно стає не доступним поки ти це не закриєш.

        harmyder

        Березень 17, 2016 at 19:22

  5. Твоя маленька цукерка для cite-web дуже корисна, коли треба накидати нового на ВП:ППВ🙂 Тільки дату створення воно майже ніколи не визначає. Чого так?

    Vira Motorko

    Вересень 27, 2016 at 11:21

    • Бо воно працює лише на сайтах о підтримують Open Graph Protocol (http://ogp.me/), а саме містять тег meta property=”article:modified_time”. А на яких найчастіше треба дату визначати? Може додати код який її знаходить?

      bunyk

      Вересень 27, 2016 at 17:02

      • Всілякі новинні сайти. (Якщо твоя ласка, то погортай ВП:ППВ).

        Vira Motorko

        Вересень 29, 2016 at 14:43


Залишити відповідь

Заповніть поля нижче або авторизуйтесь клікнувши по іконці

Лого WordPress.com

Ви коментуєте, використовуючи свій обліковий запис WordPress.com. Log Out / Змінити )

Twitter picture

Ви коментуєте, використовуючи свій обліковий запис Twitter. Log Out / Змінити )

Facebook photo

Ви коментуєте, використовуючи свій обліковий запис Facebook. Log Out / Змінити )

Google+ photo

Ви коментуєте, використовуючи свій обліковий запис Google+. Log Out / Змінити )

З’єднання з %s

%d блогерам подобається це: