Пишем свое первое расширение для Chrome. Создаём своё расширение для Google Chrome Пишем расширение для браузера javascript

Tutorial

На хабре уже есть несколько статей о создании расширений для хрома, поделюсь своим опытом, затронув основные вещи и места, в которых у меня возникли трудности.
Что понадобится для создания расширения в двух словах:
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

Чтобы было понятнее, описание кода вставил в самом 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", });

Мне всегда хотелось рассказывать людям об интересных возможностях (технологиях), которые сейчас могут быть доступны каждому, но почему-то не доступны каждому. Да, получилось тавтология, но она в полной мере отображает моё внутреннее негодование на эту животрепещущую для меня тему. Как бы там ни было, речь сейчас будет не о том, как говорится. А поговорим мы сегодня о создании расширений для браузера 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, которая доступна в

23 октября 2013 в 13:21 Создаём своё расширение для Google Chrome

Разработка веб-сайтов ,
JavaScript ,
Google Chrome

Tutorial

Все, что буду использовать я, не обязательно использовать Вам, если вам это по логике просто не нужно. .

То самое окошко, которое Вы можете видеть по клику на иконку расширения - это страница: popup.html.

Она у меня выглядит следующим образом:

popup.html
Потерянное время LostTime

Раз уж начал про popup.html, то расскажу сразу и о popup.js

Выглядит он у меня весьма просто:

Описание кода также вставил.

У меня он выглядит так:

На странице настроек мне необходимо было организовать перетаскивание сайтов в разные колонки.

В интернете много сайтов на которых реализована возможность пролистывать страницу вверх без помощи мыши или полосы прокрутки. Но в то же время еще есть сайты где такой реализации нет. "Почему бы не попробовать написать скрипт который бы добавлял такую кнопку на все сайты?" - подумал я и принялся за реализацию. Такие скрипты называются пользовательскими и имеют расширение *.user.js . Почитать к примеру можно на хабре . К сожалению без "подводных камней" не обходится. Существуют некоторые различия в реализации userjs под разные браузеры. Я остановлюсь на описании реализации нашего userjs скрипта как расширения для браузера Google Chrome .

manifest.json

Обязательным для расширения Google Chrome является файл manifest.json в котором описываются параметры, пути к внешним файлам (*.js, *.css и др.), поддержка версии и т.п. для расширения. Подробнее о файле можно почитать . В нашем случае файл manifest.json выглядит следующим образом:

{ "manifest_version": 2, "content_scripts": [ { "exclude_globs": , "include_globs": [ "*" ], "js": [ "jquery.js", "backTopUserJS.user.js" ], "css": [ "css/style.css" ], "matches": [ "http://*/*", "https://*/*" ], "run_at": "document_end" } ], "converted_from_user_script": true, "description": "Back top userscript extension for google chrome", "name": "backTopUserJS", "version": "1" }

Для удобства мы используем библиотеку JQuery которую положили рядом с файлом manifest.json и основным файлом скрипта (в нашем случае это backTopUserJS.user.js). Его содержимое следующее:

// ==UserScript== // @name backTopUserJS // @author Aleksandr Filatov // @license MIT // @version 1.0 // ==/UserScript== function main() { var disp = $(window).scrollTop() > 400 ? "block" : "none"; var $upButton = $("

"); $(document).find("body").append($upButton); $upButton.click(function () { $("html, body").animate({ scrollTop: 0 }, "slow"); }); $(window).scroll(function () { if ($(window).scrollTop() > 400) $upButton.fadeIn("slow"); else $upButton.fadeOut("slow"); }); }; var script = document.createElement("script"); script.appendChild(document.createTextNode("("+ main +")();")); (document.body || document.head || document.documentElement).appendChild(script);

Думаю скрипт достаточно понятен, чтобы его подробно рассматривать. Пояснить стоит лишь последние 3 строчки. На самом деле это мелкий хак, который вставляет наш скрипт в код страницы сайта. Если кто-то из вас найдет способ лучше можете написать к комментах свои фиксы:)

Установка расширения в браузере

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

Создаем папку для нашего расширения например так C:\MyChromeExtensionUserJS

Для каждого расширения создаем свою директорию например в нашем случае назовем ее так C:\MyChromeExtensionUserJS\backTopUserJS . Добавляем файлы расширения в эту директорию.

Заходим "О браузере Google Chrome" -> вкладка "Расширения" или в адресной строке пишем chrome://extensions/

Ставим галочку "Режим разработчика"

Нажимаем кнопку "Загрузить распакованное расширение" и выбираем директорию нашего расширения. Нажимаем "OK".

Расширение установлено и готово к работе. Чтобы обновить расширения после того как вы внесли в него изменения достаточно просто нажать кнопку "Обновить расширение" или в режиме разработчика сочетание клавиш Ctrl+R .

Итог

Посмотреть исходники скрипта можно на github . Скрипт не претендует на звание идеального, а служит лишь примером и толчком к написанию собственных пользовательских скриптов для 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. Вам посыпятся бэки. Попробуйте, а потом расскажите другим, а лучше на этой странице дайте ссылку о вашем опыте написания плагинов и эффекте с притоком пользователей на сайт. С притоком посетителей у вас вырастут Пузомерки на сайте, ну а кому как не вам ли не знать, зачем они нужны.

Это один из самых белых способов роста сайта.