Chrome Internet kengaytmasi - oldingi kodlash tajribasi shart emas: 6 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:23

Chrome kengaytmalari foydalanuvchilarni ko'rish tajribasini yaxshilash uchun yaratilgan kichik dasturlardir. Chrome kengaytmalari haqida ko'proq ma'lumot olish uchun https://developer.chrome.com/extensions saytiga tashrif buyuring.

Chrome Internet kengaytmasini yaratish uchun kodlash talab qilinadi, shuning uchun HTML, JavaScript va CSS -ni quyidagi veb -saytda ko'rib chiqish juda foydali:

www.w3schools.com/default.asp (w3 maktablari resurslarni kodlash uchun yaxshi veb -sayt)

Qanday kodlashni bilmayapsizmi? Xavotir olmang, bu darslik sizga yo'l ko'rsatishga yordam beradi.

Chrome kengaytmalarining eng yaxshi tomoni shundaki, ularni sozlash mumkin. Bu faqat bitta aniq ish emas, shuning uchun ijodiy bo'ling.

Ta'minotlar

Kerakli materiallar quyida keltirilgan:

• Matn muharriri bo'lgan kompyuter (men Notepad -dan foydalanaman)
• Gugl xrom

Va bu hammasi!

1 -qadam: katalog yaratish

Birinchidan, barcha fayllarni saqlash uchun papka yarating va uni "kengaytma" deb nomlang. Agar xohlasangiz, ism keyinchalik o'zgartirilishi mumkin.

2 -qadam: Manifest faylini yarating va uni kodlang

Manifest fayli kengaytmaning juda muhim qismidir. Bu kengaytmada aniq nima qilish va nima qilish kerakligini aytadi. Manifest fayllari JSON formatlangan. Birinchi qadam - matn muharririni ochish va yangi faylni 'manifest.json' sifatida saqlash.

Keyin quyidagi skriptni kiriting:

{

"name": "Birinchi kengaytma", "versiya": "1.0", "tavsif": "Men kengaytmani kodlay olaman", "manifest_version": 2, "browser_action": {"default_title": "Birinchi kengaytma"}}

Qiymatlardan keyin vergulni eslang!

Bu yozilgandan so'ng, manifest faylini saqlang va chrome: // extensions -ga o'ting (buning uchun Chrome brauzer sifatida ishlatilishi kerak). Chrome: // extensions -ga kirgandan so'ng, ishlab chiquvchi rejimini yoqing. Shundan so'ng, "Yuklamani ochish" tugmasini bosing va "kengaytma" papkasini tanlang.

baraban rulini iltimos …

Vajjaj! Bu kengaytma, faqat … zerikarli. Bu hozircha deyarli hech narsa qilmaydi, lekin tez orada juda zo'r bo'ladi.

3 -qadam: Belgilarni yarating va manifestni yangilang

Belgilarni chizish uchun yaxshi ishlaydigan bitta veb -sayt - https://www.piskelapp.com/. Boshqa rasm chizish dasturlari ham mavjud. Belgilar kvadrat bo'lishi kerak. Ushbu loyihada 16x16, 32x32, 48x48 va 128x128 piktogramma ishlatiladi. Belgini yaratgandan so'ng, kengaytma papkasida "tasvirlar" deb nomlangan papkani yarating va belgini o'sha papkaga qo'ying. Rasmni o'lchamiga qarab nomlash yaxshi bo'lardi. Masalan, 'icon32.png'. Yangi kod quyida keltirilgan:

{

"name": "Birinchi kengaytma", "versiya": "1.0", "tavsif": "Men kengaytmani kodlay olaman", "manifest_version": 2, "browser_action": {"default_title": "Birinchi kengaytma", " default_icon ": {" 16 ":" images/icon16.png "," 32 ":" images/icon32.png "," 48 ":" images/icon48.png "," 128 ":" images/icon128.png "}}}

Manifest kodi haqida ma'lumot olish uchun https://developer.chrome.com/extensions/manifest saytiga o'ting.

4 -qadam: qalqib chiquvchi oynani qo'shing

Bu kengaytma qalqib chiquvchi oynaga ega bo'ladi. Qalqib chiquvchi HTML (gipermatn belgilash tili) fayli, shuning uchun avval HTML, CSS va JavaScript asoslarini o'rganish yaxshi bo'ladi.

Birinchidan, kengaytma papkasida hujjatni 'popup.html' fayli sifatida saqlang.

Keyin, "popup.html" ni bosish uchun manifest faylini tahrir qiling. Yangi kod quyida keltirilgan:

{

"name": "Birinchi kengaytma", "versiya": "1.0", "tavsif": "Men kengaytmani kodlay olaman", "manifest_version": 2, "browser_action": {"default_title": "Birinchi kengaytma", " default_icon ": {" 16 ":" images/icon16.png "," 32 ":" images/icon32.png "," 48 ":" images/icon48.png "," 128 ":" images/icon128.png "}," default_popup ":" popup.html "}}

Vergulani unutmang!

Endi, agar quyidagi HTML -kod popup.html -ga qo'shilsa, u bosilganda "Salom dunyo" ko'rsatiladi.

Salom Dunyo

5 -qadam: Yaxshi ko'rinishga ega bo'ling va interaktiv qiling

Agar asosiy HTML satri yozilgan bo'lsa, u holda minimal minimal bajariladi. Agar CSS (kaskadli uslublar jadvallari) qo'shilsa, u sovuqroq ko'rinadi va agar JavaScript qo'shilsa, u yanada interaktiv bo'lishi mumkin. Ushbu qo'llanmada HTML, JavaScript va CSS -ni tushuntirishga batafsil to'xtalib o'tilmaydi, lekin Internetda ko'plab manbalar mavjud. Quyida oddiy "Salom dunyo" dasturining kodi, so'ngra rangliroq dastur:

Salom Dunyo

Salom Dunyo

#salom {fon rangi: #000000; rang: #ff0000; chegara: 8 piksel boshi #86a3b2; chegara radiusi: 50 piksel; aylantirish: aylantirish (57 daraja); to'ldirish: 10 piksel; foydalanuvchi-ni tanlang: yo'q; kursor: kesishma; o'tish: 2 soniyani o'zgartirish; } #salom: hover {aylantirish: aylantirish (-417deg); }

Bu ikkinchi misol yangi boshlovchi uchun juda chalkash bo'lishi mumkin. Lekin, bu sizga CSS dastur/kengaytma uchun qanchalik muhimligini ko'rsatish edi. Endi dam olish va HTML5 kodlashni o'rganish va developer.chrome.com saytidan foydalanish uchun yaxshi vaqt bo'lardi. Bu biroz vaqt talab qilishi mumkin, lekin ajoyib kengaytmani amalga oshirish mumkin.

6 -qadam: Chrome Internet -do'konida chop etish

Agar kimdir haqiqatan ham ajoyib kengaytmani yaratgan bo'lsa va uni dunyo bilan bo'lishishni xohlasa, uni nashr qilishi mumkin. Ya'ni, oxirigacha, uzaytirish nuqtasi. Bu darslik faqat manifest faylini va undan qanday foydalanish kerakligini tushuntirishga harakat qildi va unda faqat "Salom dunyo" dasturi bor edi.

Kengaytmani hammaga ochiq qilish uchun birinchi narsa kengaytma papkasini zip faylga aylantirishdir. Ikkinchi narsa - https://chrome.google.com/webstore/category/extensions saytiga o'ting va Google hisobiga kiring. Keyin, sozlash tishli tugmachasini bosing va "Ishlab chiquvchilar asboblar paneli" ni bosing. Zip faylini yuklash uchun "Yangi element" tugmasini bosing. U erga borganingizda, do'konlar ro'yxati, maxfiylik va narxlarni o'zgartirish kerak. Kengaytma, agar u ko'rib chiqish uchun yuborilsa, osonlikcha nashr etilishi mumkin.

Endi kengaytma tugagach, kodlashni davom ettiring!