Все элементы в магазине Chrome Web Store делятся на приложения и расширения. Мы сделаем и то, и другое. Созданное нами приложение будет отображаться в виде значка на новой вкладке браузера и даст возможность быстро запустить ваш сайт. Расширение представляет собой специальную кнопку на панели инструментов, щелчок по которой вызовет появление панели с последними обновлениями сайта.
Собираем приложение для Google Chrome1. Скачиваем архив с шаблоном расширения по этой ссылке .
2. Разархивируем в любое удобное вам место. Внутри находится файл manifest.json и иконка icon.png .
3. Открываем файл manifest.json в блокноте и редактируем его содержимое. Вам необходимо в строке 2 ввести имя своего сайта, в строке 3 — его описание (до 132 символов), в строке 5 и 7 — адрес сайта. Сохраняем сделанные изменения.
4. Меняем иконку из архива на свое изображение в формате PNG, размером 128*128.
Собираем расширение для Google ChromeХотя расширение функционально существенно отличается от приложения, алгоритм его сборки не намного сложнее.
1. Получаем заготовку расширения по этой ссылке .
2. Разархивируем. Открываем в блокноте файл manifest.json и вставляем название своего сайта, его краткое описание и заголовок окна расширения (строки 2, 3 и 8).
3. Открываем файл labnol.js и указываем адрес RSS потока своего сайта.
4. Заменяем иконку из архива на свое изображение в формате PNG размером 128*128.
ПубликацияСделанные нами расширение и приложение можно использовать двумя способами. Если вы владелец сайта и хотите привлечь на него дополнительных пользователей, то можно опубликовать свои работы в Chrome Web Store. Для этого запаковываем файлы расширения и дополнения каждое в свой архив, идем на страницу Chrome Dashboard и загружаем свои работы в магазин Google. Здесь вас попросят загрузить скриншот, дать расширенное описание и указать некоторые другие параметры. Страница на русском языке, так что вы без труда разберетесь. Обратите только внимание, что для публикации расширения вы должны быть подтвержденным владельцем сайта, для которого сделали расширение. Кроме этого, от вас потребуется вступительный взнос в размере 5$ за публикацию.
Если вы собрали расширения только для личного использования, например чтобы удобно следить за обновлениями любимого сайта, то просто откройте в браузере страницу расширений и включите Режим разработчика. Затем нажмите кнопку Загрузить распакованное расширение и укажите путь к папке с файлами.
С помощью предложенного метода любой владелец сайта или блога сможет создать и разместить в каталоге расширений браузера Google Chrome фирменное расширение для своего ресурса. Это поможет посетителям быть всегда в курсе последних обновлений, что приведет дополнительных посетителей на ваш сайт и увеличит его популярность.
Теперь настала пора посмотреть как это делается для Chrome .
Зачем SEOшникам какие-то плагины для Chrome, на этот вопрос я отвечу в конце статьи
Но сначала скажу в чем разница при написании HelloWorld для Opera и Chrome
В Chrome для Hello World мне потребовалось 3 файла
Для Opera мне потребовалось 5 файлов:
Общий объем кода для Chrome : ~1800 байт
Для Opera : 2100 байт
Соответственно когда я написал HelloWorld для Chrome я сильно обрадовался тому что работы надо делать меньше. Единсттвенное что сделано удообно в opera, это то что можно файл плагина просто перетащить в Opera и он там сразу заработает, а в Chrome надо мучиться в developer режиме нажимать кнопку обновления.
Итак, пишем свой первый плагин для Chrome:1. создадим файл manifest.json: (взято с фосайта)
{
«name»: «My Online Clock»,
«version»: «1.0»,
«description»: «my Online Clock»,
«browser_action»: {
«default_icon»: «favicon.ico»,
«popup»: «popup.html»
}
}
2. Запишем любую иконку приложения в ту же папку
3. И создадим содержимое файла popup.html:
там включаем режим разработчика: 
Появляются кнопицы:
Загружаем распакованное расширение, там надо указать на папку с нашим расширением. и Вуаля!
Наш плагин в Тулбаре. Кликаем на него и оно работает!
Теперь поредактировав исходный код, вносим изменения в плагин и нажимаем в настройках плагина кнопку Перезагрузить: 
Все. Дальше читаем API и радуемся и пишем свой плагин для Chrome. Честно мне очень понравилось писать плагины для Chrome, очень приятно, тем более после Opera и уж точно после FireFox и уж стопудова после IE.
Если вы еще не знаете зачем вам пиать плагины для Chrome , то я вам подскажу, если у вас есть какой-нибудь маленький или уже большой сервис – напишите полезную няшку для него в виде плагина, запускалку, выдергивалку событий и т.п. и к вам пойдет трафик с самого Google. Вам посыпятся бэки. Попробуйте, а потом расскажите другим, а лучше на этой странице дайте ссылку о вашем опыте написания плагинов и эффекте с притоком пользователей на сайт. С притоком посетителей у вас вырастут Пузомерки на сайте, ну а кому как не вам ли не знать, зачем они нужны.
Это один из самых белых способов роста сайта.
Мне всегда хотелось рассказывать людям об интересных возможностях (технологиях), которые сейчас могут быть доступны каждому, но почему-то не доступны каждому. Да, получилось тавтология, но она в полной мере отображает моё внутреннее негодование на эту животрепещущую для меня тему. Как бы там ни было, речь сейчас будет не о том, как говорится. А поговорим мы сегодня о создании расширений для браузера Google Chrome (далее Хром).
Расширение, которое мы будем разрабатывать на протяжении всей статьи можно найти в магазине Google Chrome Web Store , с той лишь разницей, что там присутствует расширенный функционал. Помимо этого, присутствует исходный код на GitHub , опять таки с оговоркой на то, что там всё написано на CoffeeScript , а здесь будет вестись повествование с JavaScript. Кстати, я не поклонник и не сторонник CoffeeScript, но штука довольно интересная и полезная - советую попробовать.
Если вы когда-нибудь рассматривали идею создания расширения для Chrome, Firefox, Maxthon и прочих браузеров, то, наверное, уже успели заметить, что минимум усилий нужно приложить как раз таки для Хрома. Убедиться в этом можно, взглянув на документацию у соответствующих браузеров.
Постановка задачиНаписание расширения начинается с его описания и постановки задач, которое оно будет решать. Так как я сам себе хозяин и дедлайны срывать мне можно столько раз, сколько хочется, то ТЗ мне писать не нужно - достаточно уяснить, что:
- Расширение должно скрывать все комментарии в социальной сети «VK»;
- Расширение должно иметь возможность отображать комментарии;
- Расширение должно иметь возможность отображать комментарии на конкретных страницах;
С первого взгляда всё просто и нам по силам. Однако, в рамках статьи мы реализуем лишь первые два пункта.
Предвижу вопросы, содержание которых может быть примерно таким: «Нафига скрывать комментарии, если в этом вся суть социальной сети?!». Что же, справедливый вопрос, заслуживающий развёрнутого ответа:
Так сложились обстоятельства, что последнее время, когда я вижу комментарии в VK, мне хочется дарить горы фейспалмов комментаторам. Я подписан на большое количество различных пабликов, тематических (веб-разработка) и не очень. И как бы это не казалось странным, самым щедрым я становлюсь именно в группах с интересным для меня содержанием, а не котиками (в моём случае с пандами). Такого количества непрофессионального и безобразного потока информации в комментариях я не видел ещё нигде, да ещё и спорить думают. Помимо этого, комментарии в новостной ленте смотрятся не эстетично. В общем, сказано - сделано.
Каркас расширенияНаиприятнейшим для меня сюрпризом стало то, что в самом начале пути нас встречает описательный характер действий. Проще говоря, нам нужно описать наше приложение, его права и возможности - для этого служит файл manifest.json .
Первым делом нужно заполнить три обязательных поля:
{ "manifest_version": 2, // Начиная с Chrome 18 ставим 2, иначе 1 (не поддерживается такое старьё) "name": "My Extension", // Название расширения "version": "versionString" // Версия расширения }
Если с названием всё понятно, а с версией манифеста всё ещё проще, то поподробнее нужно остановиться с версией расширения.
Итак, все мы привыкли, что версия чего-либо состоит из трёх чисел, разделённых точками - Мажорное.Минорное.Патч (Имеется в виду число). С npm, bower и прочими прелестями разговор короткий: либо так, либо никак. А вот Google предлагает следующие варианты:
"version": "1" "version": "1.0" "version": "2.10.2" "version": "3.1.2.4567"
Подробнее обо всех полях файла манифеста можно узнать из документации .
В нашем случае, файл манифеста будет выглядеть следующим образом:
{ "manifest_version": 2, "name": "__MSG_app_name__", "short_name": "VKCommentBlocker", "description": "__MSG_app_description__", "version": "0.1.0", "default_locale": "ru", "permissions": [ "activeTab" ], "browser_action": { "default_icon": "icon_16.png", "default_title": "__MSG_browser_action__" }, "icons": { "16": "icon_16.png", "48": "icon_48.png", "128": "icon_128.png" }, "background": { "persistent": false, "page": "background.html" }, "content_scripts": [ { "matches": [ "http://vk.com/*", "https://vk.com/*" ], "css": [ "styles/commentblocker.css" ] } ], "web_accessible_resources": [ "styles/commentblocker_on.css" ] }
Из того, что ранее не рассматривалось
- __MSG_key__ - это вариация Chrome на тему интернационализации приложений (i18n). Можно применять как в файле манифеста, так и в других файлах (даже CSS).
- web_accessible_resources - массив путей ресурсов, которые будут впоследствии использоваться в контексте веб-страниц. Без указания в нём пути - ничего не получится использовать на страницах сайтов, если такое поведение предполагается.
Огромный плюс в карму Chrome - мы уже сейчас можем подключить расширение, конечно, если созданы все ресурсы, указанные в manifest.json .
Не думаю, что стоит заострять внимание на том, что содержится в файле commentblocker.css и commentblocker_on.css . Приведу лишь первый, в котором указаны все селекторы, в которых заключены комментарии:
@charset "utf-8"; .wall_module .reply_link_wrap .reply_link { visibility: hidden !important; } .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_your_comment, #pv_comments, #pv_comments_header, #pv_your_comment { display: none !important; visibility: hidden !important; } body:after { position: fixed; content: "__MSG_mode_enable__"; top: 5px; right: 5px; padding: 6px 12px; background-color: #ffc; border: 1px solid #ddd; z-index: 9999; }
В файле commentblocker_on.css , как не трудно догадаться, всё наоборот. Обратите внимание, что прямо в CSS я использую строку с языковом ключом content: "__MSG_mode_enable__" . Самое время создать такой файл, где эти ключи будут храниться.
В корне нашего расширения создаём директорию _locales и вложенные в неё директории en и ru . Далее в файле messages.json описываем наши ключи.
{ "app_name": { "message": "VK Comment Blocker" }, "app_description": { "message": "Удобный способ скрыть комментарии в новостной ленте и группах." }, "browser_action": { "message": "Переключить вид комментариев" }, "mode_enable": { "message": "Без комментариев!" }, "mode_disable": { "message": "С комментариями!" } }
Помимо поля message есть и другие поля, о которых можно узнать из документации .
Теперь создаём файлы background.html , для начала так:
Background
Тут всё так, как в обычном HTML - ничего необычного. Кстати, файл background.html можно не создавать, так как он генерируется автоматически, на основе полей в manifest.json .
Запускаем расширениеЗапустить расширение можно, не написав ни одной строчки JavaScript. Чтобы сделать это, нужно пройтись по меню:
- Настройка и управление Google Chrome (Гамбургер)
- Дополнительные инструменты
- Расширения
- Поставить галочку напротив «режим разработчика»
- Загрузить распакованное расширение
- Выбрать папку с расширением
Расширение загрузилось и показалось в меню. Да, да, это вот это вот «В».
Казалось бы, у только что созданного нами расширения ничего нет в голове (нет никакой логики), а все комментарии на страницах социальной сети на букву «В» теперь скрыты. Ответ кроется в manifest.json , где в поле "content_scripts": {} мы указали на каких страницах (http://vk.com/* и https://vk.com/*) будет автоматически подключаться файл commentblocker.css , который и скрывает все комментарии. Советую подробнее почитать про mathes patterns . Он лишь с виду так прост, а под капотом чуть ли не сивый мерин, да с прибамбасами.
Вот так, не написав ни одной строчки кода, у нас уже получилось расширение, выполняющее основную возложенную на него задачу.
Оживляем расширениеОсталось выполнить второй пункт задачи, а именно реализовать возможность отображения комментариев. Вкратце, нам нужно запихнуть файл commentblocker_on.css , который отменит правила файла commentblocker.css . И тут к нам на помощь спешит наш всемогущий JavaScript.
Помните, что я говорил про background.html ? Да, да, про то, что его можно не создавать. Давайте слегка изменим manifest.json:
... "background": { "persistent": false, "scripts": [ "scripts/commentblocker.js" ] }, ...
Просто подключили JavaScript файл. Ничего особенного. Переходим к этому файлу.
Просто так запихнуть JS на страницу нельзя. И такая же проблема имеется не только со скриптами. Поэтому нам нужно воспользоваться специальной инъекцией executeScript .
Сначала нужно добавить обработчик события клика на иконку расширения:
Chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(tab.id, { code: "(" + toggleComments.toString() + ")();" }); });
Где toggleComments - это функция, которая и будет производить инъекцию нашего CSS файла на страницу:
Var toggleComments = function() { var extensionLink; (document.getElementById("extension") == null) ? (extensionLink = document.createElement("link"), extensionLink.href = chrome.extension.getURL("/styles/commentblocker_on.css"), extensionLink.id = "extension", extensionLink.type = "text/css", extensionLink.rel = "stylesheet", document.getElementsByTagName("head").appendChild(extensionLink)) : (document.getElementsByTagName("head").removeChild(document.getElementById("extension"))) };
Думаю, что слов о том, что этот кусок кода проверяет наличие подключения нашего CSS на странице и делает выводы о необходимости его подключения или отключения, будет достаточно.
Между прочим, доступно не так много событий , которые покрывают различный спектр потребностей. Например, есть такие события:
- onCreated - создание вкладки.
- onUpdated - обновление вкладки.
- onRemoved - закрытие вкладки.
Стоит заметить, что событие onUpdated вызывается дважды:
- Обновление страницы;
На StackOverflow советуют проверять статус страницы:
Chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { if (changeInfo && changeInfo.status === "complete") { ... } });
Теперь при нажатии на иконку будет происходить подключение файла стилей, которые будут отображать комментарии, а повторный клик на иконку - вновь их скрывать.
ВыводыКак нельзя кстати, стоит упомянуть мою полную версию расширения VK Comment Blocker, которая доступна в
Написание простого расширения для браузера Chrome
Из архивов сайта developerWorks
Дуэйн О"Брайен
Дата архивации: 25.02.2019 | Впервые опубликовано: 13.03.2013
У каждого браузера свои сторонники и противники ― и свои преимущества и недостатки. Связывает их то, что люди проводят в браузерах все больше и больше времени. В этом цикле статей показано, как самостоятельно написать расширение для браузеров Chrome, Firefox, Internet Explorer и Safari. Читателю предлагается построить одно и то же простое расширение для каждого браузера, чтобы он смог почувствовать, во что это выливается, насколько трудно или легко решить те или иные типичные задачи и что нужно для распространения своего расширения. Эта статья посвящена расширению для браузера Chrome.
Этот контент больше не обновляется и не поддерживается. Полный текст статьи предоставляется "как есть" в формате PDF. Учитывая стремительное развитие технологий, некоторые шаги и иллюстрации могут быть изменены.
Расширения и плагины - полезные дополнения к уже существующим функциям на сайте и в браузере. С их помощью можно записывать аудио и видео с экрана, включать поиск ошибок, а также многое другое.
В этой статье мы рассмотрим создание самого простого расширения - запускатора избранных сайтов. Хотя приложение и будет примитивным, оно всё-таки раскроет процесс создания и загрузки расширения для google Chrome.
Желательно знать HTML, CSS и JS (если придётся расширить набор функций) на самом базовом уровне, чтобы понимать материал лучше, но в любом случае мы будем объяснять код.
В каждом расширении для Chrome должен быть файл manifest.json . Он служит только для описания функций приложения, общего описания, номера версии и разрешений. Более подробно вы сможете ознакомиться с этим файлом в блоге команды разработчиков Chrome.
Давайте же внесём свой вклад в развитие webЗдесь всё очень просто:
{ "manifest_version": 2, "name": "Tproger Launcher", "description": "Запускатор представительств Tproger", "version": "1.0.0", "icons": {"128": "icon_128.png"}, "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": ["activeTab"] }
После того как мы описали наше расширение в файле manifest.json , можно благополучно переходить к следующему этапу, а именно к разметке.
Для начала давайте напишем базовый HTML-код:
Выше мы написали каркас для плагина, сейчас он полностью пуст и нужно указать название, ссылки на иконки и шрифт. Это можно сделать с помощью тега link , обратите внимание, он не закрывается:
Tproger Media Quick Launcher
Не забывайте указывать кодировку, иначе не отобразятся кириллические буквы.
Перейдём ко второму блоку кода, а именно к тегу body и его содержимому.
СтилиЧтобы расширение выглядело красивее и было удобнее, чем сейчас, нужно добавить стили на CSS.
/* Модальная структура документа */ /*общие настройки для всего документа*/ html, body { font-family: "Open Sans", sans-serif; font-size: 14px; margin: 0; min-height: 180px; padding: 0; width: 380px; } /*задаём настройки для заголовков первого уровня*/ h1 { font-family: "Menlo", monospace; font-size: 22px; font-weight: 400; margin: 0; color: #2f5876; } a:link, a:visited { color: #000000; outline: 0; text-decoration: none; } /*задаём ширину картинки*/ img { width: 30px; /*ширина изображений*/ } .modal-header { align-items: center; /*выравнивание элементов по центру*/ border-bottom: 0.5px solid #dadada; /*свойства нижней разделительной линии*/ height: 50px; } .modal-content { padding: 0 22px; /*отступы сверху и снизу, сверху и слева*/ } .modal-icons { border-top: 0.5px solid #dadada; /*свойства верхней разделительной линии*/ height: 50px; width: 100%; } .logo { padding: 16px; /*отступы со всех сторон*/ } .logo-icon { vertical-align: text-bottom; /*выравнивание по нижней части текста*/ margin-right: 12px; /*задётся отступ элементов от изображения*/ } .version { color: #444; font-size: 18px; }
Основные настройки документа заданы, давайте перейдём к следующему фрагменту кода, в котором как раз и будет применён Flexbox, о котором шла речь в начале статьи.
Flex-container { display: flex; /*отображает контейнер в виде блочного элемента*/ justify-content: space-between; /*равномерное выравнивание элементов*/ padding: 10px 22px; } /*задаём настройки для контейнеров с иконками*/ .flex { opacity: 1; /*параметр непрозрачности иконок*/ width: 120px; } .flex:hover { opacity: 0.4; /*уровень непрозрачности при наведении курсора на элемент*/ } .flex .fa { font-size: 40px; color: #2f5876; }
Мы постарались как можно подробнее объяснить в комментариях относительно сложные моменты. А сейчас нам нужно лишь загрузить наше расширение в браузер Chrome и оно будет работать, а если пройдёт модерацию, то появится в магазине расширений (плагинов).
Теперь давайте добавим файл с расширением.js, если вдруг потребуется расширить функции дополнения для браузера.
Tproger Media Quick Launcher /*здесь мы прописали стили*/
Проверка кода и публикация
Запускатор Tproger
/* Модальная структура документа */
/*общие настройки для всего документа*/
html,
body {
font-family: "Open Sans", sans-serif;
font-size: 14px;
margin: 0;
min-height: 180px;
padding: 0;
width: 380px;
}
/*задаём настройки для заголовков первого уровня*/
h1 {
font-family: "Menlo", monospace;
font-size: 22px;
font-weight: 400;
margin: 0;
color: #2f5876;
}
a:link,
a:visited {
color: #000000;
outline: 0;
text-decoration: none;
}
/*задаём ширину картинки*/
img {
width: 30px; /*ширина изображений*/
}
.modal-header {
align-items: center; /*выравнивание элементов по центру*/
border-bottom: 0.5px solid #dadada; /*свойства нижней разделительной линии*/
height: 50px;
}
.modal-content {
padding: 0 22px; /*отступы сверху и снизу, сверху и слева*/
}
.modal-icons {
border-top: 0.5px solid #dadada; /*свойства верхней разделительной линии*/
height: 50px;
width: 100%;
}
.logo {
padding: 16px; /*отступы со всех сторон*/
}
.logo-icon {
vertical-align: text-bottom; /*выравнивание по нижней части текста*/
margin-right: 12px; /*задётся отступ элементов от изображения*/
}
.version {
color: #444;
font-size: 18px;
}
.flex-container {
display: flex; /*отображает контейнер в виде блочного элемента*/
justify-content: space-between; /*равномерное выравнивание элементов*/
padding: 10px 22px;
}
/*задаём настройки для контейнеров с иконками*/
.flex {
opacity: 1; /*параметр непрозрачности иконок*/
width: 120px;
}
.flex:hover {
opacity: 0.4; /*уровень непрозрачности при наведении курсора на элемент*/
}
.flex .fa {
font-size: 40px;
color: #2f5876;
}
Быстрый доступ к контентным площадкам Типичного Программиста
После проверки можно приступать к публикации расширения. Для этого у вас должны быть следующие файлы и папки:
Для загрузки расширения в магазин нам нужно зайти в меню, навести мышку на «дополнительные настройки», а затем выбрать «расширения» или ввести в адресной строке chrome://extensions/ .
