Како да направите сопствени додатак за Гоогле Цхроме

Да ли сте икада били незадовољни функцијама које долазе са вашим веб прегледачем? Чак и са сатима претраживања по Гоогле веб продавници испод појаса, није увек једноставно притиснути „преузми“ да бисте побољшали своје искуство сурфовања вебом.

Овде долазе проширења претраживача. У овом чланку ћемо истражити процес прављења сопственог „уради сам“ проширења за Гоогле Цхроме од нуле.

Шта је проширење за Гоогле Цхроме?

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

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

За разлику од веб локације, екстензије могу да раде у позадини док претражујете, понекад чак и у интеракцији са сајтовима које посећујете.

Шта ће учинити наше проширење за Гоогле Цхроме?

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

Научићеш како да

• Направите додатак за Гоогле Цхроме
• Уметните прилагођени код у веб странице помоћу Цхроме екстензије
• Креирајте слушаоце догађаја и симулирајте кликове
• Генеришите случајне бројеве
• Рад са низовима и променљивим

Прављење сопственог „уради сам“ проширења за Цхроме

Гоогле је изненађујуће олакшао креирање сопственог Цхроме екстензије, тако да неће проћи много времена пре него што нешто проради. Праћење доле наведених корака ће трајати само 10 до 15 минута, али препоручујемо вам да експериментишете и са сопственим кодом.

Корак 1: Креирање датотека

Можете да сачувате екстензију на сопственој локалној машини када не планирате да је дистрибуирате. Потребно је само да креирамо четири различите датотеке да бисмо креирали екстензију; ХТМЛ датотеку, ЦСС датотеку, ЈаваСцрипт датотеку и ЈСОН датотеку.

Наше датотеке смо назвали индек.хтмл, стиле.цсс, сцрипт.јс и манифест.јсон. Датотека манифеста мора имати ово име да би исправно функционисала, али осталима можете дати било која имена која желите, све док у складу с тим измените свој код.

Требало би да ставите ове датотеке у исти основни фолдер.

Корак 2: Прављење датотеке манифеста

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

{
"име": "Аутоматска претрага МакеУсеОф.цом",
"верзија": "1.0.0",
"Опис": "Алат за претрагу за проналажење занимљивих чланака",
"манифест_версион": 3,
"аутор": "Семјуел Гарбет",
"дозволе": ["складиште", "децларативеЦонтент", "ацтивеТаб", "скриптовање"],
"хост_пермиссионс": [""],
"поступак":{
"дефаулт_попуп": "индек.хтмл",
"дефаулт_титле": "МУО Ауто Сеарцх"
 }
}

Корак 3: Израда ХТМЛ-а и ЦСС-а

Пре него што почнемо да пишемо нашу скрипту, морамо да креирамо основни кориснички интерфејс користећи ХТМЛ и ЦСС. Можете користити а ЦСС библиотека као што је Боотстрап да бисте избегли креирање сопственог, али нам је потребно само неколико правила за наше проширење.

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

<хтмл>
<глава>
<наслов>МУО Ауто Сеарцх</title>
<мета цхарсет="утф-8">
<линк рел="стилесхеет" хреф="стиле.цсс">
</head>
<тело>
<х1>МУО Ауто Сеарцх</h1>
<а хреф="https://www.makeuseof.com/" таргет="_бланк"><дугме ид="буттонОне">Идите на МакеУсеОф.цом</button></а>
<дугме ид="буттонТво">Покрените случајну претрагу</button>
</body>
<скрипт срц="сцрипт.јс"></script>
</html>

Наша ЦСС датотека је још једноставнија од нашег ХТМЛ-а, мењајући стил само пет елемената. Имамо правила за наше хтмл и боди ознаке, као и за х1 ознаке и оба наша дугмета.

хтмл {
 ширина: 400пк;
}
тело {
 породица фонтова: Хелветица, санс-сериф;
}
х1 {
 тект-алигн: центар;
}
#буттонОне {
 бордер-радиус: 0пк;
 ширина: 100%;
 паддинг: 10пк 0пк;
}
#буттонТво {
 бордер-радиус: 0пк;
 ширина: 100%;
 паддинг: 10пк 0пк;
 маргин-топ: 10пк;
}

Корак 4: Изградња ЈаваСцрипт-а

Као последњи корак у овом процесу, време је да направимо датотеку сцрипт.јс.

Прва функција у овој датотеци, тзв инсертСцрипт(), је на месту за уметање друге функције (аутоСеарцх()) на тренутну страницу. Ово нам омогућава да манипулишемо страницом и користимо функције претраге које су већ присутне на сајту МакеУсеОф.цом.

Након тога следи слушалац догађаја који чека док се не кликне дугме Старт Рандом Сеарцх пре него што позове функцију коју смо претходно истражили.

Тхе аутоСеарцх() функција је мало компликованија. Почиње низом који садржи 20 категорија на веб локацији МУО, што нам даје добар узорак из којег можемо да извучемо када вршимо насумичне претраге. Пратећи ово, користимо Матх.рандом() функција за генерисање случајног броја између 0 и 19 да би се изабрала унос из нашег низа.

Са нашим термином за претрагу у руци, сада морамо да симулирамо клик на дугме да бисмо отворили траку за претрагу МУО. Прво користимо Цхроме конзолу за програмере да пронађемо ИД дугмета за претрагу, а затим га додамо у наш ЈаваСцрипт код помоћу клик () функција.

Као и дугме за претрагу, такође морамо да пронађемо ИД траке за претрагу која се појављује, што нам омогућава да убацимо насумични термин за претрагу који смо изабрали. Када је ово завршено, једноставно је подношење обрасца да бисмо извршили нашу претрагу.

// Ова функција убацује нашу функцију аутоСеарцх у код странице
функцијаинсертСцрипт() {
// Ово бира картицу у фокусу за операцију и прослеђује функцију аутоСеарцх
 цхроме.табс.куери({активан: истина, цуррентВиндов: истина}, табс => {
хром.сцриптинг.екецутеСцрипт({циљ: {табИд: табс[0].ид}, функција: аутоСеарцх})
 })
// Ово затвара искачући прозор екстензије да бисте изабрали траку за претрагу веб локације
прозор.Близу();
}
// Ово је слушалац догађаја који детектује кликове на наш "Почетак Рандом Претрагадугме „
доцумент.гетЕлементБиИд('буттонТво').аддЕвентЛистенер('клик', инсертСцрипт)
// Ова функција бира случајну тему из низа и 
функцијааутоСеарцх() {
// Ово је низ за чување наших термина за претрагу
 цонст сеарцхТермс = ["ПЦ и мобилни", "Начин живота", "Хардвер", "Виндовс", "Мац",
"Линук", "Андроид", "Аппле", "Интернет", "Безбедност",
"Програмирање", "Забава", "Продуктивност", "Каријера", "Креативно",
"Гаминг", "Друштвени медији", "Паметне куће", "ДИИ", "Преглед"];
// Ово генерише насумични број између 0 и 19
дозволити селецторНумбер = Матх.спрат(Матх.рандом() * 20);
// Ово користи насумични број за одабир уноса из низа
дозволити избор = сеарцхТермс[селекторБрој];
// Ово симулира клик на МУО икону за претрагу веб локације
 доцумент.гетЕлементБиИд("јс-претрага").цлицк();
// Ово поставља траку за претрагу веб локације МУО као променљиву
вар сеарцхБар = документ.гетЕлементБиИд("јс-сеарцх-инпут");
// Ово умеће наш случајни термин за претрагу у траку за претрагу
 сеарцхБар.валуе = сеарцхБар.валуе + избор;
// Ово завршава процес активирањем обрасца за веб локацију
 доцумент.гетЕлементБиИд("сеарцхформ2").прихвати();
}

Корак 5: Додавање датотека у Цхроме://ектенсионс

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

Отворите Гоогле Цхроме, идите на цхроме://ектенсионс и уверите се да је клизач Режима програмера у горњем десном углу укључен.

Кликните Лоад Унпацкед у горњем левом углу, затим изаберите фасциклу у коју сте сачували датотеке екстензија и кликните Изабери фасциклу.

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

Сада би требало да будете у могућности да приступите завршеном проширењу у оквиру вашег претраживача. Вреди имати на уму да ће ово проширење радити само на веб локацији МУО или веб локацијама са истим ИД-ом за дугме за претрагу и траку.

Прављење Гоогле Цхроме екстензије

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

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

6 сумњивих екстензија за Гоогле Цхроме које треба да деинсталирате што је пре могуће

Реад Нект

О аутору