Букмарклеты (Bookmarklet)

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

javascript:(function(){ /* JavaScript-код */ })();

Такие кнопки называются Букмарклет (англ. bookmarklet).

Пример букмарклета в браузере Chrome

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

var links = document.querySelectorAll("a");
var html = '';
links.forEach(function(array_item, index) {
    html += array_item.href + "<br>";
});
var element = document.createElement('div');
element.innerHTML = html;
document.body.insertBefore(element, document.body.firstChild);

Самый простой способ выполнить этот код, это консоль браузера. Но если код надо выполнять постоянно, придётся каждый раз копировать код в консоль браузера, что может быть неудобно. В этом случае можно создать букмарклет, при нажатии на которой, будут выводиться все ссылки в начале страницы.

Ниже приведён сокращённый код из примера выше, т.к. букмарклет записывается в одну строчку.

javascript:(function(){var links = document.querySelectorAll("a");var html = "";links.forEach(function(array_item, index) {html += array_item.href + "<br>";});var element = document.createElement("div");element.innerHTML = html;document.body.insertBefore(element, document.body.firstChild);})();

Загрузка кода букмарклета из внешего сайта

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

Подключить JavaScript из внешнего сайта можно через следующий код:

var script = document.createElement('script');
script.src = 'http://mysite.ru/bookmarklet.js';
document.getElementsByTagName('head')[0].appendChild(script)

Вариант кода выше для сохранения в виде букмарклета.

javascript:(function(){var script=document.createElement('script'); script.src='http://mysite.ru/bookmarklet.js'; document.getElementsByTagName('head')[0].appendChild(script)})();