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

XAMAS

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

Для работы с расширениями вам понадобится переключить канал обновлений на Dev или Beta.

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

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

Добавлено через 00:17 мин.
Создание расширения начинается с создания папки, в которой мы будет создавать все необходимы для работы расширения файлы. Созадим папку HubblePics. Далее создадим файл, который будет содержать описание нашего расширения — manifest.json. Данный файл является обязательным для каждого расширения. Именно из него Chrome получает всю необходимую информацию о расширении (название, версия, разрешения, страницы расширения и т.д.).

Добавлено через 00:55 мин.
{
"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": "popu***ml" // Всплывающее окно
},

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

This source code was highlighted with Source Code Highlighter.

Подробное описание файла manifest.json вы можете получить здесь

Настройки

Создадим страницу настроек — 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.

Добавлено через 01:21 мин.
Локализация

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

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

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

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

Сталин

Спизжено с хабра

XAMAS

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.

Добавлено через 00:32 мин.
некоторые писали что как делать их я написал

скотинка развекаетса

Нагло скопировано.Сам то небось его не создашь.