Предлагаю админам прекрепить эту тему. Потому что это тоже разнавидность скриптов.

Введение:
Bookmarklets (букмарклеты) - закладки с JavaScript кодом. Код выполняется в момент нажатия и может влиять на страницу, как обычный JavaScript. Код нужно вставлять в поле адреса (по сути работает, как тег <a href="javascript:alert('Hello!');">Hello!</a>).
Bookmarklets работают во всех современных браузерах.

Как создать bookmarklet?
1. Создать закладку.
2. Вставить в поле адреса код bookmarklet
Готово!

Стандартный шаблон bookmarklet:

javascript:void((function () {
    alert('test');
})());

На место alert('test'); подставьте стандартный код JavaScript. После нажатия на закладку - он выполнится.

Пример 1:
Делаем переадресацию с адреса вида: https://developer.mozilla.org/ru/Add-ons/WebExtensions
На адрес вида: https://developer.mozilla.org/en-US/Add-ons/WebExtensions.

javascript:void((function () {
  window.location.href = document.location.href.replace(/^https?\:\/\/(www\.)?developer\.mozilla\.org\/[a-z]+(\-[a-z]+)?\//i, 'https://developer.mozilla.org/en-US/');
})());

Пример 2:
Просто редирект (перенаправление) с текущего адреса на результат его проверки.
То есть:
Было - google.ru
Стало - https://www.similarweb.com/website/google.ru

javascript: void((function() {
    window.open('https://www.similarweb.com/website/' + document.domain);
})());

Пример 3:
Поиск в гугл выделенного на странице текста.
Выделить текст на странице. Нажать bookmarklet - откроется страница с результатами поиска в google.

javascript:void((function () {
    function getSelectionText() {
        const activeEl = document.activeElement;
        const activeElTagName = activeEl.tagName.toLowerCase();

        if (activeEl && (activeElTagName === 'textarea' || activeElTagName === 'input')) {
            return activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
        }

        return String(window.getSelection());

    }

    const url = 'https://www.google.ru/search?q=%s';
    window.location.href = url.replace(/\%s/, getSelectionText());
})());

Что за странный вид кода получается при вставке Bookmarklet в закладку?
Это URI Encoding в который кодируется JavaScript, потому что в адресе нельзя пробелы. Ну и чтобы проблем с кодировками не было.
Вы увидете код похожего вида:

javascript:void((function%20()%20{%20%20%20window.location.href%20=%20document.location.href.replace(/^https?\:\/\/(www\.)?developer\.mozilla\.org\/[a-z]+\-?[a-z]*\//i,%20'https://developer.mozilla.org/en-US/');%20})());

Существует 2 (два) стандартных способа вернуть этому коду оригинальный вид:
1. Вставить код в онлайн сервис: http://jsbeautifier.org/ или любой другой.
2. Использовать стандартные инструменты браузера (ctrl+shift+I) и там в разделе "дебаг" (отладка) есть кнопочка, которая делает код красивым.
Конечно вы можете найти любое дополнение или даже отдельную программу для красивого форматирования кода. Например дополнение Web Developer или любая IDE типа Eclipse или NetBeans умеет красиво форматировать. Как и множество плагинов для текстовых редакторов: Notepad++, Atom и других.

Оптимизаци:
Лишние пробелы и табуляция, длинные имена переменных, комментарии. Всё это занимает место и память. Некоторые куски кода меденные, хотя это неочевидно.
Оптимизатор Google Closure Compiler исправит всё за вас! Просто вставьте код в окошко и нажмите кнопочку! Это не единственный оптимизатор, их не мало, например: UglifyJS
Если видите код с переменными a, b, c - это не значит, что его кто-то так писал:

function hello(a){alert("Hello, "+a)}hello("New user");

Его пропустили через оптимизатор.

Обфускация (в качестве шутки, но знать об этом надо, если встретите)
Хотите скрыть ваш код от злобного соперника, который может скопировать и изменить ваш скрипт под себя? Тогда вам на выбор несколько сервисов заменяющих имена функций на последовательность символов, которые после компиляции выполняются как ваш код (по сути это он и есть):
http://www.jsfuck.com/
http://utf-8.jp/public/jjencode.html
http://utf-8.jp/public/aaencode.html
Хотите немного запутать сам текст? Тогда вам в помощь leet speak:
http://textinvert.ru/
http://www.sherv.net/weirdmaker.html
https://eeemo.net/

Где писать bookmarklets??? (инструменты разработки)
1. Самый простой и удобный инструмент: Scratchpad. Он встроен в Firefox, нажмите Shift+F4 для открытия. И откройте консоль, чтобы видеть ошибки: Ctrl+Shift+K. Только нужно помнить, что и Scratchpad не всегда ведет себе так, как поведет bookmarklet.
2. Множество сред разработки (IDE) типа Eclipse или NetBeans могут открывать результат работы JavaScript в браузере или даже имеют встроенный браузер.
3. Atom - текстовый редактор. По сути сам является браузером. Но для удобной разработки придется поискать плагины к нему.
4. GreaseMonkey - в нём тоже можно тестировать код, только нужно иметь ввиду, что возможности и привилегии кода в GreaseMonkey больше. Поэтому код работающий там может не сработать в bookmarklet. Для Chrome (Chromium) есть аналог: Tampermonkey

Как писать bookmarklets???
1. Способ 1: просто писать код. По некоторым сведениям до 2000 символов. (поэтому код пропускают через оптимизатор - чтобы больше кода поместилось)
2. Способ 2: написать код, который подгружает другой код из интернета и выполняет. Так снимается ограничение на 2000 символов.

Хаки bookmarklet (отличия от JavaScript)
1. Если функция вернет без void значение return '123', то возвращенное значение '123' откроется в текущей вкладке и будет помещено в <body>...</body> пустой страницы.

javascript:(function(){   return 'hello'; })();

Проблемы:
1. Если на сайте включено Content Security Policy, то window.open(), window.location.href = document.URL и подобные функции для загрузки контента с других сайтов не сработают.
Причем такой хак со вставкой скрипта в страницу содержимое которой получаем через return - тоже не сработает. И при этом даже ошибок в консоль не пишет:

javascript: (function() {
    const s = document.createElement('script');
    s.innerHTML = "window.open('https://web.archive.org/web/' + location.href)";
    return s;
})();

Ссылки:
https://en.wikipedia.org/wiki/Bookmarklet - страница на Википедии
https://forum.mozilla-russia.org/viewto … =36530&p=1 - старая тема на этом форуме
https://support.mozilla.org/ru/kb/ispol … olneniya-z - описание bookmarlets на mozilla.org с парой ссылок на примеры
http://javascript.ru/unsorted/bookmarklet - гайд на javascript.ru
Гайд на habrahabr.ru: Часть 1, Часть 2, Часть 3

Отредактировано Dorian (21-10-2016 20:49:04)