Расширения для браузеров

Разработчики стараются внимательно относиться к своим продуктам, минифицируют файлы, настраивают кэш, дерутся за каждую миллисекунду скорости. Но почему-то почти везде игнорируется то, что самым первым отправляется пользователю — а именно заголовки HTTP. Как-то довелось мне посетить курсы по информационной безопасности, и там советовали первым делом смотреть именно на них, поскольку о них чаще всего и забывают.



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

Всё верно, слишком агрессивное поведение окружающей среды (производителей контента) приводит ко всё более жёстким попыткам цивилизации подчинить окружающий мир себе. В этом — естественная природа человека и человечества, поэтому незнание законов природы приведут контентчиков к тому, что их надёжно обезопасят. Чтобы они, наконец стали приносить пользу, а не рекламу разумным людям.

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

TL;DR: есть способ обойти агрессивные анти-адблокеры сейчас, в рамках существующих правил игры, в расширениях браузеров.

Хочу поделиться небольшим опытом работы с блокировщиками рекламы со стороны front-end разработчика. Все понимают, что наша задача сделать так, чтобы сайт нормально работал и выглядел при любых настройках пользователя, на любых устройствах. Я иногда посматриваю постоянно проверяю как выглядит сайт при отключенном javascript, проверяю работу на touch-устройствах, устройствах с маленьким разрешением итд. итп. После того, как у нас на сайте из-за Adblock Plus (далее по тексту просто Adblock) перестал работать видео-плеер — стало понятно, что наличие блокировщика рекламы также нужно учитывать при верстке сайта…

Не так давно настроил я на своем проекте CSP (content security policy), и решил что жизнь удалась. Ведь теперь невозможно подгрузить скрипты с запрещенных ресурсов, и даже о попытке сделать это, я буду уведомлен соответствующей ошибкой. А если кто-то и подгрузить скрипт, то все равно ничего не сможет передать, ведь ajax запросы отправляются только на мои сервера.

Так я подумал, и был какое-то время спокоен.

Что если бы вы могли добавить в редакторы документов любые функции, какие вам хочется? Теперь вы можете: в редакторах ONLYOFFICE появилась возможность подключения плагинов. Несколько примеров мы написали сами — все их можно посмотреть в нашем открытом репозитории на GitHub'e. Теперь ваш ход — напишите то, чего вам не хватало.

Подробности далее.

На днях возникло желание написать простенькое расширение для Google Chrome. Столкнулся с такой проблемой, что после изменений в коде расширения, браузер не перезагружает его автоматически. Это очень сильно затрудняет разработку, т.к. после каждого Cmd-S в редакторе, приходится нажимать "Reload" в списке расширений, а затем еще и рефрешить страницу, чтобы перезапустить контент-скрипты.

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

Готовое встраиваемое решение лежит на github.com/xpl/crx-hotreload, а в этой статье я расскажу, как оно реализовано.

Инженер из компании BugReplay нашёл отличный способ продемонстрировать, как работает его сервис скринкаста с записью сетевого трафика и демонстрацией ошибок, в том числе WebSockets и JavaScript. Он записал скринкаст загрузки Pornhub с отображением лога трафика, который синхронизирован с видео. Так вот, на этой демонстрации отлично видно, каким образом Pornhub обходит блокировщики рекламы и пропихивает рекламу с помощью вебсокетов.

Доброе время суток, мой дорогой параноик! Конечно же ты наслышан о всяческих скрытых утилитах, призванных наглым образом слямзить твои сокровенные данные (пароли, контактные данные, данные кредиток и т.п.) посредством считывания буфера обмена, а также нажатий клавиш на программно-аппаратном уровне, при их вводе в браузере. Одним из вариантов минимизации рисков является использование виртуальной клавиатуры.

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

Современные мобильные браузеры, как и их десктопные аналоги, должны позволять пользователям добавлять недостающие возможности с помощью дополнений. Несмотря на отказ команды Chromium от идеи поддержки расширений на Android, наша команда продолжает работать над этой возможностью, и сегодня мы приглашаем сообщество Хабра попробовать первую альфу Яндекс.Браузера, в которую вы уже сможете установить LastPass, Tampermonkey или даже Ghostery.



Первые дополнения появились в Internet Explorer еще в 1999 году и за следующее десятилетие практика открытия доступа к API стала обязательной для любого более-менее популярного браузера. Сейчас многие из нас не представляют себе работу за компьютером без возможности добавить в браузер необходимую функцию собственными руками. А вот с Android пока еще все не так. Несмотря на рост производительности современных мобильных устройств, браузерные расширения на Android – скорее исключение, чем правило.

Предыстория

В 2012-2013 годах я нашёл одно онлайн-радио, которое «зацепило» меня большим выбором хорошей музыки и тем, что там (почти) не было рекламы.

По своей должности я — web-разработчик, да ещё интересуюсь различными технологиями и происходящим в науке, и посему у меня довольно часто открыто большое количество вкладок в браузере, а зачастую ещё и несколько профилей в браузере. А если ещё добавить к этому среду разработки, графический редактор, открытые папки, то хоть заводи навигатор по всем открытым окнам и вкладкам.

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

Такое происходило часто, и я всё чаще стал задаваться мыслью найти решение этой проблемы.

“Распарсить сайт” — словосочетание, которое повергало меня в уныние всего полгода назад. В моей голове сразу же проносились знакомые проблемы с настройкой фантома, или возней с селениумом. Мысли о возможной необходимости подменять useragent, пагинации и других действиях во время парсинга заставляли откладывать эту задачу в долгий ящик…

Но всё изменилось, когда я встретил Гуся. Мир парсинга заиграл новыми красками. Под катом я хочу показать несколько простых примеров, которые могут помочь распарсить непростые сайты.

Кстати, написав парсер, Гусь решил снять фильм про это, пока что вы можете насладиться трейлером:

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

Но ведь в самом деле:

Лезут из всех щелей, пытаясь заставить нажать вас заветную кнопку. Возникают при каждом переходе на сайте. Вылезают в самые неудачные моменты и мешают вам жить. Разберем подробно, почему мы (а именно вы) не любим уведомления на сайтах.

UPD 16.03.2016: Новая версия аддона больше не убивает!

Заголовок, конечно, абсолютно желтый. Я хочу рассказать короткую детективную историю о том, как большой и могучий Яндекс решил разрушить бизнес (не специально, конечно — совершенно случайно, по ошибке) нашему маленькому и уютному сайту, и о том, почему при создании расширений для браузеров, которые должны работать только на определенных сайтах — важно в коде прописать, чтобы расширение работало только на этих определенных сайтах, и ни на каких больше.

Суть в том, что пару месяцев назад нам стали поступать запросы от пользователей, с жалобой, что они не могут разместить объявление на сайте, потому что футер наезжает на кнопку «добавить», со скриншотами, типа таких:



Казалось бы, просто поехала верстка, футер стал наезжать на контент, при чем тут Яндекс?

Делал для себя, чтобы долго не искать ссылки на различные онлайн-инструменты для всестороннего анализа сайтов. В итоге получилось красиво и компактно, как результат — появилось расширение "SEO-tools", сегодня его можно скачать в библиотеке расширений браузера Opera (совместимо с Яндекс.Браузером).

В яндекс-поисковике, как и в Гугле, есть настройки расширенного поиска (по датам, документам, сайтам, стране, языку, ...) и специальные страницы для расширенного поиска. То и другое бывает неудобно из-за интерфейса — большого количества нажимаемых кнопок, кликов и движений. Для некоторых (частоиспользуемых) режимов поиска сделаны юзерскрипты с выбором одной из десятков кнопок в один клик. На экране видны лишь несколько стартовых кнопок, работающих как спадающие списки по наведению мыши.

Такой скрипт, когда-то бывший без спадающих списков, давно работал на страницах Гугла, и, судя по количеству скачиваний, приобрёл популярность среди англоязычных пользователей (есть выбор 5 языков интерфейса). Однажды подумалось, что его несложно будет перенести на Яндекс, и на выходных за пару дней адаптация и перекраска под цвета Яндекса была сделана, и теперь он представляется «целевой аудитории» — людям из IT, которым иногда приходится много искать и которым привычно устанавливать дополнительные скрипты и ходить по гитхабам.

Многие наверное видели область уведомлений в Chrome? Мы ранее писали, что Chrome её убрал.



При этом все сервисы, использующие push-уведомления, получили ряд проблем.

• Если вы используете Web Push, то у вас есть возможность закрепить оповещение на экране. И пользователь может либо закрыть оповещение, либо нажать на него. То есть если он занят, то он скорее всего закроет, даже если бы он хотел прочесть материал
• Если вы используете дополнение для Chrome, тогда Rich Notification исчезает через несколько секунд в небытие.

Мы сделали раздел пропущенных оповещений, в котором собираются те оповещения, которые исчезли, и те которые не были доставлены (например если у вас были заблокированы порты)



Ссылка на обновленное расширение

Да мы достигли 13 тысяч пользователей благодаря каналу Prankota (о нем расскажем потом) И решили подвести небольшой итог, а заодно и показать, почему важно объединение в общий каталог каналов (один сайт-проект-группа это один канал), а также объединение устройств в общий аккаунт пользователя.

Это все идет в разрез с концепцией интегрированных браузерных push уведомлений на сайтах, или оповещений в приложениях, ведь при этом подходе, вы можете принимать/отправлять оповещения с множества различных сторонних источников на различные подключенные устройства. Под устройством имеется в виду любой метод получения оповещений, будь то обычный браузер, телефон, планшет, даже электронная почта, или телеграм — это «устройство» т.е. это метод получения оповещений. Возможно в будущем мы сможем отправить push-уведомление на вашу кофеварку… ждите.

Многие говорят:

Зачем нужен вообще универсальный сервис, сделать подписку через веб-пуши на сайте и все, зачем нужен этот логин через гугл+…

Тут можно использовать 2 тактики — начнем с того, что пользователи выбирают несколько устройств, веб-пуши работают только в определенных браузерах, и их надо подписывать на каждом устройстве в отдельности.

Столкнулся с браузерным расширением «Альтернативный поиск» от Яндекс.
Решил рассказать то, о чем не сказано в описании данного расширения.

На hh/gt не нашел ни единого упоминания о этом замечательном расширении для Google Chrome. Хочу поделиться им с сообществом, потому как в последнее время оно помогает мне каждодневно экономить минут 10 — уж очень много скриншотов из социальных сетей на разных языках которые с помощью этого плагина переводятся в два клика.

Встречайте — Project Naptha (Chrome webstore).



Список возможностей:

• копировать текст с картинки
• выделить весь текст
• гуглить выделенный текст
• переводить выделенное (бета)
• проговорить (TTS) выделенное