Мне всегда хотелось рассказывать людям об интересных возможностях (технологиях), которые сейчас могут быть доступны каждому, но почему-то не доступны каждому. Да, получилось тавтология, но она в полной мере отображает моё внутреннее негодование на эту животрепещущую для меня тему. Как бы там ни было, речь сейчас будет не о том, как говорится. А поговорим мы сегодня о создании расширений для браузера Google Chrome (далее Хром).
Расширение, которое мы будем разрабатывать на протяжении всей статьи можно найти в магазине Google Chrome Web Store , с той лишь разницей, что там присутствует расширенный функционал. Помимо этого, присутствует исходный код на GitHub , опять таки с оговоркой на то, что там всё написано на CoffeeScript , а здесь будет вестись повествование с JavaScript. Кстати, я не поклонник и не сторонник CoffeeScript, но штука довольно интересная и полезная - советую попробовать.
Если вы когда-нибудь рассматривали идею создания расширения для Chrome, Firefox, Maxthon и прочих браузеров, то, наверное, уже успели заметить, что минимум усилий нужно приложить как раз таки для Хрома. Убедиться в этом можно, взглянув на документацию у соответствующих браузеров.
Постановка задачиНаписание расширения начинается с его описания и постановки задач, которое оно будет решать. Так как я сам себе хозяин и дедлайны срывать мне можно столько раз, сколько хочется, то ТЗ мне писать не нужно - достаточно уяснить, что:
С первого взгляда всё просто и нам по силам. Однако, в рамках статьи мы реализуем лишь первые два пункта.
Предвижу вопросы, содержание которых может быть примерно таким: «Нафига скрывать комментарии, если в этом вся суть социальной сети?!». Что же, справедливый вопрос, заслуживающий развёрнутого ответа:
Так сложились обстоятельства, что последнее время, когда я вижу комментарии в 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" ] }
Из того, что ранее не рассматривалось
Огромный плюс в карму 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. Чтобы сделать это, нужно пройтись по меню:
Расширение загрузилось и показалось в меню. Да, да, это вот это вот «В».
Казалось бы, у только что созданного нами расширения ничего нет в голове (нет никакой логики), а все комментарии на страницах социальной сети на букву «В» теперь скрыты. Ответ кроется в 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 на странице и делает выводы о необходимости его подключения или отключения, будет достаточно.
Между прочим, доступно не так много событий , которые покрывают различный спектр потребностей. Например, есть такие события:
Стоит заметить, что событие onUpdated вызывается дважды:
На StackOverflow советуют проверять статус страницы:
Chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { if (changeInfo && changeInfo.status === "complete") { ... } });
Теперь при нажатии на иконку будет происходить подключение файла стилей, которые будут отображать комментарии, а повторный клик на иконку - вновь их скрывать.
ВыводыКак нельзя кстати, стоит упомянуть мою полную версию расширения VK Comment Blocker, которая доступна в
Расширения и плагины - полезные дополнения к уже существующим функциям на сайте и в браузере. С их помощью можно записывать аудио и видео с экрана, включать поиск ошибок, а также многое другое.
В этой статье мы рассмотрим создание самого простого расширения - запускатора избранных сайтов. Хотя приложение и будет примитивным, оно всё-таки раскроет процесс создания и загрузки расширения для 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/ .
Эта статья предназначена для администраторов Chrome Enterprise и разработчиков, имеющих опыт создания пакетов приложений Chrome и их публикации.
Если в Интернет-магазине Chrome не оказалось продукта с нужной вам функциональностью, вы можете создать собственное приложение или расширение, а пользователи смогут добавить его на свои устройства с Chrome OS или в браузер Chrome. Например, как администратор, вы можете автоматически установить на устройствах пользователей частное приложение-закладку, ссылающееся на веб-сайт отдела кадров.
ПодготовкаНиже в качестве примера используется приложение-закладка. Инструкции по созданию более сложных приложений и расширений Chrome приведены в руководстве по началу работы .
Разработчики могут тестировать свои приложения и расширения в браузере Chrome или на устройствах Chrome OS.
Чтобы устранить неполадки в приложении или расширении, воспользуйтесь журналами Chrome.
Шаг 3. Создайте коллекцию приложений (необязательно)Администратор может создать для организации коллекцию приложений, чтобы рекомендовать пользователям приложения и расширения Chrome для установки.
Шаг 4. Опубликуйте приложение или расширение в Интернет-магазине ChromeРазработчик может сделать приложение или расширение общедоступным либо ограничить доступ к нему. При публикации в Интернет-магазине Chrome можно выбрать один из трех вариантов.
Чтобы добавить приложение или расширение в Интернет-магазин Chrome, создайте ZIP-архив соответствующей папки, а затем опубликуйте продукт .
Шаг 5. Настройте правила работы с приложением или расширениемВ панели администратора Google можно управлять использованием приложений и расширений на устройствах Chrome и в браузере Chrome на компьютерах Windows, Mac и Linux в вашей организации. Правила Chrome можно настраивать
Написание простого расширения для браузера Chrome
Из архивов сайта developerWorks
Дуэйн О"Брайен
Дата архивации: 25.02.2019 | Впервые опубликовано: 13.03.2013
У каждого браузера свои сторонники и противники ― и свои преимущества и недостатки. Связывает их то, что люди проводят в браузерах все больше и больше времени. В этом цикле статей показано, как самостоятельно написать расширение для браузеров Chrome, Firefox, Internet Explorer и Safari. Читателю предлагается построить одно и то же простое расширение для каждого браузера, чтобы он смог почувствовать, во что это выливается, насколько трудно или легко решить те или иные типичные задачи и что нужно для распространения своего расширения. Эта статья посвящена расширению для браузера Chrome.
Этот контент больше не обновляется и не поддерживается. Полный текст статьи предоставляется "как есть" в формате PDF. Учитывая стремительное развитие технологий, некоторые шаги и иллюстрации могут быть изменены.
23 октября 2013 в 13:21 Создаём своё расширение для Google ChromeНа хабре уже есть несколько статей о создании расширений для хрома, поделюсь своим опытом, затронув основные вещи и места, в которых у меня возникли трудности.
Что понадобится для создания расширения в двух словах:
1) Базовые знания Javascript
2) Базовые знания HTML
3) 5$
Покажу создание расширения для хрома на примере своего, созданного для подсчета «потерянного времени» в интернете. То есть это расширение считает время, проведенное на сайтах с возможностью определения посещенных сайтов по категориям: полезное время, либо потерянное время.
Итак, я начинаю создание расширения с создания папки самого расширения, в которую будем класть все создаваемые нами файлы. Назову её «losttime». Далее, я создаю файл manifest.json, выглядит он следующим образом:
manifest.json
{
"manifest_version": 2,
"name": "Lost Time",
"version": "1.0",
"icons": {
"128": ""
},
"content_scripts": [
{
"matches": [ "*://*/*" ],
"js": [ "content.js" ]
}
],
"background": {
"scripts": ["background.js"]
},
"permissions": [
"http://losttime.su/*"
],
"browser_action": {
"default_title": "LostTime",
"default_icon": "",
"default_popup": "popup.html"
}
}
Некоторые из строк должны быть интуитивно понятны, но что обязательно нужно знать:
- Значение manifest_version должно быть обязательно «2»;
- В content_scripts пишем, какой скрипт будет запускаться на всех страницах отдельно;
- В background пишем общий скрипт(фоновый скрипт), который запускается при запуске браузера;
- В permissions пишем адрес сайта, с которого будет браться информация.
Все, что буду использовать я, не обязательно использовать Вам, если вам это по логике просто не нужно. .
То самое окошко, которое Вы можете видеть по клику на иконку расширения - это страница: popup.html.
Она у меня выглядит следующим образом:
popup.html
Потерянное время LostTime
![](/uploads/" Title = )
Чтобы было понятнее, описание кода вставил в самом HTML. Меню я организую просто: на картинку ставлю внутреннюю ссылку расширения.
Раз уж начал про popup.html, то расскажу сразу и о popup.js
Выглядит он у меня весьма просто:
popup.js
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://losttime.su/?tmpl=login&token="+localStorage["lostlogin"], true); // тут происходит ГЕТ запрос на указанную страницу
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) // если всё прошло хорошо, выполняем, что в скобках
{
var dannie = document.getElementById("dannie");
dannie.innerHTML = xhr.responseText; // добавляем в блок с id=dannie полученный код
}
}
xhr.send();
Описание кода также вставил.
Именно описанная выше конструкция позволяет вытащить и вывести содержание с Вашего, а может и не с Вашего сайта. Но, что важно знать:
- В файле манифеста обязательно в поле permissions пишем адрес сайта, с которого будет браться информация.
- Файл popup.js связан с фоновым скриптом background.js, т.к. данные, занесенные в локальное хранилище на background.js, видны и на popup.js.
Перед тем, как рассмотреть файл фонового скрипта background.js, рассмотрим файл скрипта, который запускается на каждой странице отдельно: content.js
У меня он выглядит так:
content.js
function onBlur() { // окно теряет фокус
chrome.runtime.sendMessage({site:sait,time:localStorage}); // отправка сообщения на background.js
localStorage = "0";
}
window.onblur = onBlur; // если окно теряет фокус
function sec() //выполняется каждую секунду
{
if(document.webkitVisibilityState == "visible")//если страница активна
{
localStorage = parseInt(localStorage,10) +1; // обновляем данные о сайте в локальном хранилище
}
}
var sait=location.hostname; // на каком сайте находится скрипт
localStorage = "0";
setInterval(sec, 1000);// запускать функцию каждую секунду
Наиболее интересный момент из моего скрипта, я считаю, должен быть:
chrome.runtime.sendMessage({site:sait,time:localStorage});
Тут происходит отправка сообщения background скрипту, а именно две переменные: site:sait - содержит адрес сайта, на котором скрипт
time:localStorage - количество времени, проведенное на этом скрипте.
background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
var a = request.site; // данные о сайте
var b = request.time; // данные о проведенном времени
// тут делаем с этими данными что хотим.
});
Вот, собственно, и она. Разбирать подробно ничего не стану, т.к. это в принципе и не нужно. Достаточно знать наглядный пример, чтобы осуществить задуманное. Если в скрипте background.js добавить какие-либо данные в локальное хранилище(а также куки, web sql), то эти же данные можно будет использовать и в popup.js скрипте.
Вот собственно всё, что я хотел поведать о создании расширения, но я затрону еще один момент, в котором у меня возникли трудности.
На странице настроек мне необходимо было организовать перетаскивание сайтов в разные колонки.
Т.к. данные вставляются посредством InnerHtml, то данная возможность просто так не появится. Вот, что пришлось организовать:
$("#dannie").on("mouseover", ".sait", function() {
$(this).css({"border":"3px solid #ffffff"});
});
$("#dannie").on("mouseout", ".sait", function() {
$(this).css({"border":"3px solid black"});
});
$("#dannie").on("mousedown", ".sait", function() {
$(this).css({"border":"3px solid black"});
});
$("#dannie").on("mouseover", ".sait", function() {
$(".sait").draggable({
helper:"clone"
});
});
вместо привычного:
$(".sait").mouseover(function(){
$("#"+this.id).css({"border":"3px solid #ffffff"});
});
$(".sait").mouseout(function(){
$("#"+this.id).css({"border":"3px solid black"});
});
$(".sait").mousedown(function(){
$("#"+this.id).css({"border":"0px solid black"});
});
$(".sait").draggable({
helper:"clone",
});
