Форум   Статьи   Новости   Файлы   Bugtraq   Сниффер   Друзья   О Клубе

Последнее на Форуме

Контакты

Связь с Администрацией

hpcteam1[@]gmail.com

Статьи rss

[ Добавить Статью на сайт ]

Статьи / Программирование / JavaScript

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

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

После прочтения статьи вы сможете делать следующее:

1) Создать простое расширение.
2) Работать с контекстным меню браузера.
3) Работать с локальным хранилищем.

Предыстория


Недавно мне понадобилось написать какой-нибудь проект. У меня был выбор между программой на VB или веб разработкой, и я выбрал расширение для Google Chrome. Для тех, кто не знает:

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

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

Работать наше расширение будет таким способом:

1) При клике на изображении будет появляться контекстное меню с нашей функцией “Добавить в галерею”.

2) При клике на иконку расширения (возле адресной строки) будет открываться галерея.

3) В галерее можно будет удалить ненужные изображения.

В конечном виде окно галереи будет выглядеть так:



Структура расширения


Расширение для Google Chrome – html, JavaScript, css файлы и manifest.json.

Примечание: manifest.json- обычный текстовый документ, желательно в UTF-8.

Для начала нужно сказать об архитектуре расширения, которая условно делит его на 2 части: то, что работает в контексте просматриваемой страницы, и то, что работает в контексте браузера. Связь между ними происходит через сообщения. Забегая наперед, скажу, что мы будем использовать фоновую страницу для добавления в контекстное меню изображений своей функции.
В manifest.json мы указываем: имя, разрешения, иконку, версию расширения и другие необходимые сведения. Следует внимательно следить за кавычками в этом файле, потому что если пропущен хоть один символ, то расширение не установится.

Важные для нас параметры это background_page и default_popup - фоновая и всплывающая (будет появляться при клике на иконку расширения возле адресной строки) страницы. В отличии от страницы default_popup, которая выполняется при нажатии на иконку расширения, страница background_page выполняется только 1 раз при старте браузера или расширения. В разрешениях мы укажем работу с контекстным меню, вкладками, нелимитированное локальное хранилище и разрешение обращаться к любому адресу. Для тех, кто не знает:

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

Весь файл manifest.json что получился у меня:

{
   "background_page": "background.html",
   "description": "Галерея для изображений",
   "icons": {
      "16": "search-s.png",
      "48": "search-m.png"
   },
 
   "name": " Галерея ",
   "permissions": [ "contextMenus" , "tabs", "http://*/*" , "https://*/*","unlimitedStorage"],

   "version": "1",
    "browser_action": {
     "default_title": " Галерея ",
     "default_icon": "search-m.png",
      "popup": "popup.html"
    }
}

Примечание: Приведенные параметры в примере - основные. Есть и другие параметры, но они нам покато не понадобятся. Иконки должны быть размера 16*16 и 48*48.

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


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

1) Нажимаем на кнопку “Настройка и управление Google Chrome”(гаечный ключ).
2) Из появившегося выбираем “Параметры”.
3) Выбираем в меню “Расширения”.
4) Кликаем по чекбоксу “Режим разработчика”, затем “Загрузить распакованное расширение”.
5) Выбираем папку с расширением и кликаем ОК.

Если вылетает ошибка, то скорее всего вы допустили ошибку в файле manifest.json и в окошке ошибки должна быть указана строка в файле, содержащая ошибку. Дальше в статье мы будем добавлять новые файлы, и дописывать в них код. Расширение должно “обновляться” автоматически, если этого не происходит перезайдите в браузер.

Тело галереи


Чтобы не писать галерею самому можно скачать уже готовый вариант, благо красивые jQuery галереи можно найти при помощи Google. Я скачал уже готовый вариант с сайта smoothgallery.jondesign.net. Это бесплатная галерея, использующая jQuery и мы можем добавлять и изменять ее. Отлично, мы можем с ней спокойно работать. После загрузки я распаковал ее и удалил все файлы примеры и изображения к ним кроме demo.html. Теперь можно переместить файлы в папку с нашим расширением.

background.html

Как уже сказано, это фоновая страница, запишем в ней javascript код для добавления функции в контекстное меню изображения:

chrome.contextMenus.create({"title": "Добавить в галерею", 
                                             "contexts": ["image"],
                                             "onclick": addImage});

Должно получиться так:



Структура расширения


При клике будет выполняться функция addImage, в которой будем сохраняться URL изображения. Мы будем создавать локальные хранилища chimggali0, chimggali1 , chimggali2 и т.д.

0,1,2,..,n – ссылки на сохраненные изображения, где n-последняя ссылка.

Также мы будем получать и сохранять дату, когда пользователь сохранил изображение. Локальные хранилища для дат: chdate0, chdate1, chdate2 и т.д. Делаем локальное хранилище для переменной i, которая отвечает за нумерацию изображений. Если локального хранилища не существует, то i=0, в противоположном случае присваиваем значение из хранилища. После выполнения функции i увеличивается на 1 и сохраняется в хранилище.

Сам код функции:

function addImage(info,tab) {
if ( ! localStorage['chgali'])
{
		
	i = 0;


}
else
	{
i = readProperty("chgali");


	}

		imggal = info.srcUrl;

	  	localStorage["chimggali"+i+""]=imggal ;
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
var fordate = day+ "." + month + "." + year;
localStorage["chdate"+i+""]=fordate;
	i++;

  	localStorage["chgali"]=i ;


}

Чтобы получить значение “ячейки” я использовал функцию readProperty для удобства. Эту функцию я буду использовать и далее.

Ее код:

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

demo.html

Это файл нашей галереи, зайдя в который можно будет увидеть добавленные изображения. Если сразу открыть этот файл то в нем будут стандартные изображения, добавленные автором при помощи HTML. Нам же надо динамически их генерировать. Первое что надо сделать это убрать статические изображения. Удаляем все <div class="imageElement"> и код в них. Если сейчас открыть этот файл то в галерее ничего не будет, так что надо написать JavaScript код для отображения добавленных картинок.

Функция будет называться load и выполняться при загрузке страницы, для этого допишем в теге body onload="load()". В функции получаем значение chgali из локального хранилища и организовываем цикл. В цикле создаем div контейнер с id="imageElement", в котором будет изображение. Получаем значения ссылки на изображения и дату его добавления, в теге h3 будет дата, а в теге будет ссылка на изображения. При помощи innerHTML добавляем наш контейнер в div контейнер с id="myGallery".

Теперь можно запустить галерею, дописав в конце функции window.addEvent('domready',startGallery);. Если вам не нравятся пропорции, в которых выводятся дата добавления и URL-адрес страницы, то можно поэкспериментировать с файлом jd.gallery.css в папке css. Там записаны стили всех элементов нашей галереи и, потратив немного времени, можно подобрать идеальные на свое усмотрение значения. Одна задача решена, в галерее уже есть добавленные изображения, но их нельзя удалять. Для возможности удаления создадим функцию idelete, в которую будем аргументом передавать номер изображения. Функция будет в цикле перезаписывать соответствующую “ячейку” в локальном хранилище на последующую, пока не дойдет до последней, и уменьшит chgali (количество всех изображений) на 1. То же самое надо сделать и с датой добавления изображения. В конце допишем перезарузку вкладки.

Код функции idelete

var func = function idelete(asd)
{

for(var f=asd;f<team-1;f++){

var fgh=f+1;

var rty = readProperty("chimggali"+fgh+"");


localStorage["chimggali"+f+""]=rty;

var rtu = readProperty("chdate"+fgh+"");
localStorage["chdate"+f+""] = rtu;
}
var close=readProperty("chgali");
localStorage["chgali"] = close-1;


window.location.reload();
}

Примечание: team-1 – кол-во изображений.

Допишем в функции load код, получающий кол-во миниатюр. Организуем цикл добавляющий маленький крестик в углу для удаления к каждой миниатюре картинки. Добавим событие: при клике на маленький крестик выполнять функцию idelete с аргументом – порядковым номером миниатюры.

Код:

var close = document.getElementsByClassName('thumbnail');
for(var t=0;t<close.length;t++)
{
close[t].innerHTML='<img src="http://www.upyourfiles.com/templates/default/images/x.gif" id="cl'+t+'" onclick="func('+t+')">';
}


popup.html

В этой части есть два способа. Так как мы должны просто открыть галерею, то можно не использовать popup, а при клике на иконку сразу открывать галерею. В обратном случае будет появляться окно с кнопкой “Галерея”.

Для наглядности приведу снимок получившегося всплывающего окна:



Первый вариант (без использования popup)

Если использовать этот вариант надо удалить из файла manifest.json строчку "popup": "popup.html".

Пишем в background.html

chrome.browserAction.onClicked.addListener (function() {
  chrome.tabs.create({"url":”demo.html”});
}

Примечание: chrome.browserAction.onClicked исключает использование popup и наоборот.

Этим кодом мы при клике на иконку открываем новую вкладку с галереей.

Второй вариант (с popup)

В файле popup.html создаем кнопку и при клике выполняем функцию click. Для создания красивых кнопок при помощи css можно использовать эти сайты (мне больше всего нравится первый):

http://www.cssbuttongenerator.com/
http://css3buttongenerator.com/
http://css-tricks.com/examples/ButtonMaker/

В функции click запишем создание новой вкладки с галереей (то же что и в верхнем примере):

chrome.tabs.create({"url":”demo.html”});

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


1) Нажимаем на кнопку “Настройка и управление Google Chrome” (гаечный ключ).
2) Из появившегося выбираем “Параметры”.
3) Выбираем в меню “Расширения”.
4) Кликаем по чекбоксу “Режим разработчика”, затем по “Упаковка раширения”.
5) В поле “Корневой каталог расширения” выбираем папку с расширением. Второе поле оставляем пустым.
6) В появившемся окне указано местонахождение упакованного расширения и файла ключей. Файл ключей понадобится для установки обновлений расширения, а не его копий. При упаковке новой версии расширения просто укажите файл ключей во втором поле при упаковке.

Примечание: Хоть упакованное расширение и имеет расширение crx, но это обычный zip архив указанной папки с добавлением уникального идентификатора.

Теперь наше расширение можно распространять!

Концовка


Спасибо за внимание! Написание расширение на самом деле довольно увлекательное занятие. В следующей статье я думаю затронуть темы: хромовский API, XMLHttpRequest и регулярные выражения.

P.S. Вот ссылка для желающих почитать официальную документацию.

P.P.S. Вот ссылка на исходники расширения.

P.P.P.S.Обсуждаем в этой теме.

Автор: thref2

Материал добавил thref2


Комментарии(0)

Дата: 2012-01-14 17:58:11

Добавить Комментарий к Материалу

Вы должны быть авторизованы на форуме чтобы добавлять комментарии. Регистрация Уже авторизованы?

Комментариев к материалу пока нет.

Последнее на Сайте

Новости

Статьи

Bugtraq

Файлы

Copyright © 2008 - 2017 «HPC». При копировании материалов ставьте ссылку на источник.
Все материалы представлены только в ознакомительных целях, администрация за их использование ответственности не несет.
Пользовательское соглашение Реклама на сайте