Создание плагинов для браузеров на примере VKMemos. Как создать плагин для браузера

Создание плагинов для браузеров на примере VKMemos — Блог ДругМедиа

Привет! Я — Виктор Никитин,основатель бюро ДругМедиа

VK Memos мой личный эксперимент. Проект был создан для себя и друзей, а позже полюбился и другими.

Друзей в социальных сетях становится все больше. Трудно запомнить кто чем занимается, какими знакомствами и навыками обладает. Хочется это записать. Помечать в блокноте или «гугл-доке» не удобно: и найти не просто, да и просто лень. Так появилась идея создать блокнот, встроенный в сам сайт социальной сети, где каждая страница — заметка, привязана к одному человеку. Если ты не сотрудник Вконтакте, то единственный способ это сделать — инжектировать свой код в на уже открытую страницу в браузере. Автоматически и незаметно для пользователя это могут делать плагины для браузера. VKMemos — блокнот личных заметок во Вконтакте, созданный как плагин для браузеров Google Chrome и Opera.

Создавая плагин, я столкнулся с рядом тупиков. Эта статья посвящена проблемам и тому как их избегать. Будет полезна разработчикам плагинов для браузеров и приложений для Вконтакте.

Архитектура

Плагин для браузера это архив с html, js, ccs-файлами, картинками и файлом манифеста, который описывает сам плагин и его ограничения. Архив загружается в магазин плагинов браузера, из которого устанавливается пользователями одним кликом. VKMemos следит за открытыми вкладками в браузере. Когда открывается страница с домена vk.com, он встраивает свой код в страницу, дополняя её возможности. Плагин создает текстовые поля для ввода заметок на странице списка друзей, в переписках и на личных страницах других пользователей, обеспечивает загрузку и сохранение заметок, добавляет поле поиска друзей по заметкам.

Идея загрузчика

Найденная ошибка или сделанное улучшение требует повторной сборки архива, изменения файла манифеста, загрузки в магазин, а от пользователей — обновления. Пришла идея сделать плагин в виде минимального загрузчика, который загружает файл настоящего плагина с сервера и встраивает его в страницу Вконтакте. Таким образом обновление плагина сводится к замене файла на сервере, без необходимости пересобрать архив, а пользователям обновляться, ведь загрузчик не меняется. Особенно это удобно на этапе разработки и тестирования. Также подойдет, если требуется отдавать разные версии разным пользователям. Эту модель работы одобрил Google Chrome, а вот Opera запретила по политике безопасности.

Работа с разных компьютеров

В социальных сетях мы сидим с разных компьютеров. Глупо было бы иметь доступ к заметкам только с одного из них, хочется видеть заметки на каждом устройстве. Единственный способ это сделать — хранить заметки на сервере, а плагин научить узнавать пользователя. Находясь на странице Вконтакте, пользователь уже авторизован, достаточно узнать кто именно. Для этого плагин VKMemos использует библиотеку API Вконтакте. Авторизация в плагине привязана к авторизации Вконтакте.

Для использования API Вконтакте требуется создать приложение. Каждое приложение получает секретный ключ. При первом запуске плагина у пользователя возникает всплывающее окно Вконтакте запрашивающее разрешение. Пользователю достаточно дать согласие без ввода каких-либо данных. При этом в браузере библиотека Вконтакте формирует хеш-код на основе данных пользователя и секретного ключа приложения. Каждый запрос к серверу подписывается этим хеш-кодом. Сервер проверяет запросы на достоверность воссоздавая хеш-кода на своей стороне и сравнивая с полученным. Чтобы подделать код нужно знать данные пользователя и секретный ключ, известный только разработчику приложения.

Синхронизация данных

Заметки хранятся на сервере и привязаны к пользователю Вконтакте. Для скорости работы плагина при запуске скачивает все заметки и позже отображает их не с сервера, а локально. Сохранение заметок всегда происходит на сервер. Если открыть несколько вкладок, то изменение заметок в одной из них приведет к сохранению их на сервере, но не приведет к обновлению заметок с сервера на других вкладках. Чтобы синхронизировать работу нескольких вкладок, заметки хранятся не в локальной переменной, а в общем для браузера локальном хранилище (localstorage). Изменение заметки в одной вкладке вызывает событие, которое получают другие вкладки, обновляя заметку.

Однако событие изменения локального хранилища не работает на страницах Вконтакте. В ходе изучения оказалось, что Вконтакте перехватывает это события для внутренней работы. Событие изменения локального хранилища согласно стандарту срабатывает во всех других вкладках за исключением той, в которой было вызвано. Видимо, Вконтакте надо было получать это событие и в исходной вкладке. Для этого они создали специальный iframe с перехватчиком события и сделали обмен данными через события Message. Было найдено два решения: подменить их подписку на копию с добавленным своим кодом, либо подписаться на событие Message. Второе безопаснее с точки зрения изменения кода Вконтактом в будущем.

Плагин для Opera

Начиная с 15-й версии Opera перешла на движок Chrome. Сейчас существует две активные ветки браузеров Opera: версия 12+, основанная на собственном старом движке, и новая. Плагины для них создаются по разному, но общий принцип похож на плагины для Google. Плагины Opera имеют более строгие ограничения по безопасности и доступу к странице. Плагинам запрещается загружать какой-либо код со сторонних ресурсов. Все файлы должны быть включены в архив плагина, даже библиотека API Вконтакте. Это затрудняет разработку и обновление плагина. Обойти это не удалось. Проверка плагина на право размещения в магазине проводится модераторами в течении пары дней. Плагин утвердили с 8-й попытки, когда были перепробованы все возможные пути обхода.

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

Попробовать плагин вы можете установив его. Ссылка на установщик есть на сайте проекта.

Виктор Никитин

Твитнуть

Поделиться

Поделиться

Отправить

Класснуть

drugmedia.ru

Плагины для браузеров в помощь вебмастеру

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

1. Firebug для Firefox — скачиваем, устанавливаем и наблюдаем в правом нижнем углу вашего браузера значок в виде жука. Что можно сделать с его помощью?

• узнать, что за код реализован на понравившемся вам участке чужого сайта, чтобы сделать так же
• проверить, как те или иные изменения кода вашего сайта отразятся на его внешнем виде
• существенно расширить ваши знания по HTML (вождение мышью по странице будет сопровождаться выделением соответствующих участков кода и наоборот)
• все вышесказанное работает и для таблиц стилей CSS
• узнать скорость загрузки сайта

Этот чудо-плагин для браузера будет вашим незаменимым помощником, если вы задумаете изменить дизайн и заодно подучиться HTML и CSS.

2. Web Developer — еще один хороший плагин для работы по созданию и отладке сайтов (есть версии для Firefox и Google Chrome). Имеет множество функций — от фонарика до зубочистки, например:

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

3. SEOBar для Opera. Это SEO-плагин, призванный облегчить работу над продвижением сайта. Что он нам показывает:

• пузомерки ТИЦ, PR, Alexa Rank
• количество страниц в индексе разных поисковиков
• количество входящих ссылок
• количество внутренних и внешних ссылок
• данные о сайте из крупнейших каталогов
• закрытые от индексации ссылки (они будут подсвечиваться прямо на странице. Очень полезная функция)
• whois любого сайта
• robots.txt любого сайта
• мета-теги любой страницы (тоже очень интересно, не правда ли?)
• и еще много всего

Итак, если вы пользуетесь браузером Opera — скачивайте и получайте удовольствие.

4. SEOquake — мощный SEO-плагин для Firefox, Opera, Safari с очень гибкими настройками. Функции:

• анализ  выдачи (полезно, если вы изучаете сайты конкурентов). Советую включать эту опцию только по мере необходимости, иначе из-за большого количества запросов можете получить бан по IP от поисковика
• подсветка  заключенных в noindex и nofollow ссылок
•  пузомерки, количество страниц в индексе, возраст сайта, whois, наличие в каталогах
• внутренние и внешние ссылки со страницы
• плотность ключевых слов
• мета-теги страницы
• еще много всего

5. RDS Bar — еще один отличный плагин, с помощью которого можно собрать самую исчерпывающую информацию о интересующем вас сайте. В частности, проверить, насколько он пригоден в качестве донора при покупке ссылок. Один взгляд на панельку плагина — и вы знаете, стоит ли покупать на этом сайте ссылку! Перечислять все возможности не буду, их очень много.  Ненужные вам можно отключить. Этот плагин существует для трех браузеров — Firefox, Opera и Google Chrome.

Что касается моего выбора в части вебмастерских плагинов для браузеров, то я пользуюсь  Web Developer для извращений с кодами и дизайном и RDS Bar для SEO-работы (у меня браузер Google Chrome).

blogobabki.ru

Плагины для Google Chrome или как повысить продуктивность вашего браузера

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

Расширения Google Chrome

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

Но подобрать наиболее эффективные плагины для Хрома — задача не из легких. Магазин расширений Google Chrome «ломится» от всевозможных дополнений, попробуем выбрать наиболее стоящие из них:

Установка расширений в Google Chrome

Перед тем как перейти к описанию расширений, рассмотрим, как установить плагины для Google Chrome. Причем речь пойдет не о приложениях из Chrome Web Store (здесь все просто — «скачал-установил»), а о дополнениях с других сайтов. Зачастую при попытке установки стороннего расширения всплывает окно с предупреждением. Однако эта проблема решаема.

Установка расширения в виде файла *.crx

Заходим в настройки браузера, переходим в раздел «Расширения» и ставим галочку на «Режиме разработчика», после чего видим кнопку для установки и обновления плагинов. Далее переименовываем файл из crx в zip и помещаем его в папку для расширений.

Последнюю можно специально создать для этой цели (например, c:myFileschromeExtensionsmydoc). Распакованный плагин из папки можно установить нажатием на кнопку «Загрузить распакованное расширение», после чего следует выбрать каталог, в котором распакован архив.

Восстановление ранее установленного плагина

Если спустя какое-то время после установки расширение было отключено браузером, его не нужно заново скачивать. Чтобы восстановить работоспособность плагина заходим в каталог на системном диске (например, для Win7 – это С:Users\открыть скрытые папки), вставляем кодовое слово типа «hghkdnjbhjjdjdjjdjdjdjjd», указанное после «ID» в блоке описания расширения Chrome. В найденной папке имеется еще одна папка с номером версии плагина, выбираем ту, что нужна и загружаем как распакованный плагин.

Лучше перенести папку с расширениями в другое место, чтобы в случае удаления браузера они остались на компьютере.

После того, как расширение загрузилось, ставим галочку в поле «Включить». Упростить работу с дополнениями можно, если пользоваться «девелоперской» версией браузера, в которой плагины и скрипты можно устанавливать путем затаскивания в нужное поле, а также использовать другие интересные возможности:

Удаление расширений из Google Chrome

Если расширений скапливается слишком много, Хром начинает работать некорректно, тормозит. Выход из ситуации – удалить ненужные плагины.

Для этого следует:

• кликнуть по меню на панели инструментов;
• зайти в «Дополнительные инструменты»;
• открыть «Расширения»;
• отыскать ненужное дополнение и удалить его, нажав на «корзину»:

Также можно кликнуть по «Подробнее» под описанием расширения Google Chrome и нажать в открывшемся окне «Удалить»:

Если необходимо убрать сразу несколько расширений, можно объединить их в группу и удалить одним кликом.

Для этих целей вам понадобится плагин SimpleExtManager для управления расширениями. С его помощью вы быстро объедините несколько плагинов в одну папку и удалите.

Если некоторые дополнения могут пригодиться в будущем, их можно не удалять, а просто отключить, сняв галочку в окошке «Включено».

Как удалить расширение в Хроме, если оно не удаляемое?

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

Далее запустите командную строку (Windows+R) с командой «regedit», откройте редактор реестра. В папке HKEY_LOCAL_MACHINE откройте Software и найдите в ней Policies. Пройдите по Google/Chrome и подчистите папки ExtensionInstallForcelist и ExtensionInstallSources.

Далее проверьте вкладку «Автозагрузка» (в строке поиска «Пуск» команда msconfig). Отсюда удаляем все подозрительные программы:

И последнее: просканируйте систему антивирусом.

Где лучше и безопасней всего искать расширения для Google Chrome?

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

Если расширение устанавливается вместе со сторонним софтом, система предупреждает вас об этом. И если вы не знаете, что именно предлагается, то лучше не инсталлируйте.

Как снизить потенциальный риск:

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

Расширения Google Chrome – обзор наиболее популярных и полезных решений

Checker Plus for Gmail

Checker Plus for Gmail позволяет просматривать сообщения, не заходя в почту, включать звуковое и голосовое оповещение, настраивать внешний вид иконки и многое другое:

AdBlock

По-видимому, это самое популярное расширение для Google Chrome. Плагин убирает назойливые баннеры и рекламные объявления. Скачайте AdBlock и вы сразу поймете, насколько улучшилось качество интернет-серфинга. Данное расширение совместимо с браузерами Opera, Firefox и Safari:

Chrome Remote Desktop

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

Delicious Bookmark Extension

Плагин позволяет быстро и легко делиться гиперссылками:

Website Blocker

Расширение позволяет блокировать доступ к некоторым доменам на протяжении определенного времени (например, с 8 утра и до 6 вечера). Плагин работает в режиме инкогнито:

Pocket

Расширение, позволяющее припрятать в «карман» интересные вещи (сайты, статьи, видео), для того чтобы присмотреть их позже:

Fast Video Downloader

Плагин позволяет сохранять любые видео, найденные вами в интернете:

Card Board

Обеспечивает доступ к наиболее посещаемым сайтам, позволяет видеть список загрузок и последние закладки, очищать кэш и делать многое другое всего в один клик:

Smart Pause for YouTube

Полезное дополнение, после установки которого на YouTube, у вас появится «Умная пауза». Теперь во время просмотра видео, вы можете перейти на новую вкладку, при этом ролик будет автоматически поставлен на паузу. После возврата на страницу воспроизведение возобновится автоматически:

Downloads — Your Download Box

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

Screencastify

С необходимостью записать скринкаст (т.е. происходящее на экране) рано или поздно сталкивается каждый пользователь. Этот расширение для Google Chrome позволяет вести запись определенного окна в браузере либо всего рабочего пространства. Количество кадров в секунду, разрешение и активацию микрофона можно указать в настройках. Одна особенность — видео сохраняется в формате WebM:

Транскриптор

Плагин позволяет просматривать и прослушивать транскрипцию любого слова, которое вы найдете в сети. Все что нужно – нажать комбинацию клавиш Ctrl + Alt и дважды кликнуть по нужному слову:

autoConvert

С помощью этого дополнения можно переводить единицы измерения в режиме реального времени:

CrxMouse

Плагин помогает заменить жестами привычные щелчки мышки. К примеру, нужно открыть ссылку, просто проведите по ней. Нужно вернуться назад – нажмите правую кнопку и ведите справа налево и т.д.:

И это далеко не все полезные расширения для Google Chrome.

www.internet-technologies.ru

Смотрите также

• 
  Блокировка рекламы в браузере адблок
• 
  Обновить shockwave flash яндекс браузер
• 
  Темы для вконтакте для браузера
• 
  Как из браузера сохранить пдф
• 
  Запуск браузера при включении компьютера
• 
  Андроид браузер с сохранением страниц
• 
  История браузера explorer как посмотреть
• 
  Как записать видео с браузера
• 
  Как удалить mail ru браузер
• 
  Очистить пароли в яндекс браузере
• 
  Отключить flash в яндекс браузере