Пишемо розширення для google chrome (частина 1)
Мені як частому відвідувачу сайту free-lance.ru було б зручно оперативно отримувати повідомлення про нові проекти. Оскільки я користуюся браузером google chrome, я шукав розширення на цю тему для нього. Було там одне розширення для free-lanfe.ru, але дуже сире і недороблене.
Якщо немає вже існуючого, вирішив написати доповнення сам і поділитися цим процесом з Вами. Писав доповнення вперше, тож критика вітається. Під час опрацювання користувався документацією звідси.
Відразу покажу структуру папок та файлів, яка в мене вийшла:
Це допоможе Вам краще орієнтуватися в проекті і моїх поясненнях.
Можете відразу створити таку ж файлову структуру з файлами - пустушками, які ми поступово будемо наповнювати.
Починаємо наш проект із файлуmanifest.json:
Покладіть в папку img іконку з ім'ям icon.png (або під іншим ім'ям та в іншу папку за умови внесення відповідних змін конфігурації у файліmanifest.json )
Тепер створимо сторінкуoptions.html :
Copy Source Copy HTML
- DOCTYPE html >
- html >
- head >
- link rel = "stylesheet" href = "img/options.css" />
- meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" />
- head >
- body >
- div id = "main">
- label > Логін label >
- input type="text" name="login">
- label > Пароль label >
- input type ="password" name ="passwd">
- label > Кількість проектів, що відображаються, label >
- input type = "text" name = "proj_count" value = "15">
- label > Час оновлення label >
- select name ="update_time">
- option value="15000"> 15 сек. option >
- option value ="30000"> 30 сек. option >
- option value ="60000"> 1 хв. option >
- option value ="300000"> 5 хв. option >
- option value ="600000"> 10 хв. option >
- option value ="1800000"> 30 хв. option >
- option value ="3600000"> 1 година option >
- select >
- input type ="submit" value ="Зберегти" id ="save">
- div >
- body >
- html >
Тепер треба трохи ушляхетнити зовнішній вигляд цієї сторінки. А ось тут ми не знаємо підключили до неї файл стилівimg/options.css.
Створюємо його та заповнюємо приблизно наступним вмістом:
Copy Source Copy HTML
- *
- margin: 0;
- padding: 0;
- font-size: 13px;
- >
- body
- background: #F3F3FF;
- >
- #main
- margin : 200px auto auto auto ;
- padding: 15px 7px;
- width: 300px;
- border: 2px solid #F3F3FF;
- border-radius: 20px;
- background : -webkit-gradient( linear, left top, left bottom, from(#D7DCEE ), to( #B3BBD5 ));
- -webkit-box-shadow: 0px 0px 9px #888F99;
- >
- input , select
- display: block;
- width: 240px;
- margin : 5px 0px 15px 40px ;
- padding: 2px 4px 2px 4px;
- background: #F3F3FF;
- background : -webkit-gradient( linear, left top, right bottom, from(#F3F3FF ), to( #E7F0F6 ));
- -webkit-box-shadow: 0px 0px 2px #FFF;
- border: 1px solid #A5B0C9;
- border-radius: 6px;
- color: #808090;
- outline: none;
- font-size: 14px;
- >
- input [type=submit]
- width: 120px;
- margin : 25px auto 0 40px ;
- cursor: pointer;
- >
- input:focus , select:focus
- border: 1px solid #808090;
- color: #506070;
- >
- input:hover , select:hover
- background: #FFF;
- >
- label
- font-size: 15px;
- font-weight: bold;
- color: #506070;
- margin : 0 0 0 10px ;
- >
Тепер ми готові своєрозширення завантажити уgoogle chrome !
Для цього відкриємо сторінку розширень (Головне меню -> Інструменти -> Розширення) і увійдемо в режим розробника:
Ми побачимо кілька нових кнопок. Тиснемо кнопкуЗавантажити розпаковане розширення і вибираємо папку з нашим розширенням.
Якщо все правильно зробили. розширення вдало завантажиться і ви побачите його іконку в панелі разом із рештою іконок розширень. Тепер ми зможемо потрапити на сторінку налаштування розширення, натиснувши на відповідне посилання. Ми побачимо вікно наступного змісту:
Але воно поки що зовсім не працює.
Тепер нам треба змусити розширення зберігати налаштування. Для простоти скористаємосяJQuery. Скачаємо його та скопіюємо в папку js. Також створимо в папціjs файлoptions.js :
Copy Source Copy HTML
- $( function( )
- //функція встановлення значень полів згідно з збереженими опціями в localStorage
- var restore_options = function()
- var name = $(this).attr('name');
- if ( localStorage[name] !== undefined )
- $( this ).val( localStorage[name] );
- >
- else
- localStorage[name] = $( this ).val()
- >
- >;
- //встановлюємо значення полів (інпетів та селектів)
- $( "input[type!=submit]" ).each( restore_options);
- $( "select" ).each( restore_options );
- //функція збереження значень полів у localStorage
- var save_options = function()
- var name = $(this).attr('name');
- localStorage[name] = $(this ).val();
- >;
- //на кліку на сабміт зберігаємо поля і виводимо вікно з повідомленням OK
- $( "#save" ).click( function( )
- $( "input[type!=submit]" ).each( save_options );
- $( "select" ).each( save_options );
- alert("ok");
- >);
- >);
Тепер ми повинні підключитиJQuery таoptions.js до нашої сторінки налаштувань.
Додамо до секції файлуoptins.html наступні рядки:
Copy Source Copy HTML
- script type="text/javascript" src="js/jquery.js" > script >
- script type="text/javascript" src="js/options.js" > script >
Отже. Ми зробили своє власне розширення для Google Chrome. Зробили для нього гарну сторінку налаштувань. Але поки що воно жодної корисної інформації нам не надає. Потрібно це виправити! Але це у другій частині статті.
Коментарі
> Додамо до секції файлу optins.html
Пропустили в коді "options_page": "options.html" // Сторінка налаштувань
кома тут не потрібна, і Chrom на неї лається
Так, Олеже, в html є з'їдені теги. Вибачаюсь за недоробку. Парсер їх з'їв.
Те, що файли в UTF-8 кодуванні - це апріорі.
Взагалі щодо недоробок коду, який представлений у тексті статті, сильно вибачаюсь. Якщо потрібно 100% робочий код, скачайте його наприкінці другої частини статті. Там все одним архівом і протестовано.