Како направити Цхроме проширења од почетка

Ако желите додајте или измените неке функције у Гоогле Цхроме-у морате користити проширење. Иако можете да преузмете проширење из Цхроме веб-продавнице, понекад вам је потребна одређена функционалност коју не можете да пронађете у постојећим екстензијама.

Па, добра вест је да можете да направите сопствено проширење да бисте додали или изменили потребну функционалност или направили нови додатак или апликацију за Гоогле Цхроме, који можете касније дистрибуирати другим корисницима помоћу Цхроме веб продавнице.

У наставку ћу вам показати најлакши начин да направите проширење. Ако имате неко знање веб развоја (ХТМЛ, ЦСС, и ЈС), осећаћете се као код куће. Ако не, прво их гледајте научите основе веб развоја, затим наставите испод.

Предувјети

Потребно је да попуните следеће захтеве пре почетка овог упутства.

Мораш бити упознат ХТМЛ, ЦСС и ЈаваСцрипт. [Проверите ресурсе]
Морате имати едитор кода да бисте написали наставак. [Упореди уреднике]
(Опционално) Ако желите да дистрибуирате проширење другим корисницима, морате имати девелопер налог у Цхроме веб-продавници. [Направи налог]

Белешка: Гоогле тражи од вас да платите малу накнаду за креирање налога развојног програмера у Цхроме веб-продавници.

Направите проширење

У овом водичу ћу поделити процес креирања а проширење задатака за Гоогле Цхроме. То ће бити корисност (као што је приказано у наставку) да покаже битне компоненте и способности које се пружају проширењима.

1. Набавите предложак

Гоогле Цхроме, као и свака друга платформа, захтева своје екстензије имају постављену структуру, што може изгледати сложено за почетнике. Зато је добро добити предложак за продужетак који ће пружити све неопходне ствари.

Ектенсионизр је најбољи генератор за кромиране екстензије. Омогућава вам да изаберете једну од наведених врста екстензија - радње прегледача (радња за све странице или прегледач), паге ацтион (радња за тренутну страницу) или хидден ектенсион (позадинска радња која је обично скривена у предњем интерфејсу).

Штавише, нуди разне опције финог подешавања укључи / искључи неопходне додатке, дозволе, итд. Морате одабрати “Акција прегледача” као тип проширења и “Нема позадине” као позадинску страницу за овај водич.

Када завршите са избором опција за креирање узорка проширења, притисните “Довнлоад ит!” у Ектенсионизр. Коначно, издвојите архиву (.зип) у директоријум и отворите уређивач кода да бисте започели писање екстензије.

2. Кодирајте наставак

Када преузмете и екстрахујете предложак, видећете структуру директоријума као што је приказано на слици испод. Шаблон је уредно организован и морате знати да је најважнији фајл “манифест.јсон“.

Упознаћемо и друге датотеке и фасцикле у овом директоријуму:

_лоцалес: То је навикло чувајте информације о језику за вишејезичну апликацију.
цсс: Функционише за чување фронт-енд библиотека трећих страна као што је Боотстрап 4.
иконе: Дизајниран је тако да има иконе за ваше проширење у различитим величинама.
јс: То је згодно за спасавање библиотеке других произвођача лике јКуери 3.
срц: Она чува стварни код који ћете написати за ваше проширење.

манифест.јсон

Она садржи основне метаподатке о вашој апликацији, која дефинише детаље апликације за прегледач. Можете га уредити да бисте подесили име, опис, веб локацију, икону, итд радње и дозволе прегледача.

На пример, у доле наведеном коду приметићете да сам променио име, опис и хомепаге_урл заједно са дефаулт_титле у бровсер_ацтион. Штавише, ја аддед “складиште” под дозволама као што треба да чувамо податке у нашем проширењу.

 "наме": "Тодоизр - То-до Симплифиед", "версион": "0.0.1", "манифест_версион": 2, "опис": "Једноставна апликација за све.", "хомепаге_урл": " хттпс://го.аксингх.нет/тодоизр "," ицонс ": " 16 ":" ицонс / ицон16.пнг "," 48 ":" ицонс / ицон48.пнг "," 128 ":" ицонс / ицон128 .пнг "," дефаулт_лоцале ":" ен "," бровсер_ацтион ": " дефаулт_ицон ":" ицонс / ицон19.пнг "," дефаулт_титле ":" Тодоизр - То-до Симплифиед "," дефаулт_попуп ":" срц / бровсер_ацтион / бровсер_ацтион.хтмл "," пермиссионс ": [" стораге "]

срц \ т

Овај директоријум ће садржати код за акцију претраживача. У нашем случају, хоћемо кодирајте искачући прозор приказан на клику иконе проширења у прегледачу. Наше проширење ће омогућити корисницима да додају и прегледавају ставке које се обаве.

Белешка: Увек можете покренути код клонирањем тог спремишта.

Иницијални код из предлошка

Иако је овај директориј имао само ХТМЛ датотеку која има сав код, одлучио сам да је поделим у три одвојене датотеке ради боље јасноће. На тај начин, ХТМЛ фајл је именован “бровсер_ацтион.хтмл” сада има следећи код:

Штавише, име датотеке стила “бровсер_ацтион.цсс” има ниже наведени садржај док је ЈаваСцрипт датотека именована “бровсер_ацтион.јс” за сада је празно.

 #маинПопуп паддинг: 10пк; хеигхт: 200пк; видтх: 400пк; фамилија фонтова: Хелветица, Убунту, Ариал, санс-сериф;  х1 фонт-сизе: 2ем;

Дизајнирајте интерфејс попуп-а

После постављања почетног пројекта, прво креирамо интерфејс попуп-а. ја имам поставити интерфејс са минималистичким приступом, приказује име на врху, а затим образац за додавање ставки задатака и област испод за преглед доданих ставки. Инспирисан је једноставним дизајном “Форм Форм 5“.

У коду испод, додао сам два див-а - један за приказивање обрасца за додавање ставке задатака, а други за приказ листе већ доданих ставки задатака. То је рекао, нови код за “бровсер_ацтион.хтмл” је као што следи:

          Тодоизр

И фајл са стилом “бровсер_ацтион.цсс” сада има следећи код:

 урл @импорт ("./ форм_стиле_5.цсс"); #маинПопуп хеигхт: 200пк; видтх: 300пк; фамилија фонтова: Хелветица, Убунту, Ариал, санс-сериф;  / * Образац за задатке * / .форм-стиле-5 маргин: ауто; паддинг: 0пк 20пк;  .форм-стиле-5: прво-дете позадина: нема;  .форм-стиле-5 х1 боја: # 308це3; фонт-сизе: 20пк; тект-алигн: центар;  .форм-стиле-5 инпут [типе = "тект"] видтх: ауто; флоат: лефт; маргин-боттом: унсет;  .форм-стиле-5 инпут [типе = "буттон"] бацкгроунд: # 308це3; видтх: ауто; флоат: ригхт; паддинг: 7пк; граница: ниједна; бордер-радиус: 4пк; фонт-сизе: 14пк;  .форм-стиле-5 инпут [типе = "буттон"]: ховер бацкгроунд: # 3868д5;  / * Листа задатака * / .форм-стиле-5: последње дете хеигхт: инхерит; маргин-боттом: 5пк;  .форм-стиле-5 ул паддинг: 20пк;  .форм-стиле-5 ул ли фонт-сизе: 14пк;

На крају, фајл стила треће стране “форм_стиле_5.цсс” има ниже наведени садржај. Једноставно је преузет са свог сајта да би инспирисао дизајн нашег проширења.

 / * Форм Стиле 5 би Санвебе.цом * / / * хттпс://ввв.санвебе.цом/2014/08/цсс-хтмл-формс-десигнс * / .форм-стиле-5 мак-видтх: 500пк; паддинг: 10пк 20пк; бацкгроунд: # ф4ф7ф8; маргин: 10пк ауто; паддинг: 20пк; бацкгроунд: # ф4ф7ф8; гранични радијус: 8пк; фамили-фонт: Георгиа, "Тимес Нев Роман", Тимес, сериф;  .форм-стиле-5 фиелдсет бордер: ноне;  .форм-стиле-5 легенд фонт-сизе: 1.4ем; маргин-боттом: 10пк;  .форм-стиле-5 лабел дисплаи: блоцк; маргин-боттом: 8пк;  .форм-стиле-5 инпут [типе = "тект"], .форм-стиле-5 инпут [типе = "дате"], .форм-стиле-5 инпут [типе = "датетиме"], .форм-стиле -5 инпут [типе = "емаил"], .форм-стиле-5 инпут [типе = "нумбер"], .форм-стиле-5 инпут [типе = "сеарцх"], .форм-стиле-5 инпут [типе] = "тиме"], .форм-стиле-5 инпут [типе = "урл"], .форм-стиле-5 тектареа, .форм-стиле-5 селецт фонт-фамили: Георгиа, "Тимес Нев Роман", Тимес , сериф; бацкгроунд: ргба (255,255,255, .1); граница: ниједна; бордер-радиус: 4пк; фонт-сизе: 16пк; маргин: 0; оутлине: 0; паддинг: 7пк; ширина: 100%; бок-сизинг: гранични-бок; -вебкит-бок-сизинг: бордер-бок; -моз-бок-сизинг: бордер-бок; бацкгроунд-цолор: # е8еееф; цолор: # 8а97а0; -вебкит-бок-схадов: 0 1пк 0 ргба (0,0,0,0,03) инсет; бок-схадов: 0 1пк 0 ргба (0,0,0,0,03) инсет; маргин-боттом: 30пк;  .форм-стиле-5 инпут [типе = "тект"]: фокус, .форм-стиле-5 инпут [типе = "дате"]: фокус, .форм-стиле-5 инпут [типе = "датетиме"]: фокус, .форм-стиле-5 инпут [типе = "емаил"]: фокус, .форм-стиле-5 инпут [типе = "нумбер"]: фокус, .форм-стиле-5 инпут [типе = "сеарцх"] : фоцус, .форм-стиле-5 инпут [типе = "тиме"]: фокус, .форм-стиле-5 инпут [типе = "урл"]: фокус, .форм-стиле-5 тектареа: фокус, .форм- стиле-5 селецт: фоцус позадина: # д2д9дд;  .форм-стиле-5 селецт -вебкит-изглед: менулист-буттон; хеигхт: 35пк;  .форм-стиле-5 .нумбер бацкгроунд: # 1абц9ц; цолор: #ффф; хеигхт: 30пк; видтх: 30пк; дисплеј: инлине-блоцк; фонт-сизе: 0.8ем; маргин-ригхт: 4пк; висина линије: 30пк; тект-алигн: центар; текст-сенка: 0 1пк 0 ргба (255,255,255,0.2); гранични радијус: 15пк 15пк 15пк 0пк;  .форм-стиле-5 инпут [типе = "субмит"], .форм-стиле-5 инпут [типе = "буттон"] поситион: релативе; дисплеј блок; паддинг: 19пк 39пк 18пк 39пк; цолор: #ФФФ; маргин: 0 ауто; бацкгроунд: # 1абц9ц; фонт-сизе: 18пк; тект-алигн: центар; фонт-стиле: нормал; ширина: 100%; бордер: 1пк солид # 16а085; бордер-видтх: 1пк 1пк 3пк; маргин-боттом: 10пк;  .форм-стиле-5 инпут [типе = "субмит"]: ховер, .форм-стиле-5 инпут [типе = "буттон"]: ховер бацкгроунд: # 109177;

Напишите логику попуп-а

Када завршимо са фронт-енд екстензијом, сада ћемо написати логику за њен рад. Потребно нам је проширење да бисмо могли додајте ставке задатака и прикажите их у искачућем прозору. Тако ћемо додати слушалицу кликом на дугме да бисмо додали улазни текст као ставку задатака и слушалицу учитавања страница да би се приказале те ставке.

У доњем коду ћемо користити две функције - синц.гет () и синц.сет (), који су део “цхроме.стораге“. Други нам је потребан да сачувамо ставке задатака у складишту и прво их преузмемо и покажемо.

С тим у вези, доле је конацни код “бровсер_ацтион.јс” филе. Као што можете видјети у наставку, код је високо коментиран како би вам помогао да схватите његову сврху.

 фунцтион лоадИтемс () / * Прво гет () податке из складишта * / цхроме.стораге.синц.гет (['тодо'], функција (резултат) вар тодо = [] иф (ресулт && ресулт.тодо && ресулт.тодо.трим ()! == ") / * Анализирајте и преузмите низ како је сачуван као стринг * / тодо = ЈСОН.парсе (ресулт.тодо) цонсоле.лог ('тодо.ленгтх =' + тодо.ленгтх) за (вар и = 0; и < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  )

3. Поставите екстензију

Након што завршите са писањем проширења, време је да га тестирате помоћу Гоогле Цхроме-ове функције која нуди учитавање екстензија које нису распакиране. Али прво, морате омогућите режим програмера у прегледачу: кликните на Опције дугме > изабери “Још алата” > Ектенсионс, а затим укључите “Девелопер моде“.

Сада ћете видети више дугмади испод траке за претрагу. Кликните овде “Лоад унпацкед” дугме. Тражит ће директориј - прегледати и одабрати директориј вашег проширења, и учитат ће екстензију. Ако уредите или ажурирате код вашег проширења, можете кликнути на дугме релоад за учитавање последњих промена.

У нашем примеру, видећете икону проширења поред иконе профила зато што смо додали радњу прегледача у проширењу узорка. Можете да кликнете на ту икону додајте и прегледајте ставке обавеза у нашем проширењу као што је то одређена акција.

Дистрибуирајте наставак

Иако јесте Једноставно је пренијети проширење у Цхроме веб-продавници, процес је предуг да би покрио све детаље. Укратко, креирате налог развојног програмера, пакујете проширење, а затим га пошаљете заједно са детаљима о садржају (као што су име, икона, снимци екрана итд.); као што је наведено у водичу корак по корак.

Шта даље? Читање и кодирање

Као што сте очекивали, сврха овог водича је да започнете развој проширења за Гоогле Цхроме. Покушао сам да покријем основне концепте; Међутим, морате знати много више за озбиљно проширење.

С тим у вези, доле су неке од мојих омиљени ресурси за учење како развити проширења за Гоогле Цхроме и друге прегледнике засноване на Цхромиум-у:

Све способности, компоненте и особине проширења.
Примјер проширења од стране тима који стоји иза Гоогле Цхроме-а.

Ако сте прошли кроз ове ресурсе и спремни сте за неки изазов, покушајте да додате испод функције у проширењу које сте управо завршили у развоју:

Опција за брисање сачуваних ставки задатака.
Функција за приказивање обавештења када се заврши додавање ставке.

То је све о развоју вашег првог проширења за најпопуларнији претраживач. Које проширење сте направили? Јеси ли упао у проблем? Молим вас да ми јавите своју причу тако што ћете написати коментар испод или ми послати поруку на @аксингхнет.

На крају, али не и најмање важно, имајте на уму да можете испробати Тодоизр (проширење које смо направили) у Цхроме веб-продавници и проверити његов комплетан код у овом спремишту.