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

Не так давно настроил я на своем проекте 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 – скорее исключение, чем правило.

Прошло два года с того момента, как вышла первая версия этого расширения для Chromium-based браузеров (работает в Google Chrome, Yandex.Browser и т.д.), задача которого проста и понятна — скрывать настоящий User-Agent. На данный момент это расширение работает у +6.000 пользователей (что очень скромно), и несколько дней назад получил на почту письмо с просьбой его немного доработать. Оценив состояние кода, к которому два года никто не притрагивался, было решено — переписывать его с нуля. Четыре дня работы, и вуаля — встречаем свежую мажорную версию, значительно улучшенную и с новым функционалом.

Под катом будут некоторые мысли как по поводу чуть-более анонимного веб-серфинга, так и настройке браузера Google Chrome, и почему это расширение может быть полезно. Чуть-чуть опытные анонимусы не найдут в посте для себя чего-либо интересного, поэтому как для них, так и для самых нетерпеливых, традиционно — исходники на GitHub и расширение в Google Webstore.

Предыстория

В 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) выделенное

Заниматься чем-то, нарушающим священное волеизъявление здешних господ на контент, который и только который они хотят видеть вокруг себя — дело, конечно, неблагодарное и кармически опасное. Но гонки вооружений между блокировщиками рекламы и рекламными системами не избежать, поэтому говорить об этом нужно. Сейчас, когда общий объем вырезанного трафика крутится около 1% — всё несколько вяленько, но уже есть оглядывающиеся владельцы сайтов, недополучающие до 30% денег с рекламы. Рекламные сети начинают общаться между собой, обмениваться спецификациями, есть уже какой-то израильский стартап на эту тему — думаю, соблазнительно с минимальными усилиями увеличить доход сразу и на проценты. В российском сегменте всё пока обходится увещевательными объявлениями вида «Вы отключили рекламу — это мешает нам развиваться» или простым игнорированием факта существования таких пользователей. Надо сказать, пусть оно всё так и остается.

Здесь, исключительно в режиме минимального доказательства работоспособности — будем обходить самый распространенный тип блокировщиков рекламы — по паттерну URL. Метод должен поддерживать:

• хранения cookie рекламных систем на стороне пользователя
• передавать не меньшее количество информации о пользователя, чем браузер: User-Agent, IP
• требовать минимальной настройки большинства стандартных рекламных тэгов
• быть легко подключаемым и изменяемым для случаев, когда кто-то не поленился и всё-таки добавил кастомное правило, попавшее в мейнстрим

Для достижения результата — будем маскировать все URL рекламных сетей через своеобразное прокси между сервером издателя и рекламодателя.

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

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

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



В этом посте я расскажу о том, как перевел свое расширение «Изображение по центру» на 11 языков, как организовал процесс и какие вспомогательные инструменты использовал для автоматизации скучной рутины.