Полезная информация

Будьте в курсе последних изменений в мире Mozilla, следя за нашим микроблогом в Twitter.

№111-10-2016 20:19:30

Dorian
Забанен
 
Группа: Members
Зарегистрирован: 27-09-2016
Сообщений: 81
UA: Firefox 49.0

Bookmarklets (букмарклеты) - закладки с JavaScript кодом

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

Введение:
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/');
})());


Значение регулярного выражения можно увидеть тут /^https?://(www.)?developer.mozilla.org/[a-z]+(-[a-z]+)?//i

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

Выделить код

Код:

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


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());
})());


Где взять:
1. http://marklets.com/ - сборник букмарклетов, код никто не проверяет, будьте осторожны!
2. Попросить на любом форуме в теме "скрипты" написать для вас, может кто-то поможет
3. Использовать google для поиска

Что за странный вид кода получается при вставке 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. :P
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> пустой страницы.

Результат выполнения кода: пустая страница с надписью "hello"

Выделить код

Код:

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


2. Ещё варианты обёрток для кода bookmarklet:
Вариант 1. Вызвать void последним: javascript:console.log('hello');void(0);
Вариант 2. Не вызывать return вконце: javascript:(function(){ console.log('hello'); /* в конце нету return */ })();
3. Если вставить в адресную строку код: javascript:(function(){   return 'hello'; })();, то javascript: из него удалится само в целях безопасности. Но если ввести javascript: вручную, то bookmarklet сработает.

Проблемы:
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 … 30&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)

Отсутствует

 

№211-10-2016 22:42:09

rbfyec
Участник
 
Группа: Members
Зарегистрирован: 07-07-2012
Сообщений: 348
UA: Firefox 37.0

Re: Bookmarklets (букмарклеты) - закладки с JavaScript кодом

Да вроде есть уже тема https://forum.mozilla-russia.org/viewtopic.php?id=36530

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

А при чём здесь base64?

Отсутствует

 

№311-10-2016 22:44:57

Dorian
Забанен
 
Группа: Members
Зарегистрирован: 27-09-2016
Сообщений: 81
UA: Firefox 49.0

Re: Bookmarklets (букмарклеты) - закладки с JavaScript кодом

rbfyec пишет:

А при чём здесь base64?

Исправил.

rbfyec пишет:

Да вроде есть уже тема https://forum.mozilla-russia.org/viewtopic.php?id=36530

Она не прикреплена и уже старая. Нету шапки темы. Хотя перенести что-то оттуда можно.

Отредактировано Dorian (11-10-2016 22:45:19)

Отсутствует

 

№421-10-2016 10:12:06

Dorian
Забанен
 
Группа: Members
Зарегистрирован: 27-09-2016
Сообщений: 81
UA: Firefox 49.0

Re: Bookmarklets (букмарклеты) - закладки с JavaScript кодом

Пример 4:
Open site through web.archive.org bookmarklet
Открывает текущий сайт в веб архиве.

скрытый текст

Выделить код

Код:

javascript: void((function() {
    window.open('https://web.archive.org/web/' + document.location.href);
})());

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

Отсутствует

 

№517-12-2016 12:47:33

bar22890
Участник
 
Группа: Members
Откуда: Латвия
Зарегистрирован: 12-05-2012
Сообщений: 89
UA: Firefox 50.0

Re: Bookmarklets (букмарклеты) - закладки с JavaScript кодом

:) [firefox] :)

Отредактировано bar22890 (08-01-2017 13:06:37)

Отсутствует

 

№601-01-2017 17:08:28

Machine79
Участник
 
Группа: Members
Откуда: Санкт_петербург
Зарегистрирован: 29-08-2016
Сообщений: 2
UA: Chrome 55.0
Веб-сайт

Re: Bookmarklets (букмарклеты) - закладки с JavaScript кодом

bar22890 пишет:

А кто устанавливал Tampermonkey на браузер Edge? У меня не устанавливаются скрипты, они просто скачиваются в папку, а не устанавливаются. Может их вручную нужно на Edge устанавливать? Не знаю куда написать, написал здесь...

Не много не по теме форум выбрал Здесь вроде только Mozilla ????

Отсутствует

 

№711-02-2017 13:54:48

Xant1k
Участник
 
Группа: Members
Зарегистрирован: 22-10-2011
Сообщений: 37
UA: Chrome 56.0

Re: Bookmarklets (букмарклеты) - закладки с JavaScript кодом

Будьте добры помогите создать букмарклет. На сайте крайне долго листать страницу вниз чтобы нажать кнопку добавить в закладки (закладка добавляется внутри сайта, а не для браузера). Ссылка по которой добавляется в закладки страница https://имя/torrents-details.php?id=123456789&pk=&bookmarked=1
Спасибо!

Отсутствует

 

№802-03-2017 06:24:58

Mishania
Участник
 
Группа: Members
Зарегистрирован: 22-10-2011
Сообщений: 315
UA: unknown 0.0

Re: Bookmarklets (букмарклеты) - закладки с JavaScript кодом

Есть у меня буркмарклет Upload

Выделить код

Код:

javascript:(function(){var%20c='ujs_max_upload',w=window,d=(w.document.body%20instanceof%20HTMLFrameSetElement%3Fw.frames[0]:w).document,e=d.getElementById(c);if(e){e.del();return};e=d.createElement('div');e.id=c;e.setAttribute('style','display:none;position:fixed;right:0;bottom:0;width:auto;height:auto;border:1px%20solid%20%23555;padding:10px;text-align:left;z-index:99999;background-color:%23EEE;background:-o-skin(%5Cx22Window%20Skin%5Cx22);');e.add=function(lnk,frm){var%20d=this.ownerDocument,a=d.createElement('a');a.href=lnk.href;a.target='_blank';a.setAttribute('style','padding:0;margin:0;border:none;text-decoration:none;color:%2300C;font:14px%20Times%20New%20Roman;');a.appendChild(d.createTextNode(lnk.text));this.appendChild(a);var%20f=d.createElement('form');f.action=lnk.action;f.method='post';f.enctype='multipart/form-data';f.target='_blank';f.setAttribute('style','display:block;margin:5px;');var%20t=d.createElement('input');t.type='file';t.name=lnk.name;t.setAttribute('style','width:auto;height:auto;padding:1px;margin:0;border-color:%23AAA;font:12px%20Arial;');t.onchange=function(){this.nextSibling.disabled=!this.value};f.appendChild(t);var%20s=d.createElement('input');s.type='submit';s.value='Upload';s.disabled=true;s.setAttribute('style','width:auto;height:auto;padding:1px%204px;margin:0%200%200%202px;color:buttontext;font:12px%20Arial;');f.appendChild(s);if(frm)for(var%20name%20in%20frm){var%20h=d.createElement('input');h.type='hidden';h.name=name;h.value=frm[name];f.appendChild(h)};this.appendChild(f)};e.vis=function(v){this.style.display=v%3F'block':'none';return%20this.offsetHeight*this.offsetWidth};e.del=function(){this.vis(false);this.parentNode.removeChild(this)};var%20b=d.createElement('div');b.title='Close';b.setAttribute('style','display:block;float:right;height:18px;width:18px;padding:0;margin:-5px;border:none;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAAZElEQVR42mNgGNyAGQixsVGU/AdCXjCbHczmxKaMFywlAlWiw6DAwIZNmQhYGqJEDWoqFiAGVmKKTwk73CRJ/Ep0GIyhbsPpO4hbIG4TwKaMk0EZ7hYBBk1cvmNDEmbDrmSwAADE8h10+qICXwAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAASUVORK5CYII=");background:-o-skin(%5Cx22Caption%20Close%20Button%20Skin%5Cx22);cursor:pointer');b.onclick=function(){this.parentNode.del()};e.appendChild(b);e.add({href:'http://fastpic.ru',text:'FastPic.ru',action:'http://fastpic.ru/uploadmulti',name:'file[]'},{uploading:'1'});e.add({href:'http://rghost.ru/',text:'Rghost.ru',action:'http://kaon.rghost.ru/files',name:'file'},{'data-max-file-size':'52428800'});d.documentElement.appendChild(e);e.vis(true)})();

Отправляет файлы на fastpic и rghost. Но теперь с rghost он не справляется. Почините пожалуйста, или предложите что-то альтернативное.

Отсутствует

 

№923-03-2017 13:17:09

bugmenot
Участник
 
Группа: Members
Зарегистрирован: 29-01-2012
Сообщений: 26
UA: Firefox 45.0

Re: Bookmarklets (букмарклеты) - закладки с JavaScript кодом

Возможно ли получить доступ к gBrowser из bookmarklet?

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2011 Mozilla Russia
Язык отображения форума: [Русский] [English]