Ако сте Цхроме корисник, вероватно ћете користити једно или више додатака. Било да је у питању блокирање огласа или додавање функција, проширења додају много корисности прегледачу. Па зар не би било у реду ако бисте могли да направите свој Цхроме додатак? То је управо оно што ћу вам овде показати.
Такође погледајте наш чланак Најбољи Цхромебоок-ови са додирним екраном
Док одржавам веб локације за клијенте, волим да знам како свака веб локација функционише у погледу учитавања страница. Пошто Гоогле сада користи време учитавања у својим СЕО калкулацијама, знајући колико брзо или споро се учитава страница важно је мерило приликом оптимизације сајта. Ово је још тачније када се оптимизује веб локација за мобилне уређаје. Мора бити лаган, брз и учитаван без икаквих грешака да би могао бити високо у Гоогле-у.
Додам томе, чињеница да предузимљива особа у СитеПоинт-у такође користи исту веб локацију коју радим да провери брзину странице, ГТметрик и развио је Цхроме проширење да бих је проверио, мислио сам да бих исто урадио и прошао кроз вас.
Цхроме Ектенсионс
Цхроме Ектенсионс су мини програми који додају функције основном прегледачу. Могу бити једноставне попут оне коју ћемо створити или компликоване попут сигурних менаџера лозинки или емулатора скрипти. Написани на компатибилним језицима као што су ХТМЛ, ЦСС и ЈаваСцрипт, они су самосталне датотеке које се налазе поред прегледача.
По потреби, већина проширења су једноставна извршења клика икона која изводе одређену радњу. Та акција може буквално бити било шта што желите да Цхроме учини.
Израдите сопствено Цхроме проширење
Уз мало истраживања, можете прилагодити свој наставак да бисте радили све што желите, али свиђа ми се идеја о брзини једне типке, па идем и са тим.
Обично, када проверите брзину веб локације, залепили бисте УРЛ странице на којој се налазите у ГТметрик, Пингдом или где год да и притиснете Анализе. Потребно је само неколико секунди, али зар не би било лепо када бисте могли само да изаберете икону у свом прегледачу и урадите то уместо вас? Након што прођете кроз овај туториал, моћи ћете да урадите управо то.
Морате да креирате фасциклу на рачунару да бисте задржали све. Креирајте три празне датотеке, манифест.јсон, попуп.хтмл и попуп.јс. Кликните десним тастером миша унутар нове мапе и изаберите Нова и текстуална датотека. Отворите сваку своју три датотеке у свом уређивачу текста по избору. Провјерите је ли попуп.хтмл сачуван као ХТМЛ датотека, а попуп.јс је сачуван као ЈаваСцрипт датотека. Преузмите и ову икону узорка са Гоогле-а само за потребе овог водича.
Изаберите манифест.јсон и у њега залепите следеће:
{"манифест_версион": 2, "наме": "ГТметрик Паге Спеед Анализер", "опис": "Користите ГТметрик за анализу брзине учитавања странице на веб локацији", "верзија": "1.0", "претраживач претраживача": {"дефаулт_ицон" : "ицон.пнг", "дефаулт_попуп": "попуп.хтмл"}, "дозволе":}
Као што видите, дали смо му наслов и основни опис. Такође смо позвали радњу прегледача која укључује икону коју смо преузели са Гоогле-а и која ће се појавити на траци вашег прегледача и попуп.хтмл. Попуп.хтмл је оно што се зове када у прегледачу одаберете икону проширења.
Отворите попуп.хтмл и залијепите сљедеће у њега.
Пагеспеед Анализер користећи ГТМетрик
Попуп.хтмл је оно што се зове када у прегледачу одаберете икону проширења. Дали смо му име, означили скочни прозор и додали дугме. Ако изаберете дугме, позваћемо попуп.јс који је датотека коју ћемо следеће довршити.
Отворите попуп.јс и залепите следеће:
доцумент.аддЕвентЛистенер ('ДОМЦонтентЛоадед', фунцтион () {вар цхецкПагеБуттон = доцумент.гетЕлементБиИд ('цхецкПаге'); цхецкПагеБуттон.аддЕвентЛистенер ('клик', функција () {цхроме.табс.гетСелецтед (нулл, функција (таб) {д = документ; вар ф = д.цреатеЕлемент ('образац'); ф.ацтион = 'хттп://гтметрик.цом/анализе.хтмл?бм'; ф.метход = 'пост'; вар и = д.цреатеЕлемент ( 'инпут'); и.типе = 'хидден'; и.наме = 'урл'; и.валуе = таб.урл; ф.аппендЦхилд (и); д.боди.аппендЦхилд (ф); ф.субмит () ;});}, фалсе);}, фалсе);
Нећу се правити да знам ЈаваСцрипт због чега је било згодно да је СитеПоинт већ имао датотеку на свом месту. Све што знам је да каже ГТметрик-у да анализира страницу на тренутној Цхроме картици. Тамо где пише 'цхроме.табс.гетСелецтед', екстензија узима УРЛ са активне картице и уноси је у веб облик. То је онолико колико могу ићи.
Тестирање Цхроме додатка
Сада имамо успостављен основни оквир, морамо да тестирамо како бисмо видели како то функционише.
- Отворите Цхроме, изаберите Још алата и проширења.
- Означите поље поред режима за програмере да бисте га омогућили.
- Изаберите Учитај непакирано проширење и дођите до датотеке коју сте креирали за ово проширење.
- Изаберите ОК да бисте додали додатак и он би се требао појавити на вашој листи проширења.
- Потврдите избор у пољу за потврду поред Омогућено, а икона би се требала појавити у вашем прегледачу.
- Изаберите икону у прегледачу тако да се појави скочни прозор.
- Одаберите дугме, Проверите ову страницу одмах!
Требали бисте видети страницу која се проверава и извештај о перформансама компаније ГТметрик. Као што видите са моје сопствене странице на главној слици, имам мало посла како бих убрзао свој нови дизајн!
Наставак наставка напред
Прављење сопственог Цхроме додатка није тако тешко као што можда изгледа. Иако вам је сигурно помогло да започнете знајући мало кода, постоје стотине ресурса на мрежи који ће вам то показати. Поред тога, Гоогле има огромно складиште информација, водиче и упутства која ће вам помоћи. Користио сам ову страницу са веб локације Гоогле Девелопер како би ми помогао око овог проширења. Страница вас води кроз сваки део креирања проширења и пружа ону икону коју смо користили раније.
Уз довољно истраживања, можете да направите проширења која чине готово све што прегледач може. Неки од најбољих додатака у Цхроме продавници су од појединаца, а не од компанија, што доказује да заиста можете да направите сопствено.
Сва заслуга Јохну Сонмезу у СитеПоинт-у за оригинални водич. Тешко је радио, само сам га мало реорганизовао и мало га ажурирао.
Да ли сте направили сопствено Цхроме проширење? Желите да је промовишете или делите? Јавите нам доле ако то радите!
