Писане на разширение за google chrome (част 1)
Като чест посетител на уебсайта free-lance.ru би било удобно за мен да получавам известия за нови проекти своевременно. Тъй като използвам браузъра google chrome, първото нещо, което направих, беше да потърся разширения по тази тема за него. Имаше едно разширение за free-lanfe.ru, но беше ужасно сурово и недовършено.
Тъй като няма такъв, реших сам да напиша добавка и да споделя този процес с вас. За първи път написах добавка, така че критиките са добре дошли. По време на разработката използвах документацията от тук.
Веднага ще покажа папката и файловата структура, която получих:
Това ще ви помогне да се ориентирате по-добре в проекта и моите обяснения.
Можете веднага да създадете същата файлова структура с празни файлове, които ние постепенно ще запълним.
Стартираме нашия проект с файлаmanifest.json:
Поставете икона с име icon.png в папката img (или под друго име и в друга папка, при условие че направите съответните промени в конфигурацията във файлаmanifest.json )
Сега нека създадем страницатаoptions.html :
Копиране на източника Копиране на HTML
- DOCTYPE html >
- html >
- глава >
- връзка rel="stylesheet" href="img/options.css" />
- мета http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- глава >
- тяло >
- div id ="основен">
- етикет > Етикет за вход >
- въвеждане тип="текст" име="вход">
- етикет > Етикет за парола >
- въвеждане тип="парола" име="парола">
- етикет > Брой показани проекти label >
- тип въвеждане ="текст" име ="proj_count" стойност ="15">
- етикет > Актуализиране на етикета за време >
- изберете име="време_за_актуализация">
- стойност на опцията="15000"> 15 сек. опция >
- option value="30000"> 30 сек. опция >
- option value="60000"> 1 минута. опция >
- option value="300000"> 5 минути. опция >
- option value="600000"> 10 мин. опция >
- option value="1800000"> 30 мин. опция >
- option value="3600000"> 1 час опция >
- изберете >
- входен тип ="изпращане" стойност ="Запазване" id ="запазване">
- div >
- тяло >
- html >
Сега трябва да подобрим малко външния вид на тази страница. И тук, без да знаем, свързахме стиловия файлimg/options.css към него.
Създайте го и го попълнете със следното съдържание:
Копиране на източника Копиране на HTML
- *
- марж: 0
- подложка: 0
- размер на шрифта: 13px;
- >
- тяло
- фон: #F3F3FF;
- >
- #основен
- margin: 200px auto auto auto;
- подложка: 15px 7px;
- ширина: 300px
- граница: 2px плътна #F3F3FF;
- граница -радиус: 20px;
- фон: -webkit-градиент(линеен, ляво горе, ляво долу, от(#D7DCEE), до(#B3BBD5));
- -webkit-box-shadow: 0px 0px 9px #888F99;
- >
- въвеждане, избор
- дисплей: блок;
- ширина: 240px
- поле : 5px 0px 15px 40px ;
- подложка: 2px 4px 2px 4px;
- фон: #F3F3FF;
- фон: -webkit-градиент(линеен, ляво горе, дясно долу, от(#F3F3FF), до(#E7F0F6));
- -webkit-box-shadow: 0px 0px 2px #FFF;
- граница: 1px плътен #A5B0C9;
- граница -радиус: 6px;
- цвят : #808090 ;
- контур: няма;
- размер на шрифта: 14px;
- >
- въвеждане [type=submit]
- ширина: 120px
- марж: 25px автоматично 0 40px;
- курсор: показалец;
- >
- вход:фокус, изберете:фокус
- рамка : 1px плътен #808090 ;
- цвят : #506070 ;
- >
- input:hover, изберете:hover
- фон: #FFF;
- >
- етикет
- размер на шрифта: 15px;
- тегло на шрифта: удебелен;
- цвят : #506070 ;
- марж: 0 0 0 10px;
- >
Вече сме готови да качим нашеторазширение вgoogle chrome !
За да направите това, отворете страницата с разширения (Главно меню -> Инструменти -> Разширения) и влезте в режима за програмисти:
Ще видим някои нови бутони. Щракнете върху бутонаЗареди разопаковано разширение и изберете папката с нашето разширение.
Ако всичко беше направено правилно. разширението ще се зареди успешно и ще видите неговата икона в панела заедно с всички други икони на разширение. Сега можем да стигнем до страницата с настройки на разширението, като щракнете върху съответната връзка. Ще видим прозорец със следното съдържание:
Но пак изобщо не става.
Сега трябва да принудим разширението да запази настройките. За простота ще използвамеJQuery. Изтеглете го и го копирайте в папката js. Нека също създадем файлoptions.js в папкатаjs :
Копиране на източника Копиране на HTML
- $(функция()
- // функция за задаване на стойности на полета според запазените опции в localStorage
- var restore_options = function()
- var name = $( this ).attr( 'name');
- if ( localStorage[име] !== недефинирано)
- $( това ).val( localStorage[име]);
- >
- друго
- localStorage[име] = $( това).val()
- >
- >;
- //задаване на стойности на полето (въвеждане и избиране)
- $( "input[type!=submit]" ).each( restore_options);
- $( "изберете" ).each(restore_options);
- // функция за съхраняване на стойности на полета в localStorage
- var save_options = function()
- var name = $( this ).attr( 'name');
- localStorage[име] = $( това).val();
- >;
- //като щракнете върху изпращането, запазваме полетата и показваме прозорец със съобщение OK
- $( "#запазване").click( функция()
- $( "input[type!=submit]" ).each( save_options);
- $( "изберете" ).each( save_options);
- предупреждение ("добре");
- >);
- >);
Сега трябва да включимJQuery иoptions.js в нашата страница с настройки.
Добавете следните редове към секциятаoptins.html на файла:
Копиране на източника Копиране на HTML
- script type="text/javascript" src="js/jquery.js" > скрипт >
- script type="text/javascript" src="js/options.js" > скрипт >
Така. Направихме собствено разширение за google chrome. Направете красива страница с настройки за него. Но засега не предоставя полезна информация за нас. Трябва да поправя това! Но това е във втората част на статията.
Коментари
> Добавяне към файловата секция optins.html
Пропуснато „options_page“ в кода: „options.html“, // Страница с настройки
тук не е необходима запетая и Chrom го ругае
Да, Олег, в html има изядени тагове. Извинявам се за пропуска. Парсерът ги изяде.
Фактът, че файловете са в UTF-8 кодировка е a priori.
Като цяло се извинявам за недостатъците в кода, който е представен в текста на статията. Ако имате нужда от 100% работещ код, изтеглете го в края на втората част на статията. Там всичко е един архив и тествано.