Установка расширения Google Chrome без публикации в интернет-магазине Chrome

Публикацию отклонили, воевать не хочется, расширение бесплатное и необходима только одна (две) установки.

Уважаемый разработчик!
Ваш продукт для Google Chrome (название: "WAFriends", идентификатор: cpjembijgjehhiakijmcdjbncingfdip) нарушил наши правила и был удален из сервиса "Интернет-магазин Chrome".
Ваш продукт нарушает следующий раздел документа "правила программы":
"Спам и размещение в магазине"
Отсутствуют описание объекта в соответствующем поле, значки или скриншоты. Кроме того, объект вызывает подозрения.

1) Если расширение было установлено через "Загрузить распакованное расширение" удаляем.
2) Жмем "Упаковать расширение", выбираем каталог с расширением (ключ не нужен), в итоге появляются два файла zzzz.crx и zzzz.pem 
3) Устанавливаем zzzz.crx посредством drag-and-dropping на страницу расширений chrome://extensions
4) После перезагрузки браузера расширение будет отключено "Unsupported extensions disabled" 
5) Вносим (добавляем) ИД расширения в белый список, ИД на странице расширений отображается не полностью, потому ищем по наименованию каталога
C:\Users\user\AppData\Local\Google\Chrome\User Data\Default\Extensions\koajdlofjfmhmlblclllndnhmjedpnjd
6) Перезагружаем браузер, на странице расширений видим надпись "Этим браузером управляет ваша организация."

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\ExtensionInstallWhitelist]
"1"="llndpnjdkoajdldnhofjfmhmlblclmje"
"2"="koajdlofjfmhmlblclllndnhmjedpnjd"
Безымянный2 wafriends.crx wafriends.reg

Split a string by whitespace, keeping quoted segments

Разделить строку по пробелам, с возможностью использовать пробелы в кавычках.

	// вместо простого сплита
	'58 "5 A"'.split(/\s+/);
	// используем матч
	'58 "5 A"'.match(/(?:[^\s"]+|"[^"]*")+/g);
Живой пример использования в фильтре.

	$('#lt').on('keyup paste input', '.filter input', function() {
	    var vals = $(this).val().trim().match(/(?:[^\s"]+|"[^"]*")+/g) || [];
	    // поиск по кол-ву вхождений набора входных значений (разделены пробелом, пробел тоже можно передать в поиск, пример, 100 "5 А")
	    var checkAll = function(val) {
		var finded = 0;
		$.each(vals, function(i,o){ finded += (val.toUpperCase().indexOf(o.replace(/\"/g,'').toUpperCase()) > -1 ? 1 : 0); });
		return vals.length != finded;
	    };
	    $(this).closest('.row').find('.prop-val,.mod').removeClass('hidden').filter(function(){ return vals.length != 0 && checkAll($(this).text()); }).addClass('hidden');
	});

Select2 изменение алгоритма фильтра


    $(".select2foreqtype").select2(
	{ placeholder: 'Укажите тип', 
	  allowClear: true,
	  language: 'ru',
	  minimumInputLength: 1,
	  templateResult: function (data) { // в выпарающем списке отображаем номер
		  if (!data.id) { return data.text; }
		  return $('<div class="clearfix"><span class="pull-left">' + data.text + '</span><span class="pull-right">' + $(data.element).data('srn') + '</span></div>');
	  },
	  matcher: function(params, data) { // поиск не только по наименованию, но и по номеру, причем совместно, разделитель пробел, и без учета порядка
	    var terms = ((params.term || '').trim().toUpperCase()).split(/\s/);
	    var matchCount = 0;
	    var fullText = data.text.toUpperCase() + $(data.element).data('srn');
	    $.each(terms, function(i,term){
		if (fullText.indexOf(term) >= 0) {
			matchCount++;
		}
	    });
	    if (terms.length == matchCount) {
	        return data;
	    }
	    return false;
	  },
	}).on('select2:select', function(e){
console.log(e);
	});

Fly to cart

«Полет в корзину», если у нас нужно «отправлять в полет» только картинку, то все очень легко, пример с перемещением всей карточки и текст описания и картинка. Безымянный15 Свойство zoom не использую, ибо при его использовании расчет координат отличается от браузера к браузеру, использую transform: scale, если не поддерживается, просто «сворачиваю» по высоте.
Ниже код того что на картинке. <style> .card { font-size: 60px; color: #444; } .card .panel-body { font-size: 60px; } .card .fa-cart-plus { font-size: 26px; } .cart { margin: 60px 100px; } .cart i { font-size: 46px; color: #aeb733; } .card-body { position: relative; margin-bottom: 6px; } .card-body-copy { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1100; zoom: 1; } </style> <div id="cart" class="cart clearfix"> <button type="button" class="btn btn-default btn-lg pull-right"><i class="fa fa-shopping-cart" aria-hidden="true"></i></button> </div> <div class="row"> <div class="col-xs-3"> <div class="card panel panel-default"> <div class="panel-heading clearfix"> <div class="pull-right"><h4>Card 1</h4></div> </div> <div class="panel-body"> <div class="card-body"> <img src="/public/img/export_excel2.png"> 111<i style="color: #ee0;" class="fa fa-bitcoin" aria-hidden="true"></i> </div> <div class="clearfix"> <div class="pull-right"><button class="btn"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></div> </div> </div> </div> </div> <div class="col-xs-3"> <div class="card panel panel-default"> <div class="panel-heading clearfix"> <div class="pull-right"><h4>Card 2</h4></div> </div> <div class="panel-body"> <div class="card-body"> <img src="/public/img/export_excel2.png"> 222<i style="color: #c0e;" class="fa fa-eur" aria-hidden="true"></i> </div> <div class="clearfix"> <div class="pull-right"><button class="btn"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></div> </div> </div> </div> </div> <div class="col-xs-3"> <div class="card panel panel-default"> <div class="panel-heading clearfix"> <div class="pull-right"><h4>Card 3</h4></div> </div> <div class="panel-body"> <div class="card-body"> <img src="/public/img/export_excel2.png"> 333<i style="color: #0f0;" class="fa fa-dollar" aria-hidden="true"></i> </div> <div class="clearfix"> <div class="pull-right"><button class="btn"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></div> </div> </div> </div> </div> </div> <script type="text/javascript"> (function($) { $('body').on('click', '.btn', function(e) { var card = $(this).closest('.panel-body').find('.card-body'); if (!card.size()) return; var cardCopy = $(this).closest('.panel-body').find('.card-body-copy'); if (!cardCopy.size()) $('<div/>').addClass('card-body-copy').html( card.html() ).appendTo(card); var cart = $('#cart .fa-shopping-cart'); var cardCopy = $(this).closest('.panel-body').find('.card-body-copy'); if (!cardCopy.size() || !cart.size()) return; var cardCoord = cardCopy.offset(); var cartCoord = cart.offset(); var lenght = Math.sqrt(Math.pow((cardCoord.top-cartCoord.top),2) + Math.pow((cardCoord.left-cartCoord.left),2)); var zoom = 0.5; var speed = 1/4; // pixel in msec var maybeTransform = (card.get(0).style['transform'] !== undefined); var l = (cartCoord.left - cardCoord.left); var t = (cartCoord.top - cardCoord.top); $(cardCopy).animate($.extend({ opacity: 0.4, left: (l > 0 ? '+' : '') + l.toString(), top: (t > 0 ? '+' : '') + t.toString(), }, maybeTransform ? {} : {height: 'toggle'}), { duration: lenght/speed, step:function(now, fx){ if (fx.prop == 'left') { $(this).css('transform-origin', '0 0' ); $(this).css('transform', 'scale('+ (zoom+(1-zoom)*(1-now/l)) +')' ); } }, complete:function(){ $(this).remove(); // cart.toggle( "bounce", { times: 3 }, "slow" ); } }); }); })(jQuery); </script>

JavaScript генератор паролей

Простой модулек для генерации пароля с настройкой обязательного наличия заглавных, цифр, символов и настройкой набора символов исключений.

IE and cursor and pseudo element, detect click event on pseudo-element

Отображаем курсор над псевдо элементом, как обычно у всех, все хорошо, в ИЕ не работает.
IE :-(
IE :-)
Для ИЕ используем пустой спан как контейнер.
<div id="test1" class="test">IE -(</div>
<div id="test2" class="test">IE -)<span></span></div>
И уже на него
#test2 span {
 cursor: pointer;
}
Ну и тут же тема, как ловить события от псевдоэлемента, имеем три варианта:
1) воспользуемся CSS свойством pointer-events, но тут ограничение, поддержка только в современных браузерах, так и сделано для первого примера
2) обернуть реальным элементом, тема для второго варианта
3) еще можно контролировать координаты точки клика, как-то так
if (e.offsetX > e.target.clientWidth) {

text-overflow: ellipsis и иже сним

Забью свой костыль в виде аналога эффекта получаемого с помощью свойства text-overflow: ellipsis.
В моем случае задача немного сложнее, текст не умещался совсем не много, не больше чем на 50%, потому нужно было его отобразить при наведении курсора.
Все очень легко, на помощь пришли, псевдокласс :hover и свойство direction: rtl. Все бы ничего, Firefox, Chrome, Opera, все отлично, IE приплыли.
Безымянный Ну раз уж, придется задействовать JavaScript, значит чуточку добавим требований, текст не будет просто переключаться с отображения, то с начала, то с конца, пусть он плавно прокручивается, тут и ограничение в 50% снимется.
Сляпал плагин, малютка, меньше сотни строк.

А как работает твой браузер?
Раз, два, три, четыре, пять, вышел зайчик погулять, заинька вышел… Вдруг охотник выбегает, прямо в зайчика стреляет, пиф-паф, ой-ой-ой, умирает зайчик мой, привезли его домой, оказался он живой
Живой пример
Раз, два, три, четыре, пять, вышел зайчик погулять, заинька вышел… Вдруг охотник выбегает, прямо в зайчика стреляет, пиф-паф, ой-ой-ой, умирает зайчик мой, привезли его домой, оказался он живой
Есть нюанс в зависимости от шрифта могут «уехать» точки, нужно добавить некую поправку, но пока править не стал, в моем случае все и так работало.

HTML5 data-* attributes and jQuery.data() in examples

HTML5 data-* attributes and jQuery.data() в примерах:
1) загруженная страница содержит

<input id="test" type="text" data-data1="qwer" data-data2-test="asdf" value="test">


2) на Vanilla JS
document.getElementById("test").dataset.data1
"qwer"
document.getElementById("test").dataset.data2-test
NaN
document.getElementById("test").dataset.data2Test
"asdf"

-- для IE 10- dataset не доступен

>> document.getElementById("test").dataset.data1 
"Не удалось получить свойство "data1" ссылки, значение которой не определено или является NULL" 
>> document.getElementById("test").getAttribute("data-data1") 
"qwer" 
>> document.getElementById("test").getAttribute("data-data2-test") 
"asdf" 
используем jQuery для чтения, все универсально, и главное, в IE тоже работает как надо
$('#test').data('data1')
"qwer"
$('#test').data('data2-test')
"asdf"
$('#test').data('data2Test')
"asdf"
а сейчас попробуем сохранить данные используя jQuery.data(), и более того сохраним объект содержащий функцию
видим результат, с помощью jQuery можем легко воспользоваться сохраненным объектом
но эти данные не появляются в dataset, они сохраняются в кэше jQuery, при первой же попытке получить значение data элемента, jQuery создаст свойство в DOM структуре этого элемента «jQuery + $.now()» и присвоит ему уникальный идентификатор (или ранее), который и будет использоваться как ключ для доступа к кэшу, а так же, скопирует атрибуты data в свой кэш.
$('#test').data('data3', {tt: 10, fn1: function(n){ return this.tt * n + n } })

$('#test').data('data3').fn1(5)
55
document.getElementById("test").dataset.data3
undefined
jQuery1113024019371896630481: 63

jQuery.cache[63]
Object {data: Object, parsedAttrs: true}
jQuery.cache[63].data
Object {data2Test: "asdf", data1: "qwer", data3: Object}
$('#test').data()
Object {data2Test: "asdf", data1: "qwer"}
$.cache[63].data
Object {data2Test: "asdf", data1: "qwer"}
$('#test').attr('data-data1', 'qazwsx')
[<input id=​"test" type=​"text" data-data1=​"qazwsx" data-data2-test=​"asdf" value=​"test">​]
$('#test').data()
Object {data2Test: "asdf", data1: "qwer"}
$('#test')[0].dataset
DOMStringMap {data1: "qazwsx", data2Test: "asdf"}
$('#test').attr('data-data3', 'qazwsx')
[<input id=​"test" type=​"text" data-data1=​"qazwsx" data-data2-test=​"asdf" value=​"test" data-data3=​"qazwsx">​]
$('#test')[0].dataset
DOMStringMap {data1: "qazwsx", data2Test: "asdf", data3: "qazwsx"}
$('#test').data()
Object {data2Test: "asdf", data1: "qwer"}
$('#test').data('data1', 123)
[<input id=​"test" type=​"text" data-data1=​"qazwsx" data-data2-test=​"asdf" value=​"test" data-data3=​"qazwsx">​]
$('#test').data()
Object {data2Test: "asdf", data1: 123}
$('#test')[0].dataset
DOMStringMap {data1: "qazwsx", data2Test: "asdf", data3: "qazwsx"}
$('#test')[0].dataset.data1 = 777
777
$('#test')[0].dataset
DOMStringMap {data1: "777", data2Test: "asdf", data3: "qazwsx"}
$('#test').data()
Object {data2Test: "asdf", data1: 123}
Итоги:
  1. data атрибуты загружаются в свойство attributes элемента
  2. если браузер поддерживает DOMStringMap, то в свойство dataset дублируются все атрибуты data? имена приводятся в верблюжью нотацию, если в имени присутствуют «-«
  3. jQuery сохраняет копию data атрибутов и более их не обновляет, ни в одну из сторон, jQuery использует javascript для хранения данных, а не DOM, вот тут то плагины jQuery и хранят свои экземпляры

Difference between decodeURIComponent and decodeURI

Различия в decodeURI и decodeURIComponent, в последнем нет исключений он декодирует все символы.
tt1 = encodeURI(" ; / ? : @ & = + $ , # ")
"%20;%20/%20?%20:%20@%20&%20=%20+%20$%20,%20#%20"
tt2 = encodeURIComponent(" ; / ? : @ & = + $ , # ")
"%20%3B%20%2F%20%3F%20%3A%20%40%20%26%20%3D%20%2B%20%24%20%2C%20%23%20"
tt3 = decodeURI(tt1)
" ; / ? : @ & = + $ , # "
tt4 = decodeURI(tt2)
" %3B %2F %3F %3A %40 %26 %3D %2B %24 %2C %23 "
tt5 = decodeURIComponent(tt1)
" ; / ? : @ & = + $ , # "
tt6 = decodeURIComponent(tt2)
" ; / ? : @ & = + $ , # "
const jschar js_uriReservedPlusPound_ucstr[] =
    {';', '/', '?', ':', '@', '&', '=', '+', '$', ',', '#', 0};

static JSBool
str_decodeURI(JSContext *cx, uintN argc, jsval *vp) {
    JSString *str;

    str = ArgToRootedString(cx, argc, vp, 0);
    if (!str)
        return JS_FALSE;
    return Decode(cx, str, js_uriReservedPlusPound_ucstr, vp);
}

static JSBool
str_decodeURI_Component(JSContext *cx, uintN argc, jsval *vp) {
    JSString *str;

    str = ArgToRootedString(cx, argc, vp, 0);
    if (!str)
        return JS_FALSE;
    return Decode(cx, str, js_empty_ucstr, vp);
}