Создание расширения для GoogleChrome

Тема создания расширений достаточно хорошораскрыта в сети, есть множество статей,документации на эту тему

(http://code.google.com/chrome/extensions/index.html) . Но я не нашел

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

Для работы с расширениями вам понадобится переключить каналобновлений на Dev или Beta (http://dev.chromium.org/getting-

involved/dev-channel) .

Расширение будет иметь кнопку с иконкой на панели инструментовChrome. При нажатии на кнопку будет появляться всплывающее окно(popup) со случайной картинкой из галлереи фотографий телескопаHubble (http://hubblesite.org/gallery/wallpaper/) . В верхней части

окна будут размещены кнопки: настроить (показать страницунастроек), обновить (показать другую фотографию), закрыть(закрыть всплывающее окно).

Расширение будет содержать страницу настроек (options), на которойможно будет выбрать язык интерфейса (русский, английский) ивыбрать размер картинки (маленький, большой).

Создание расширения начинается с создания папки, в которой мы будетсоздавать все необходимы для работы расширения файлы. Созадимпапку HubblePics. Далее создадим файл, который будет содержатьописание нашего расширения — manifest.json(http://code.google.com/chrome/extensions/manifest.html) . Данный

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

"name": "Hubble pictures extension", // Название расширения "version": "1.0", // Номер версии "description": "Hubble pictures extension", // Описаниерасширения

"permissions": [ "tabs", // Разрешить расширению работать с вкладками "http://hubblesite.org/*" // Разрешить расширению обращаться куказанному адресу ],

"browser_action": // Элементы браузера "default_title": "Hubble", // Название кнопки "default_icon": "images/icon.png", // Иконка для кнопки "popup": "popup.html" // Всплывающее окно ,

"options_page": "options.html" // Страница настроек

* This source code was highlighted with Source Code Highlighter(http://virtser.net/blog/post/source­code­highlighter.aspx) .

Подробное описание файла manifest.json вы можете получить здесь(http://code.google.com/chrome/extensions/manifest.html)

Настройки

Создадим страницу настроек — options.html. Приводить полный кодстраницы я не буду, только интересные, на мой взгляд моменты, аименно сохранение, извлечение настроек и локализация.

Сохранять настройки можно в объекте localStorage, который, по сути,представляет из себя ассоциативный массив, хранящий пары«название», «значение». Например, для сохранения состояниярадиокнопки «Размер картинки — Маленький», используется код:

localStorage["previewSmall"] =document.getElementById("previewSmall").checked;

Для восстановления состояния:

document.getElementById("previewSmall").checked =(localStorage["previewSmall"] == "true") ? true : false;

В своем проекте я обернул обращение к localStorage в функциюreadProperty чтобы избавится от лишних проверок и получитьвозможность получения значения по умолчанию:

function readProperty(property, defValue) if(localStorage[property] == null) return defValue;

return localStorage[property];

// Пример вызоваdocument.getElementById("previewSmall").checked =readProperty("previewSmall", true);

* This source code was highlighted with Source Code Highlighter(http://virtser.net/blog/post/source­code­highlighter.aspx) .

Локализация

С настройками разобрались, приступим к локализации. Способ,который я предлагаю, возможно, не самый лучший, но на данныймомент ничего лучше я придумать не смог. Если кто-то подскажетдругой, более простой вариант — буду рад.

Идея простая — есть ряд элементов, которые нужно перевести. У нихесть идентификаторы. Создается ассоциативный массив или объект, вкотором идентификатору элемента соответствует локализованныйтекст. Функция, которая занимается локализацией «пробегает» помассиву, по идентификатору находит контрол и устанавливает емутекст.

Создадим файл с названием элементов и указанием языка. Язык«регистрируется», путем добавления элемента в выпадающий список«Язык». Например русский язык добавляет в список элемент с текстом«Russian» и значением «ru_RU».

Файл \locale\ru_RU\options.js

RegisterLang();

lang_ru_RU = lngLanguage: "Язык", // Пара ­ идентификатор (id) элемента,

текст

lngPreviewSize: "Размер картинки", lngPreviewSmall: "Маленький", lngPreviewBig: "Большой", lngSave: "Сохранить", lngExit: "Выход"

function RegisterLang() var ctrl = document.getElementById("language");

ctrl.add(createOption("Russian", "ru_RU"));

* This source code was highlighted with Source Code Highlighter(http://virtser.net/blog/post/source­code­highlighter.aspx) .

Этот скрипт добавляется на страницу настроек (options.html)

<script type="text/javascript" src="locale/ru_RU/options.js"></script>

На странице, все локализуемые элементы должны иметьсоответствующие идентификаторы, например:

<span id="lngPreviewSmall">Small</span>

Локализацией занимается функция localize

function getSelectedLanguage() var lang = getSelectedValue("language"); // Возвращает

значение выбранного элемента в выпадающем списке "Language" return eval("lang_" + lang);

function localize() var lang = getSelectedLanguage();

// Перебираем все элементы объекта lang_ru_RU for(var ctrlId in lang) var value = lang[ctrlId];

// Получить элемент с id var ctrl = document.getElementById(ctrlId);

// Не найден, продолжаем перебор if(ctrl == null) continue;

// Найден, определить тип и присвоить значение if(ctrl.tagName == "SPAN") ctrl.innerText = value; else if(ctrl.tagName == "INPUT") ctrl.value = value;

* This source code was highlighted with Source Code Highlighter(http://virtser.net/blog/post/source­code­highlighter.aspx) .

Теперь, если нам необходимо добавить новый язык, напримеранглийский, мы просто создаем папку \locale\en_US, в ней создаем

скрипт options.js

RegisterLang();

lang_en_US = lngLanguage: "Language", ...

lngExit: "Exit"

function RegisterLang() var ctrl = document.getElementById("language");

if(ctrl != null) ctrl.add(createOption("English", "en_US"));

* This source code was highlighted with Source Code Highlighter(http://virtser.net/blog/post/source­code­highlighter.aspx) .

И добавляем скрипт на страницу

<script type="text/javascript" src="locale/en_US/options.js"></script>

Всплывающее окно

Внутри файла popup.html простая разметка, в которой предусмотреноместо для загружаемой картинки, кнопки управления и индикаторпроцесса загрузки.

<ul class="menu"> <li><img src="images/options.png" onclick="showOptions();"/></li> <li><img src="images/update.png" onclick="getPicture();"/></li> <li><img src="images/close.png" onclick="closePopup();"/></li></ul>

<div id="loader"> <img src="images/loader.gif" /></div>

<div id="image" style="display: none;"> <a href="#" id="hrefPlace" onclick="return openImage();"><imgid="imgPlace"/></a></div>

* This source code was highlighted with Source Code Highlighter(http://virtser.net/blog/post/source­code­highlighter.aspx) .

В общем ничего интересного. Все интересно вынесено в файл popup.js.

Данный скрипт, используя XMLHttpRequest загружает страницуhubblesite.org/gallery/wallpaper/(http://hubblesite.org/gallery/wallpaper/) , находит ссылки на

изображения, выбирает случайное и отображает в popup-е.

xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() if (xhr.readyState == 4) if (xhr.responseText) var xmlDoc = xhr.responseText;

var imgs =xmlDoc.match(/http:\/\/imgsrc.hubblesite.org\/hu\/db\/images\/hs­

[0­9]4­[0­9]2­[a­z]/g); var hrefs = xmlDoc.match(/gallery\/wallpaper\/pr[0­9]4,[a­z]/g);

if (imgs.length > 0) var randIdx = Math.floor(Math.random() * imgs.length);

var imgSize = "­wallpaper_thumb.jpg";

// Какую картинку показываем? if(readProperty("previewBig", "false") == "true") imgSize = "­640_wallpaper.jpg";

showImage("http://hubblesite.org/" + hrefs[randIdx],imgs[randIdx] + imgSize);

xhr.open("GET", "http://hubblesite.org/gallery/wallpaper/",true);xhr.send(null);

function showImage(url, imgSrc) var imgPlace = document.getElementById("imgPlace"); imgPlace.setAttribute("src", imgSrc);

var hrefPlace = document.getElementById("hrefPlace"); hrefPlace.setAttribute("href", url);

displayLoader(false);

* This source code was highlighted with Source Code Highlighter(http://virtser.net/blog/post/source­code­highlighter.aspx) .

←

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

Расширение создано, теперь необходимо загрузить его в Chrome.

Запускаем Chrome, нажимаем кнопку Настройка и управление ,выбираем пункт меню Extensions.

На открывшейся вкладке нажимаем Load Extension..., указываем путь кпапке и, если все сделано правильно, видим новую кнопку на панелиинструментов.

А в списке расширений видим наше расширение.

Теперь упакуем наше расширение, для того, чтобы его можно быловыложить на какой-нибудь ресурс и любой пользователь мог быскачать и установить его в пару кликов. Для этого, на той же закладкеInstalled Extensions нажимаем кнопку Pack Extension..., указываем путьк папке, содержащей файлы расширения, поле Private key file в первыйраз оставляем пустым.

Нажимаем OK, видим сообщение о том, что расширение упаковано.

Если мы собираемся выпускать обновленные версии расширения —сохраним созданный файл с ключем HubblePics.pem и будем указыватьпуть к нему при каждой последующей упаковке расширения, иначе,каждый раз будет генерироваться новый файл, что приведет кназначению нового идентификатора для нашего расширения, а это, всвою очередь приведет к тому, что вместо обновления, пользовательбудет устанавливать новую копию расширения.

Архив с исходниками расширения(http://intelloware.com/download/hubblepics.zip)

Практически вся информация, необходимая для разработки расширенийсосредоточена на странице Google Chrome Extensions: DeveloperDocumentation(http://code.google.com/chrome/extensions/index.html) . Если этого

покажется мало, то всегда можно взять готовое расширение, изменитьрасширение с crx на zip, распаковать и посмотреть как это сделано «уних».

Так же источником информации, так сказать, из первых рук, можетстать список изменений (http://googlechromereleases.blogspot.com/)

при выходе новых версий Google Chrome.

расширения chrome

комментарии (27) подписаться на новые комментарии

+88 20 ноября 2009, 14:06 264 Terror

спасибо! взял на заметку

В закладки, однозначно! Спасибо за труды, как раз нечто подобное и искал неделю назад :)

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

судя по всему писать расширения под хром очень просто, этот факт не можетне радовать

Я так и начинал :)Кстати, а под лису начинал учить с хабраголика :)

По­моему всё проще: берёшь расширение из примеров, разбираешь,изучаешь, собираешь из него своё, попутно почитывая документацию.

На сайте с документацией сказано «you need to subscribe to the Dev or Betachannel», значит все­таки поддерживает.

Про какой хабрааддон идет речь?

В бете же еще нет поддержи расширений?

Кстати, кто сможет написать хабрааддон к хрому?

Stom, 20 ноября 2009, 14:12 +1

rpeMJIuH, 20 ноября 2009, 14:21 +1

join, 20 ноября 2009, 14:50 +5

Terror, 20 ноября 2009, 15:03 0

umonkey, 20 ноября 2009, 14:56 +2

sofcase, 22 ноября 2009, 23:03 0

hellt, 20 ноября 2009, 15:03 0

Terror, 20 ноября 2009, 15:07 0

hellt, 20 ноября 2009, 15:13 0

Что­то мне подсказывает, что надо для начала автору того расширенияк Firefox предложить это сделать. Наверняка часть кода можно простоперетащить без изменений.

сказано, но вот все расширения на www.chromeextensions.org/ имеютстатус developer builds.

вот про такой аддон речь — habrahabr.ru/blogs/firefox/64790/

Для этого используются Content scripts

Чекер уже есть готовый (в примерах), алгоритм там элементарный. Сампользуюсь гуглопочтой на своем домене, переделал чекер за пару секунд.

Очень полезная статья.

Таким образом можно сделать checker почты или еще что­то подобное.

Хотелось бы еще иметь представление о работе расширений со страницами,загруженными в браузере.Например, под FF есть расширение Evernote, которое помещает выделенныйтекст на странице в личный блокнот

В расширениях можно так же jQuery и другие библиотеки использовать

Я так понимаю, у аякса тут нет никаких ограничений? это очень радует.наверно на выходных попробую написать кое­какой extension, которого мнеочень нехватает

Terror, 20 ноября 2009, 15:30 0

LDZ, 20 ноября 2009, 15:08 +1

Terror, 20 ноября 2009, 15:19 0

Ordenador, 20 ноября 2009, 21:20 0

slik, 20 ноября 2009, 15:31 0

Terror, 20 ноября 2009, 15:36 0

slik, 20 ноября 2009, 15:38 0

Я как­то пробовал использовать любимый мутулс, но уже давно, так тамвыборка с помощю $$() не работала… Надеюсь уже работает. Навыходных попробую.

Нет, не забыл, в конце статьи есть информация об упаковкерасширения.

И да, забыл финал написать, как делать запакованные екстеншен

Закрываем хром и

C:\Users\%username%\AppData\Local\Google\Chrome\Application>chrome.exe­­pack­extension=c:\HubblePics

В итоге *.pem не теряем, а *.crx дарим людям

Забыл разместить ссылку, исправился. В конце статьи ссылка на архив.

Приложили бы своё расширение для тестов

да само расширение, особенно на С#.NET, создать несложно. А вотзаставить его выглядеть нормально и воспринимать XP­стили у меня досих пор не вышло. И это при том, что писал и на С#.NET, и на С++.NET, ина С++ голом, и на Delphi.

Согласен, дрожь берет. Но с другой стороны плагины IE имеют болеенизкоуровневый доступ, за который приходится платить сложностью кода.

Приятно, что настолько же просто, как и для фокса. С ужасом вспоминаю создание расширений для ИЕ

deerua, 20 ноября 2009, 16:23 0

Terror, 20 ноября 2009, 16:37 +1

deerua, 20 ноября 2009, 19:10 0

Terror, 20 ноября 2009, 21:39 0

NightWriter, 20 ноября 2009, 18:14 +1

Terror, 20 ноября 2009, 18:25 0

NightWriter, 20 ноября 2009, 18:33 0

фактически, да. Я тоже. Приходилось ломиться сквозь чащу

Писать не сложно, код он и есть код, но «порог входа» туда высокий.Готовых, рабочих примеров, в свое время, я даже на MSDN не нашел.

Всё­таки XML более человечен для таких целей, чем JSON…Я имею в виду манифест и локализацию.

Не забудьте добавить в скрипт полезную функцию — автообновление

Terror, 20 ноября 2009, 18:42 0

NightWriter, 20 ноября 2009, 19:10 0

pepelsbey, 20 ноября 2009, 19:09 0

Guria, 22 ноября 2009, 10:36 0