Пишем расширение для google chrome (часть 1)

21-01-2011

Мне, как частому посетителю сайта free-lance.ru, было бы удобно оперативно получать уведомления о новых проектах. Поскольку я пользуюсь браузером google chrome, первым делом я поискал расширения на данную тему для него. Было там одно расширение для free-lanfe.ru, но жутко сырое и недоделанное.

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

Итак, приступим.

Сразу покажу структуру папок и файлов, которая у меня получилась:

структура файлов проекта

Это поможет Вам далее лучше ориентироваться в проекте и моих объяснениях.

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

Начинаем наш проект с файла manifest.json:

Copy Source | Copy HTML
  1. {
  2.  "name": "Free-Lance checker by Cramen", // Название расширения
  3.  "version": "2.0", // Номер версии
  4.  "description": "Проверялка новых проектоф на free-lance.ru", // Описание расширения
  5.  
  6.  "permissions": [
  7.   "tabs", // Работа с вкладками
  8.   "http://www.free-lance.ru/*" // Разрешить обращаться к указанному адресу
  9.  ],
  10.  
  11.  "browser_action": { // Элементы браузера
  12.   "default_title": "Free-Lance checker", // Название кнопки
  13.   "default_icon": "img/icon.png", // Иконка для кнопки
  14.   "popup": "popup.html" // Всплывающее окно
  15.  },
  16.  
  17.  "options_page": "options.html" // Страница настроек
  18. }

 

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

Положите в папку img иконку с именем icon.png (или под другим именем и в другую папку при условии внесения соответствующих изменений конфигурации в файле manifest.json )

Теперь создадим страницу options.html:

Copy Source | Copy HTML
  1. DOCTYPE html>
  2. <html>
  3. <head>
  4.     <link rel="stylesheet" href="img/options.css" />
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. head>
  7. <body>
  8. <div id="main">
  9.     <label>Логинlabel>
  10.     <input type="text" name="login">
  11.     <label>Парольlabel>
  12.     <input type="password" name="passwd">
  13.     <label>Количество отображаемых проектовlabel>
  14.     <input type="text" name="proj_count" value="15">
  15.     <label>Время обновленияlabel>
  16.     <select name="update_time">
  17.         <option value="15000">15 сек.option>
  18.         <option value="30000">30 сек.option>
  19.         <option value="60000">1 мин.option>
  20.         <option value="300000">5 мин.option>
  21.         <option value="600000">10 мин.option>
  22.         <option value="1800000">30 мин.option>
  23.         <option value="3600000">1 часoption>
  24.     select>
  25.     <input type="submit" value="Сохранить" id="save">
  26. div>
  27. body>
  28. html>

Тут у нас простейшая html страничка, на которой мы расположили несколько полей формы: Логин и пароль для того, чтобы наше дополнение логинилось на сайт под нашим аккаунтом, количество отображаемых проектов и время обновления, о которых скажем позже.

Теперь надо немного облагородить внешний вид этой страницы. А вот тут мы не зна подключили к ней файл стилей img/options.css.

Создаем его и заполняем примерно следующим содержимым:

Copy Source | Copy HTML
  1. * {
  2.     margin:  0;
  3.     padding:  0;
  4.     font-size: 13px;
  5. }
  6.  
  7. body {
  8.     background: #F3F3FF;
  9. }
  10.  
  11. #main {
  12.     margin: 200px auto auto auto;
  13.     padding: 15px 7px;
  14.     width:300px;
  15.     border: 2px solid #F3F3FF;
  16.     border-radius: 20px;
  17.     background: -webkit-gradient(linear, left top, left bottom, from(#D7DCEE), to(#B3BBD5));
  18.     -webkit-box-shadow: 0px 0px 9px #888F99;
  19. }
  20.  
  21. input, select {
  22.     display: block;
  23.     width: 240px;
  24.     margin: 5px 0px 15px 40px;
  25.     padding: 2px 4px 2px 4px;
  26.     background: #F3F3FF;
  27.     background: -webkit-gradient(linear, left top, right bottom, from(#F3F3FF), to(#E7F0F6));
  28.     -webkit-box-shadow: 0px 0px 2px #FFF;
  29.     border: 1px solid #A5B0C9;
  30.     border-radius: 6px;
  31.     color: #808090;
  32.     outline: none;
  33.     font-size: 14px;
  34. }
  35.  
  36.  
  37. input[type=submit] {
  38.     width:120px;
  39.     margin: 25px auto 0 40px;
  40.     cursor: pointer;
  41. }
  42.  
  43. input:focus, select:focus {
  44.     border: 1px solid #808090;
  45.     color: #506070;
  46. }
  47.  
  48. input:hover, select:hover {
  49.     background: #FFF;
  50. }
  51.  
  52. label {
  53.     font-size: 15px;
  54.     font-weight: bold;
  55.     color: #506070;
  56.     margin: 0 0 0 10px;
  57. }

Теперь мы готовы свое расширение загрузить в google chrome!

Для этого откроем страницу расширений (Главное меню -> Инструменты -> Расширения) и войдем в режим разработчика:

В режим разработчика

Мы увидим несколько новых кнопок. Жмем кнопку Загрузить распакованное расширение и выбираем папку с нашим расширением.

Если все правильно сделали. расширение удачно загрузится и вы увидите его иконку в панели вместе со всеми остальными иконками расширений. Теперь мы сможем попасть на страницу настройки расширения, кликнув на соответствующую ссылку. Мы увидим окно следующего содержания:

Окно настроек

Но оно пока еще совершенно не работает.

Теперь нам надо заставить расширение сохранять настройки. Для простоты воспользуемся JQuery. Скачаем его и скопируем в папку js. Так же создадим в папке js файл options.js:

Copy Source | Copy HTML
  1. $(function(){
  2.  
  3.     //функция установки значений полей согласно сохраненным опциям в localStorage
  4.     var restore_options = function(){
  5.         var name = $(this).attr('name');
  6.         if (localStorage[name] !== undefined)
  7.         {
  8.             $(this).val(localStorage[name]);
  9.         }
  10.         else
  11.         {
  12.             localStorage[name] = $(this).val()
  13.         }
  14.     };
  15.  
  16.     //устанавливаем значения полей (инпетов и селектов)
  17.     $("input[type!=submit]").each(restore_options);
  18.     $("select").each(restore_options);
  19.  
  20.  
  21.     //функция сохранения значений полей в localStorage
  22.     var save_options = function(){
  23.         var name = $(this).attr('name');
  24.         localStorage[name] = $(this).val();
  25.     };
  26.  
  27.     //по клику на сабмит сохраняем поля и выводим окно с сообщением OK
  28.     $("#save").click(function(){
  29.         $("input[type!=submit]").each(save_options);
  30.         $("select").each(save_options);
  31.         alert("ok");
  32.     });
  33.  
  34. });

Теперь мы должны подключить JQuery и options.js к нашей страничке настроек.

Добавим в секцию  файла optins.html следующие строки:

Copy Source | Copy HTML
  1. <script type="text/javascript" src="js/jquery.js">script>
  2. <script type="text/javascript" src="js/options.js">script>

Итак. Мы сделали свое собственное расширение для google chrome. Сделали для него красивую страницу настроек. Но пока что оно никакой полезной информации для нас не предоставляет. Нужно это исправить! Но это во второй части статьи.

Вернуться в блог

Комментарии

Олег
24-01-2011 12:25

> Добавим в секцию файла optins.html

> следующие строки:

Пропустили в коде </ в закрывающих тегах script

PS: спасибо за интересную статью.

Олег
24-01-2011 12:37

manifest.json

1. Думаю, необходимо отметить, что манифест должен быть в UTF-8 кодировке.

2. при клике на Copy Source исходного кода манифеста доступный для копирования код ошибочен, например, вот предпоследняя строка манифеста:

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

запятая здесь не нужна, и Chrom на нее ругается

Антон Еськин
24-01-2011 11:23

Да, Олег, в html есть съеденые теги. Извиняюсь за недоработку. Парсер их съел.

То, что файлы в UTF-8 кодировке - это априори.

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

Оставить комментарий

 

Warning: count(): Parameter must be an array or an object that implements Countable in /var/www/cramen.ru/library/Zend/Db/Table/Abstract.php on line 1259