Chrome Желе Кеңейтүүсү - Эч кандай коддоо тажрыйбасы талап кылынбайт: 6 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:36

Chrome Extensions - бул колдонуучуларды карап чыгуу тажрыйбасын жакшыртуу үчүн курулган чакан программалар. Chrome кеңейтүүлөрү жөнүндө көбүрөөк маалымат алуу үчүн https://developer.chrome.com/extensions дарегине өтүңүз.

Chrome Желе кеңейтүүсүн жасоо үчүн коддоо талап кылынат, андыктан HTML, JavaScript жана CSSти төмөнкү вебсайтта карап чыгуу абдан пайдалуу:

www.w3schools.com/default.asp (w3 мектептери ресурстарды коддоо үчүн жакшы сайт)

Кантип кодировканы билбейсизби? Кабатыр болбоңуз, бул окуу куралы жол көрсөтүүгө жардам берет.

Chrome Кеңейтүүлөрүнүн эң жакшы жагы - аларды ыңгайлаштыруу. Бул жасала турган бир гана нерсе эмес, ошондуктан чыгармачыл болуңуз.

Жабдуулар

Керектүү жабдыктар төмөндө:

• Текст редактору бар компьютер (мен Notepad колдонуп жатам)
• Google Chrome

Жана баары ушул!

1 -кадам: Directory түзүү

Биринчиден, бардык файлдарды сактоо үчүн папка түзүңүз жана ага "кеңейтүү" деп ат коюңуз. Кааласаңыз, аты кийинчерээк өзгөртүлүшү мүмкүн.

2 -кадам: Манифест файлын түзүңүз жана аны коддоңуз

Манифест файлы кеңейтүүнүн абдан маанилүү бөлүгү. Бул кеңейтүүнү так жана эмне кылуу керектигин айтат. Манифест файлдары JSONдо форматталат. Биринчи кадам - текст редакторун ачуу жана жаңы файлды 'manifest.json' катары сактоо.

Кийинки, төмөнкү скриптти териңиз:

{

"name": "Биринчи кеңейтүү", "version": "1.0", "description": "Мен кеңейтүүнү кодтой алам", "manifest_version": 2, "browser_action": {"default_title": "Биринчи кеңейтүү"}}

Баалардан кийинки үтүрдү эстеп коюңуз!

Бул терилгенден кийин, манифест файлын сактап, chrome: // extensions баракчасына өтүңүз (Chrome бул үчүн браузер катары колдонулушу керек). Chrome: // extensions'ке киргенде, иштеп чыгуучу режимин күйгүзүңүз. Андан кийин, "Жүктү ачуу" баскычын басыңыз жана "кеңейтүү" папкасын тандаңыз.

барабан түрмөгү, сураныч…

Ооба! Бул кеңейтүү, башкача айтканда … кызыксыз. Бул азырынча эч нерсе кылбайт, бирок жакында ал супер сонун болот.

3 -кадам: Белгилерди түзүңүз жана Манифестти жаңыртыңыз

Иконаларды тартуу үчүн жакшы иштеген бир вебсайт - https://www.piskelapp.com/. Башка сүрөт тартуу программалары дагы бар. Иконалар төрт бурчтуу болушу керек. Бул долбоор 16x16, 32x32, 48x48 жана 128x128 сүрөтчөлөрүн колдонот. Белги жасалгандан кийин, кеңейтүү папкасына 'сүрөттөр' деп аталган папканы жасап, ошол папкага белгини коюңуз. Сүрөттүн көлөмүнө жараша ат коюу жакшы болмок. Мисалы, 'icon32.png'. Жаңы код төмөндө:

{

"name": "Биринчи кеңейтүү", "version": "1.0", "description": "Мен кеңейтүүнү кодтой алам", "manifest_version": 2, "browser_action": {"default_title": "Биринчи кеңейтүү", " default_icon ": {" 16 ":" images/icon16-p.webp

Манифест коду боюнча маалымат алуу үчүн https://developer.chrome.com/extensions/manifest дарегине өтүңүз.

4 -кадам: Калкыма терезени кошуу

Бул кеңейтүүнүн калкыма терезеси болот. Калкыма HTML (гипертекстти белгилөө тили) файлы, андыктан алгач HTML, CSS жана JavaScriptтин негиздерин үйрөнүү жакшы.

Биринчиден, документти кеңейтүү папкасында 'popup.html' файлы катары сактаңыз.

Андан кийин, манифест файлын чыкылдатуу менен 'popup.html' көрсөтүү үчүн түзөтүңүз. Жаңы код төмөндө:

{

"name": "Биринчи кеңейтүү", "version": "1.0", "description": "Мен кеңейтүүнү кодтой алам", "manifest_version": 2, "browser_action": {"default_title": "Биринчи кеңейтүү", " default_icon ": {" 16 ":" images/icon16-p.webp

Үтүрдү унутпаңыз!

Эми, эгерде төмөнкү HTML коду popup.htmlге кошулса, анда ал басылганда 'Hello World' көрсөтөт.

салам дүйнө

5 -кадам: Аны жакшы кылып, интерактивдүү кылыңыз

Негизги HTML сабы терилген болсо, анда ал минималдуу түрдө аткарылат. Эгерде CSS (Cascading Style Sheets) кошулса, анда ал муздак көрүнөт, эгер JavaScript кошулса, анда ал интерактивдүү болушу мүмкүн. Бул окуу куралы HTML, JavaScript жана CSSти кеңири түшүндүрбөйт, бирок интернетте көптөгөн ресурстар бар. Төмөндө жөнөкөй "Hello World" программасынын коду, андан кийин түстүү программа, тиешелүүлүгүнө жараша:

салам дүйнө

салам дүйнө

#салам {фон-түс: #000000; түс: #ff0000; чек: 8px баштоо #86a3b2; чек ара радиусу: 50px; айландыруу: айландыруу (57deg); толтуруу: 10px; user-select: эч ким; курсор: айкаш; өтүү: 2s өзгөртүү; } #Hello: hover {transform: rotate (-417deg); }

Бул экинчи мисал башталгыч үчүн абдан түшүнүксүз болушу мүмкүн. Бирок, бул CSSтин программа/кеңейтүү үчүн канчалык маанилүү экенин көрсөтүү үчүн болду. Азыр бир аз эс алып, HTML5 коддоону үйрөнүү жана шилтеме үчүн developer.chrome.com колдонуу үчүн жакшы убакыт болмок. Бир аз убакыт талап кылынышы мүмкүн, бирок чоң кеңейтүү жасаса болот.

6 -кадам: Аны Chrome Желе дүкөнүнө жарыялоо

Эгерде кимдир бирөө чындап эле чоң кеңейтүү жасап, аны дүйнө менен бөлүшкүсү келсе, анда аны жарыялай алышат. Башкача айтканда, узартуунун мааниси. Бул окуу куралы манифест файлын жана аны кантип колдоно алаарыңызды түшүндүрүүгө аракет кылды жана анын 'Hello World' программасы бар эле.

Кеңейтүүнү жалпыга ачык кылуу үчүн биринчи нерсе кеңейтүү папкасын zip файлына айландыруу. Экинчи нерсе - https://chrome.google.com/webstore/category/extensions дарегине өтүп, Google каттоо эсебине кирүү. Андан кийин, орнотуулардын тиш баскычын чыкылдатып, андан кийин "иштеп чыгуучунун тактасын" чыкылдатыңыз. ZIP файлын жүктөө үчүн 'New Item' баскычын басыңыз. Ал жакка чыккандан кийин, Дүкөн тизмесин, Купуялыкты жана Бааларды түзөтүү керек. Узартуу кароого берилсе оңой эле жарыяланат.

Эми кеңейтүү аяктагандан кийин, кодду улантыңыз!