Установка расширения 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');
	});

PHP extracting zip archives with cyrillic filenames problem

Наткнулись на проблему, при распаковке zip архива (php7), если в именах русские символы получаем каракули (в нашем случае только они и присутствуют), странным способом перекодированные. Создаем архив используя ДОСовскую кодировку 866 с ней нет проблем со встроенными в винду зип-архиватором, если использовать 1251 в винде до 8-ки опять же каракули.

	$zip->addFile($pathFrom . '/' . $doc->hashedName,  mb_convert_encoding($doc->originalName, 'CP866', 'UTF-8'));
Пытаемся распаковать из ПХП

$Zip = new ZipArchive();
$open = $Zip->open('in_01122016000000.zip');
$length = $Zip->numFiles;
for($i = 0; $i < $length; $i++)
{
  echo $Zip->getNameIndex($i) . ' ' . mb_convert_encoding($Zip->getNameIndex($i), 'UTF-8', 'UTF-8, CP866') . '<br>';
}
Заглянув в исходники zip расширения, находим, что начиная с php 5.6 при получении имени файла вызывается _zip_string_get, где используется логика угадывания кодировки (/* start guessing */) и для получения не измененной строку нужно указать флаг ZIP_FL_ENC_RAW. Пока в официальной документации о такой возможности умалчивают, речь только о флаге ZipArchive::FL_UNCHANGED — до изменений.

  //zip.h
  //#define ZIP_FL_ENC_RAW         64u /* get unmodified string */
  echo mb_convert_encoding($Zip->getNameIndex($i, 64), 'UTF-8', 'UTF-8, CP866') . '<br>';
или так

  $stat = $Zip->statIndex($i, 64);
  echo mb_convert_encoding($stat['name'], 'UTF-8', 'UTF-8, CP866') . '<br>';
ZipArchive reads filenames with UTF-8 characters wrong

Phalcon: calling getRender() multiple times

При вызове метода getRender() несколько раз подряд, данные будут только при первом вызове.

$html1 = $view->getRender($section, $template, $data);
$html2 = $view->getRender($section, $template, $data);

var_dump($html1); // Valid string
var_dump($html2); // Empty string
Дабы исправить ситуацию, регистрируем сервис вольта немного иначе

	$di->set('view', function() use ($config) {

		$view = new \Phalcon\Mvc\View();

		$view->setViewsDir(__DIR__ . $config->application->viewsDir);
// было
//		$view->registerEngines(array(
//			".volt" => 'volt'
//		));

// стало
		$view->registerEngines(array(
		        ".volt" => function($view, $di) {
				$volt = new \Phalcon\Mvc\View\Engine\Volt($view, $di);
					$volt->setOptions(array(
						"compiledPath" => "../cache/volt/",
					));
				return $volt;
		        }
		));


		return $view;
	});

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% снимется.
Сляпал плагин, малютка, меньше сотни строк.

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