Овај водич ће бити подељен у 3 одељка: Први одељак у којем ћемо објаснити различите концепте у вези са проширењима у Цхроме -у, њихову структуру и основно креирање проширења. У другом одељку ћемо се фокусирати на стварање екстензија за овај сјајни прегледач, попут Гоогле Цхроме -а, радећи неколико практичних примера. На крају, у трећем одељку ћемо објаснити напредне опције при креирању проширења и како их објавити у веб продавници Гоогле Цхроме тако да буду доступне широј јавности.
Шта су проширења у Гоогле Цхроме -у?Проширења су мали програми који могу да измене и побољшају функционалност прегледача, у овом случају Цхроме. Они су развијени коришћењем веб технологија као што су ХТМЛ, Јавасцрипт и ЦСС.
Проширења имају мало или нимало корисничког интерфејса. На пример, доња слика приказује икону катанца који када се кликне на њу отвара мали интерфејс.
Ово посебно проширење се користи за шифровање и дешифровање ваших е -порука помоћу ПГП кључа. Проширења су датотеке које су упаковане у један, које корисник преузима и инсталира. Ово паковање, за разлику од уобичајених веб апликација, не мора зависити од веб садржаја.
Као што је горе речено, проширења вам омогућавају да додате функционалност Цхроме -у без зарањања дубоко у изворни код. Нова проширења се могу креирати помоћу основних технологија са којима ради већина програмера за веб развој: ХТМЛ, ЦСС и Јавасцрипт.
1. Како креирати и програмирати Цхроме проширење
За почетак ћемо направити једноставно проширење које преузима слику од Гоогле -а користећи УРЛ тренутне странице као појам за претрагу. То ћемо учинити применом елемента корисничког интерфејса који називамо цхроме.бровсерАцтион, што нам омогућава да поставимо икону поред Цхроме менија, на коју можете кликнути за брзи приступ. Кликом на ту икону отвориће се искачући прозор са сликом добијеном са тренутне странице, која ће изгледати овако:
За почетак наше праксе, креираћемо директоријум под називом Имаге_Виевер, у ово ћемо укључити све датотеке са којима ћемо радити. Као уређивач за развој можете користити онај који вам више одговара, у мом случају ја ћу користити Цхроме Дев Едитор, који можете преузети на следећој адреси:
Цхроме Дев Едитор
Прва ствар која ће нам требати је да направимо датотеку манифеста под називом манифест.јсон. Овај манифест није ништа друго до датотека метаподатака у ЈСОН формату која садржи својства као што су име, опис, број верзије његовог проширења итд. На напредном нивоу, ми ћемо га користити да изјавимо Цхроме -у шта ће екстензија радити и дозволе које су потребне да би се извршиле одређене ствари.
Формат датотеке манифеста је следећи:
{// Потребна "манифест_версион": 2, "наме": "Моје проширење", "версион": "версионСтринг", // Препоручено "дефаулт_лоцале": "ес", "десцриптион": "Опис обичног текста", " иконе ": {…}, // Изаберите једну (или ниједну)" бровсер_ацтион ": {…}," паге_ацтион ": {…}, // Опционално" аутхор ":…," аутоматион ":…," бацкгроунд ": {// Препоручено "персистент": фалсе}, "бацкгроунд_паге":…, "цхроме_сеттингс_оверридес": {…}, "цхроме_уи_оверридес": {"боокмаркс_уи": {"ремове_боокмарк_схортцут": труе, "ремове_буттон": труе}}, " цхроме_урл_оверридес ": {…}," цоммандс ": {…}," цонтент_цапабилитиес ":…," цонтент_сцриптс ": [{…}]," цонтент_сецурити_полици ":" полициСтринг "," цонверт_фром_усер_сцрипт ":…," цопресенце ":… , "цуррент_лоцале":…, "девтоолс_паге": "девтоолс.хтмл", "евент_рулес": [{…}], "ектернал_цоннецтабле": {"одговара": ["*: //*.екампле.цом/*" ]}, "филе_бровсер_хандлерс": […], "филе_систем_провидер_цапабилитиес": {"цонфигурабле": труе, "мултипле_моунтс": труе, "соурце": "нетворк"}, " хомепаге_урл ":" хттп: // патх / то / хомепаге "," импорт ": [{" ид ":" ааааааааааааааааааааааааааааааа "}]," инцогнито ":" обухвата или дели "," инпут_цомпонентс ":…," кеи " : "публицКеи", "минимум_цхроме_версион": "версионСтринг", "нацл_модулес": […], "оаутх2":…, "оффлине_енаблед": труе, "омнибок": {"кеиворд": "аСтринг"}, "оптионал_пермиссионс" : ["табс"], "оптионс_паге": "оптионс.хтмл", "оптионс_уи": {"цхроме_стиле": труе, "паге": "оптионс.хтмл"}, "пермиссионс": ["табс"], " платформе ":…," додаци ": […]," захтеви ": {…}," сандбок ": […]," схорт_наме ":" Кратко име "," потпис ":…," провера правописа ":…, "стораге": {"манагед_сцхема": "сцхема.јсон"}, "систем_индицатор":…, "ттс_енгине": {…}, "упдате_урл": "хттп: //патх/то/упдатеИнфо.кмл", "версион_наме ":" аСтринг "," веб_аццессибле_ресоурцес ": […]} Затим ћу описати функцију која испуњава најважније ознаке:
Обавезно:
- манифест_верзија: То је верзија манифеста, представљена је целим бројем који специфицира верзију формата датотеке. Почевши од Цхроме 18, програмери морају навести број 2.
- иам: То је име које ће имати ваше проширење. Ово се мора састојати од највише 45 знакова, име је главни елемент дефиниције проширења и обавезно је поље. Приказује се на следећим местима:
а) У кутији за инсталацију.
б) У корисничком интерфејсу где се управља екстензијом.
ц) У Цхроме виртуелној продавници.
- верзија: Мора се састојати од једног до четири цела броја одвојена тачкама које идентификују верзију проширења. Ево неколико примера важећих верзија:
„Верзија 1“
"Верзија": "1.0"
"Верзија": "2.10.2"
"Верзија": "3.1.2.4567"
Препоручено:
- дефаулт_лоцале: Наводи поддиректоријум _лоцалес (лангуагес) који садржи подразумеване низове за ово проширење. Морате ставити све стрингове видљиве кориснику у датотеку звану мессагес.јсон. Сваки пут када укључите нови језик, морате додати нову датотеку мессагес.јсон у директоријуму _лоцалес / лоцалецоде где је лоцалецоде код језика, баш као што је ен енглески и за шпански језик.
Пример интернационализованог проширења са подршком за енглески (ен), шпански (ес) и корејски (ко) био би следећи:
- Опис: Садржи низ у обичном тексту (без ХТМЛ -а или другог формата) са највише 132 знака који описује функционалност проширења.
- Иконе: Омогућава вам да додате једну или више икона које представљају проширење. Увек треба навести икону 128к128пк. Ово ће се користити током инсталације и у Цхроме веб продавници. Проширења такође морају да садрже икону 48к48, која се користи на страници за управљање Цхроме екстензијама (цхроме: // ектенсионс). Такође можете навести икону 16к16 која ће се користити као фавицон за странице проширења.
Иконе би генерално требале бити у ПНГ формату, јер има најбољу подршку за транспарентност. Међутим, они могу бити у било ком формату који подржава ВебКит, укључујући БМП, ГИФ, ИЦО и ЈПЕГ. Ево примера спецификације икона:
"ицонс": {"16": "ицон16.пнг", "48": "ицон48.пнг", "128": "ицон128.пнг"},Пример
Изаберите један (или ниједан):
- бровсер_ацтион: Помоћу бровсер_ацтион поставите иконе на главну траку са алаткама при врху прегледача Гоогле Цхроме, десно од траке за адресу. Осим тога, можете додати опис (плутајућа порука), значку (плутајући текст на икони) и искачући прозор (плутајући прозор).
Пример коришћења бровсер_ацтион:
{"наме": "Моје проширење",… "бровсер_ацтион": {"дефаулт_ицон": {// опционално "19": "имагес / ицон19.пнг", // опционално "38": "имагес / ицон38.пнг" // опционално}, "дефаулт_титле": "Гоогле пошта", // опционално; приказује опис „дефаулт_попуп“: „попуп.хтмл" // опционално}, …}
- паге_ацтион: Помоћу овог АПИ -ја поставите своју икону у траку за адресу.
Пример употребе:
{"наме": "Моје проширење",… "паге_ацтион": {"дефаулт_ицон": {// опционално "19": "имагес / ицон19.пнг", // опционално "38": "имагес / ицон38. пнг" // опционално}, "дефаулт_титле": "Гоогле пошта", // опционално; прикажи у опису "дефаулт_попуп": "попуп.хтмл" // опционално},…} Ек
Опционо:
- Позадина: Уобичајена потреба екстензија је да имају једну страницу за извођење дугих секвенци за управљање неким задатком или статусом. Ово је ХТМЛ страница која ради заједно са екстензијом. Покреће се када екстензија почне да ради и активира само једну њену инстанцу одједном. Уместо позадине, препоручује се употреба странице догађаја.
У типичном проширењу са страницом у позадини, кориснички интерфејс, на пример, бровсер_ацтион или паге_ацтион, и неке опције странице делују као приказ проширења. Када приказ треба да зна неко стање (затворио прозор, ажурирао страницу …), шаље захтев за стање на страницу која се налази као Позадина. Када страница у позадини обавести да је дошло до промене стања, обавештава приказ да се ажурира или предузме неку радњу.
Његов формат је следећи:
{"наме": "Моје проширење",… "бацкгроунд": {"скрипте": ["бацкгроунд.јс"]},…} Формат- Странице догађаја: Пре него што дефинишете следећи атрибут, потребно је објаснити о чему се ради на страницама догађаја. Уобичајена потреба за апликацијама и екстензијама је да имају једну, дуготрајну скрипту за руковање неким задатком или стањем. Ово је циљ страница са догађајима. Странице догађаја учитавају се само по потреби. Када нешто не ради активно, истовара се из кеша, ослобађајући меморију и друге системске ресурсе.
Предности перформанси су значајне, посебно на уређајима мале снаге. Због тога се препоручује коришћење више страница догађаја него Позадина.
Декларација странице догађаја у датотеци манифеста била би следећа:
{"наме": "Моје проширење", … "бацкгроунд": {"сцриптс": ["евентПаге.јс"], "персистент": фалсе}, …}Као што видите, разлика у односу на Бацкгроунд је упорни атрибут, који ће имати лажни статус.
- цхроме_сеттингс_ оверридес: Користи се за преписивање неке изабране конфигурације у Цхроме -у. Овај АПИ је доступан само за Виндовс.
Неке од ових конфигурација могу бити почетна страница (почетна страница прегледача, добављач претраге (провајдер претраге) итд.
Пример конфигурације:
{"наме": "Ми ектенсион",… "цхроме_сеттингс_оверридес": {"хомепаге": "хттп://ввв.хомепаге.цом", "сеарцх_провидер": {"наме": "наме .__ МСГ_урл_домаин__", "кеиворд ":" кеиворд .__ МСГ_урл_домаин__ "," сеарцх_урл ":" хттп: //ввв.фоо.__МСГ_урл_домаин__/с? к = {сеарцхТермс} "," фавицон_урл ":" хттп: //ввв.фоо.__МСГ_урл_домаин__/фавицон. ицо "," аццепт_урл ":" хттп: //ввв.фоо.__МСГ_урл_домаин__/суггест? к = {сеарцхТермс} "," инстант_урл ":" хттп: //ввв.фоо.__МСГ_урл_домаин__/инстант? к = {сеарцхТермс} " , "имаге_урл": "хттп: //ввв.фоо.__МСГ_урл_домаин__/имаге? к = {сеарцхТермс}", "сеарцх_урл_пост_парамс": "сеарцх_ланг = __ МСГ_урл_домаин__", "предлагај_урл_пост_парамс": "предложи_ланг = __ МСГ_ур_ МСГ_урл_домаин = "инстант_урл_парамс_урл_домаин" __МСГ_урл_домаин__ "," имаге_урл_пост_парамс ":" имаге_ланг = __ МСГ_урл_домаин__ "," алтернате_урлс ": [" хттп: //ввв.моо.__МСГ_урл_домен? // " .ноо .__ МСГ_урл_урл_? к = {сеарцхТермс} "]," енцодинг ":" УТФ-8 "," ис_дефаулт ": труе}," стартуп_пагес ": [" хттп://ввв.ст артуп.цом "]}," дефаулт_лоцале ":" де ", …}
- цхроме_уи_ оверридес: Ово својство проширења се користи за преписивање неких поставки у Цхроме корисничком интерфејсу. Као на пример маркери. Његова конфигурација је следећа:
{"наме": "Ми ектенсион",… "цхроме_уи_оверридес": {"боокмаркс_уи": {"ремове_буттон": "труе", "ремове_боокмарк_схортцут": "труе"}},…} У овом случају, звезда коју прегледач има за фаворите се уклања.
- цхроме_урл_ оверридес: Ово је начин да замените ХТМЛ датотеку из наставка за страницу коју прегледач Гоогле Цхроме обично пружа. Осим тога, можете преписати и његов ЦСС и ЈаваСцрипт код.
Проширење са овом конфигурацијом може заменити једну од следећих Цхроме страница:
- Менаџер обележивача: То је страница која се појављује када корисник изабере опцију у менију Менаџер обележивача у Цхроме менију или за Мац, ставку Менаџер обележивача у менију Обележивачи.
ЕНЛАРГЕ
- Историја (историја): То је страница која се појављује када корисник изабере историју из Цхроме менија или, на Мац -у, ставка приказује целу историју из менија који се налази у опцији историја.
ЕНЛАРГЕ
- Нова картица (нова картица): То је страница која се појављује када корисник креира нову картицу или прозор из прегледача. Овој страници можете приступити и постављањем следеће адресе у адресну траку: цхроме: // невтаб
ЕНЛАРГЕ
БелешкаЈедно проширење може преписати само једну страницу. На пример, проширење не може да замени обележиваче и заузврат страницу историје.
{"наме": "Ми ектенсион",… "цхроме_урл_оверридес": {"невтаб": "мипаге.хтмл" // опције су невтаб, хистори, боокмаркс},…}
- команде: Овај командни АПИ се користи за додавање пречица на тастатури које покрећу радњу у вашем проширењу. На пример, радња за отварање радње прегледача или слање команде екстензији.
{"наме": "Моје проширење",… "команде": {"тоггле-феатуре-фоо": {"предложени_кључ": {"подразумевано": "Цтрл + Схифт + И", "мац": "Цомманд + Схифт + И "}," десцриптион ":" Укључи / искључи функцију фоо "}," _екецуте_бровсер_ацтион ": {" предложени_кључ ": {" виндовс ":" Цтрл + Схифт + И "," мац ":" Цомманд + Схифт + И ", "цхромеос": "Цтрл + Схифт + У", "линук": "Цтрл + Схифт + Ј"}}, "_екецуте_паге_ацтион": {"предложени_кључ": {"подразумевано": "Цтрл + Схифт + Е", "прозори ":" Алт + Схифт + П "," мац ":" Алт + Схифт + П "}},…} На својој страници Позадина можете да повежете контролер за сваку од команди дефинисаних у манифест.јс (осим за '_екецуте_бровсер_ацтион'И'_екецуте_паге_ацтион') путем онЦомманд.аддЛистенер.
На пример:
цхроме.цоммандс.онЦомманд.аддЛистенер (функција (команда) {цонсоле.лог ('Команда притиснута:', команда);});
- цонтент_сцриптс: То су јавасцрипт датотеке које се извршавају у контексту веб страница. Користећи стандардни објектни модел документа (ДОМ), они могу читати детаље веб страница које посећују прегледачи или их мењати.
{"наме": "Моје проширење",… "цонтент_сцриптс": [{"подудара се": ["хттп://ввв.гоогле.цом/*"], "цсс": ["мистилес.цсс"], " јс ": [" јкуери.јс "," мисцрипт.јс "]}],…}
- цонтент_сцриптс: Да би наша проширења била сигурнија и избегли потенцијалне проблеме са скриптовањем на различитим веб локацијама, Цхроме систем проширења је укључио општи концепт Политика безбедности садржаја (ЦСП). Ово уводи врло строге смернице које ће проширења учинити подразумевано сигурнијим. Генерално, ЦСП функционише као механизам црне и беле листе за ресурсе учитане или покренуте његовим екстензијама.
{…, "Цонтент_сецурити_полици": "сцрипт-срц 'селф' хттпс://екампле.цом; објецт-срц 'селф" "…}То су били неки од најважнијих атрибута. За нашу почетну праксу дефинисаћемо датотеку манифест.јсон на следећи начин:
{"манифест_версион": 2, "наме": "Пример покретања", "десцриптион": "Ово проширење приказује слику са гоогле слика тренутне странице", "версион": "1.0", "бровсер_ацтион": {"дефаулт_ицон ":" ицон.пнг "," дефаулт_попуп ":" попуп.хтмл "}," пермиссионс ": [" ацтивеТаб "," хттпс://ввв.гооглеапис.цом/ "]}Као што видите у нашем примеру манифеста, прогласили смо бровсер_ацтион, ацтивеТаб дозволу да види УРЛ тренутне картице, а хосту је дата дозвола, на овај начин се може приступити Гоогле АПИ -ју за обављање претраге спољних слика.
Заузврат, 2 датотеке ресурса се налазе при дефинисању бровсер_ацтион: ицон.пнг и попуп.хтмл. Оба извора морају постојати унутар пакета проширења, па их сада креирајмо:
- ицон.пнг Приказаће се поред мултифункционалног оквира, чекајући интеракцију корисника. То је само ПНГ датотека величине 19 к 19 пиксела.
- попуп.хтмл ће се приказати у искачућем прозору који је креиран као одговор на корисников клик на икону. То је стандардна ХТМЛ датотека и њен садржај је следећи:
Први кораци Скочни прозор проширењаЕНЛАРГЕ
2. Уверите се да је потврђен избор у режиму за програмере у горњем десном углу.
3. Притисните Уплоад Унзиппед (Унпацкед) Ектенсион да бисте отворили дијалог за избор датотеке.
ЕНЛАРГЕ
4. Идите до директоријума у којем се налазе датотеке са проширењима и изаберите га.
Алтернативно, можете превући директоријум који садржи ваш пројекат и испустити га у прозор Цхромеових проширења. Ово ће учитати проширење у ваш прегледач.
На овај начин ћемо направити једноставно проширење за Гоогле Цхроме. У следећем наставку ћемо се позабавити изградњом проширења заједно са развојним оквирима као што су јкуери и Боотстрап, што ће нам омогућити да поједноставимо наш развој.
2. Пример додатака за Цхроме
У овом одељку ћемо извести неколико примера који ће нам омогућити да у потпуности разумемо многе функционалности које постоје при изградњи проширења за Гоогле Цхроме.Вежба 1 - Плава позадина
У овом примеру ћемо направити једноставно проширење у којем ћемо научити како можемо изменити садржај страница које учитавамо у наш прегледач. У овом случају ћемо променити боју позадине учитане странице и променити је у плаву.Као што сам објаснио у првом делу овог водича, можете користити било који развојни ИДЕ, у мом случају ја ћу користити Цхроме Дев Едитор.
ЕНЛАРГЕ
За почетак ћемо креирати нови директоријум са именом Плава позадина и направићемо пројекат са истим именом.
ЕНЛАРГЕ
ЕНЛАРГЕ
Унутра ћемо креирати нашу прву датотеку манифест.јсон који ће садржати дефиниције нашег проширења.
ЕНЛАРГЕ
Наша архива манифест.јсон мора да садржи следећи код:
{"манифест_версион": 2, "наме": "Блуе Бацкгроунд", "десцриптион": "Ово проширење је променило боју позадине тренутне странице", "версион": "1.0", "бровсер_ацтион": {"дефаулт_ицон": "ицон.пнг", "дефаулт_титле": "Нека страница буде плава"}, "пермиссионс": ["ацтивеТаб"], "бацкгроунд": {"сцриптс": ["бацкгроунд.јс"], "персистент": фалсе }}Пошто је наше проширење једноставно, садржаће само икону која ће, када се притисне, извршити радњу. Као што можете видети у датотеци манифест.јсон дефинишемо име и његов опис у бровсер_ацтион Дефинишемо икону која ће бити приказана на траци нашег прегледача Гоогле Цхроме и наслов који ће бити приказан када се показивач миша постави изнад наведене иконе. Што се тиче дозвола, дефинисаћемо да ће то бити учињено само на активној картици. Датотека која ће се изводити у позадини биће наша датотека бацкгроунд.јс који неће бити постојан, будући да ће се извршити само када кликнемо на проширење.Креирамо нашу икону и чувамо је у директоријуму пројекта како је дефинисано у манифест.јсон. У овом случају у корену пројекта.
Затим креирамо ЈаваСцрипт датотеку под називом бацкгроунд.јс у истом директоријуму са следећим кодом:
// позива се када корисник кликне на проширење цхроме.бровсерАцтион.онЦлицкед.аддЛистенер (функција (картица) {цонсоле.лог ('Промена' + таб.урл + 'у плаво!'); цхроме.табс.екецутеСцрипт ({код: ' доцумент.боди.стиле.бацкгроундЦолор = "плава" '});});Остављајући цео пројекат на следећи начин:
ЕНЛАРГЕ
Да бисте покренули наше проширење, све што морате да урадите је да притиснете дугме за репродукцију које се налази на горњој траци уређивача Цхроме Дев.
ЕНЛАРГЕ
Притиском на њега, проширење ће се аутоматски учитати у прегледач Гоогле Цхроме.
Погледајмо наше проширење у акцији, кликом на икону коју сам направио (плава позадина са словом А у белој боји), страницу коју сам учитао на тренутну картицу, у мом случају мој кориснички налог у Солветићу (хттп: // ввв .солветиц… .бертх-рамнцгев /) ће променити позадину у плаву. Треба напоменути да ће се променити само боја елемента БОДИ, а не и ДИВ -ови које он садржи, јер сам га тако дефинисао у свом бацкгроунд.јс.
ЕНЛАРГЕ
Вежба 2 - Вишебојна
У овом примеру ћу показати како поједноставити наш рад из развојне ИДЕ и кода. У Цхроме Дев Едитор, кликнемо на дугме +, за креирање новог пројекта, овај пут ћемо променити врсту пројекта, одабиром опције ЈаваСцрипт Цхроме апликација.
ЕНЛАРГЕ
Као што видите, аутоматски генерише целокупну структуру нашег пројекта. Са нашим досијеом манифест.јсон са најчешћим дефиницијама.
ЕНЛАРГЕ
Овој датотеци додаћемо кратак опис на етикети Опис постављање текста који желите, у мом случају „Додатак који омогућава промену боје позадине“. За овај пројекат креираћемо 2 иконе, једну од 16к16 пиксела, а другу од 128к128 пиксела, као што можете видети у структури, оне ће бити сачуване у директоријуму средства.
Испод ознаке додаћемо следећи код минимална_хром_верзија:
"пермиссионс": ["табс", "хттп: // * / *", "хттпс: // * / *"], "бровсер_ацтион": {"дефаулт_титле": "Промените страницу у више боја.", " дефаулт_попуп ":" попуп.хтмл "},Као што видите, дефинишемо скочни прозор или приказ који ће садржати сав хтмл који ће корисник видети када кликне на наше проширење. Затим ћемо додати следећи код:"цонтент_сцриптс": [{"матцх": [""], "цсс": ["ассетс / боотстрап / цсс / боотстрап.мин.цсс"], "јс": ["ассетс / јкуери.мин.јс", "маин.јс"], "рун_ат": "доцумент_старт"}]цонтент_сцриптс- Садржи датотеке ЈаваСцрипт (јс) и таблице стилова (цсс) које ће се извршавати у контексту веб странице. Може садржати следећа својства:
- шибице: Обавезно. Одређено на коју страницу ће се убацити скрипта.
- екцлуде_матцхес: Опционо. Странице које ће бити искључене како се скрипта не би убацила.
- матцх_абоут_бланк: Опционо. Ова вредност је логичка и означава да ли ће скрипта бити уметнута у празну страницу (абоут: бланк и абоут: срцдоц).
- цсс: Опционо. То је аранжман који означава листу цсс датотека које ће бити уметнуте на страницу која се тражи у прегледачу.
- јс: Опционо. То је аранжман са листом ЈаваСцрипт датотека које ће бити уметнуте на страницу која се тражи у прегледачу.
- рун_ат: Опционо. То је текстуални низ који контролише када ће се јс датотеке учитати. Његова вредност може бити:
- доцумент_старт: Датотеке се убацују након било које цсс датотеке, али прије него што се изгради било који ДОМ или изврши било која друга скрипта.
- документ_крај: Датотеке се убацују одмах по завршетку ДОМ -а, али пре него што се учитају ресурси попут слика и оквира.
- доцумент_идле: Претраживач бира време за убацивање скрипти између доцумент_енд и одмах након што виндов.онлоад покрене догађај. Ова опција је она која је подразумевано конфигурисана.
На крају нашег досијеа манифест.јсон Требало би да буде следеће:
ЕНЛАРГЕ
Као што видите, додали смо неколико нових ствари у имање цсс Дефинисали смо Боотстрап оквир који неће олакшати развој на нивоу стила. Праћено на имању јс Дефинишемо ЈКУЕРИ ЈаваСцрипт библиотеку, која нам неће дозволити да на бржи и лакши начин радимо све што има везе са ЈаваСцрипт -ом. Наша датотека индек.хтмл би требала изгледати овако:
Попуп МултиплеЦолорРедПлавиЗеленИелловУ датотеци индек.хтмл једноставно упућујемо на наше датотеке Боотстрап, Јкуери и маин.јс. У телу дефинишемо боотстрап контејнер са његовим див -овима који ће служити као дугмад за различите опције боја.
За датотеку маин.јс користићемо догађај клика који ће се извршити притиском на тастер миша на свакој класи "цол-мд-12", узимајући боју позадине изабраног елемента и додељујући га телу страница. је отворена. Тада ће се извршити догађај виндов.цлосе (); који затварају прозор нашег проширења. Код дефинисан за маин.јс је следећи:
$ (доцумент) .реади (фунцтион () {$ (". цол-мд-12"). цлицк (фунцтион () {вар цолор = $ (тхис) .цсс ("бацкгроунд-цолор"); цхроме.табс. екецутеСцрипт (нулл, {цоде: "$ ('боди'). цсс ('бацкгроунд-цолор', '" + цолор + "')"}); виндов.цлосе ();});}); Резултат при извршавању нашег проширења моћи ћемо визуализирати икону коју смо за њега створили у горњој траци.
Кликом на наше проширење приказаће се следећи скочни прозор:
А при избору једне од опција резултат ће бити следећи:
ЕНЛАРГЕ
Вежба 3 - Врхунска историја
У овом примеру ћемо применити све горе наведено, креираћемо проширење које ће нам, када кликнемо на њега, приказати скочни прозор са листом најпосећенијих страница из нашег прегледача, дајући директан приступ тим страницама. Једина другачија ствар у овом примеру је то што ћемо затражити дозволу од једног од Цхроме АПИ -ја за приступ најгледанијим страницама из Цхроме -а. Име овог апи -а је цхроме.топСитес.
За почетак идемо на Цхроме Дев Едитор и створили смо наш пројекат са именом ТопХисториал а у типу пројекта изаберемо опцију ЈаваСцрипт Цхроме Апп.
Затим наш досије манифест.јсон Требало би да буде следеће:
{"манифест_версион": 2, "наме": "ТопХисториал", "схорт_наме": "ТопХисториал", "десцриптион": "Прикажи листу најгледанијих страница у нашем прегледачу", "версион": "0.0.1", " минимум_цхроме_версион ":" 38 "," пермиссионс ": [" топСитес "]," бровсер_ацтион ": {" дефаулт_ицон ":" ицон.пнг "," дефаулт_попуп ":" попуп.хтмл "}," цонтент_сцриптс ": [{" подудара се са ": [" "]," цсс ": [" ассетс / боотстрап / цсс / боотстрап.мин.цсс "]," јс ": [" ассетс / јкуери.мин.јс "," маин.јс "], "рун_ат": "доцумент_старт"}]}} Као што видите, у манифест додајемо нови атрибут да бисмо могли да добијемо дозволу за Цхроме апи: Прогласите дозволе, се користи у већини Цхроме АПИ -ја у вашем проширењу, морате га прво пријавити постављањем поља дозволе у вашем манифесту. Свака дозвола може бити текстуални низ који припада следећој листи (подељено на 3 слике):
Што се тиче нашег досијеа попуп.хтмл Требало би да буде следеће:
Попуп МултиплеЦолорНаша архива маин.јс који ће садржати апи упит и руковање догађајем клика, биће представљен на следећи начин:
$ (доцумент) .реади (фунцтион () {фунцтион опенпаге () {цхроме.табс.цреате ({урл: $ (тхис) .аттр ("хреф")});} фунцтион буилдПопупДом (мостВиситедУРЛс) {фор (вар и = 0; и <мостВиситедУРЛс.ленгтх; и ++) {$ ("# топ_лист"). Додати ('
Приликом извршавања нашег проширења моћи ћемо да видимо икону на врху прегледача, која је у мом случају дизајнирана плавом бојом, а када кликнете на њу, отвара се скочни прозор са листом страница којима сам највише приступио са странице прегледач поређен према броју посета које сам обавио.
ЕНЛАРГЕ
