Chrome вэб өргөтгөл - Кодлох туршлага шаардагдахгүй: 6 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:01

Chrome Өргөтгөлүүд нь хэрэглэгчдийн үзэх боломжийг сайжруулах зорилгоор бүтээгдсэн жижиг програмууд юм. Chrome өргөтгөлүүдийн талаар дэлгэрэнгүй мэдээлэл авахыг хүсвэл https://developer.chrome.com/extensions хаягаар орно уу.

Chrome вэб өргөтгөл хийхийн тулд код бичих шаардлагатай байдаг тул HTML, JavaScript, CSS -ийг доорх вэбсайтаас үзэх нь маш ашигтай байдаг.

www.w3schools.com/default.asp (w3 сургууль бол нөөцийг кодлох сайн вэбсайт юм)

Та хэрхэн кодлохоо мэдэхгүй байна уу? Санаа зоволтгүй, энэ заавар нь танд туслах болно.

Chrome өргөтгөлүүдийн хамгийн сайн зүйл бол тэдгээрийг өөрчилж болно. Үүнийг хийх боломжтой ганц нэг тодорхой зүйл биш тул бүтээлч байгаарай.

Хангамж

Шаардлагатай хангамжийг доор харуулав.

• Текст засварлагчтай компьютер (би Notepad ашиглаж байна)
• Гүүгл Кром

Тэгээд л болоо!

Алхам 1: Лавлах үүсгэх

Нэгдүгээрт, бүх файлыг хадгалах хавтас үүсгээд үүнийг "өргөтгөл" гэж нэрлэнэ үү. Хэрэв хүсвэл нэрийг дараа нь өөрчилж болно.

Алхам 2: Манифест файл үүсгэж кодчилно уу

Манифест файл нь өргөтгөлийн маш чухал хэсэг юм. Энэ нь яг юу хийх, юу хийх ёстойг өргөтгөлд хэлдэг. Манифест файлуудыг JSON форматаар форматладаг. Эхний алхам бол текст засварлагчийг нээж, шинэ файлыг 'manifest.json' хэлбэрээр хадгалах явдал юм.

Дараа нь доорх скриптийг бичнэ үү.

{

"нэр": "Эхний өргөтгөл", "хувилбар": "1.0", "тайлбар": "Би өргөтгөлийг кодчилж чадна", "manifest_version": 2, "browser_action": {"default_title": "Эхний өргөтгөл"}}

Утгын дараа таслал санаарай!

Үүнийг бичсний дараа манифест файлыг хадгалаад chrome: // extensions руу очно уу (Chrome -ийг үүнийг хөтөч болгон ашиглах ёстой). Chrome: // extensions дээр орсны дараа хөгжүүлэгчийн горимыг асаана уу. Үүний дараа 'Load unpacked' товчийг дарж 'өргөтгөл' хавтсыг сонгоно уу.

бөмбөр өнхрүүлээрэй…

Заа! Энэ бол уйтгартай байдлаас бусад өргөтгөл юм. Энэ нь яг одоогоор юу ч хийхгүй байгаа ч удахгүй супер дажгүй болно.

Алхам 3: Дүрсүүдийг үүсгэж, тунхаглалыг шинэчилнэ үү

Дүрс зурахад сайн ажилладаг нэг вэбсайт бол https://www.piskelapp.com/ юм. Ашиглах боломжтой бусад зургийн програмууд байдаг. Дүрсүүд дөрвөлжин хэлбэртэй байх ёстой. Энэ төсөл нь 16x16, 32x32, 48x48, 128x128 дүрсийг ашиглах болно. Дүрсийг хийсний дараа өргөтгөлийн хавтсанд 'зураг' нэртэй хавтас хийж, дүрсээ тэр хавтсанд хийнэ үү. Зургийг овор хэмжээгээр нь нэрлэх нь зүйтэй болов уу. Жишээлбэл, 'icon32.png'. Шинэ код доор байна:

{

"нэр": "Эхний өргөтгөл", "хувилбар": "1.0", "тайлбар": "Би өргөтгөлийг кодчилж чадна", "manifest_version": 2, "browser_action": {"default_title": "Эхний өргөтгөл", " default_icon ": {" 16 ":" images/icon16-p.webp

Манифест кодын талаар лавлахыг хүсвэл https://developer.chrome.com/extensions/manifest хаягаар орно уу.

Алхам 4: Попап нэмэх

Энэ өргөтгөл нь гарч ирэх цонхтой болно. Попап нь HTML (Hypertext Markup Language) файл тул эхлээд HTML, CSS, JavaScript -ийн үндсийг сурч мэдсэн нь дээр.

Нэгдүгээрт, баримт бичгийг өргөтгөлийн хавтсанд 'popup.html' файл хэлбэрээр хадгална уу.

Дараа нь, манифест файлыг дарахад 'popup.html' харуулахын тулд засварлана уу. Шинэ код доор байна:

{

"нэр": "Эхний өргөтгөл", "хувилбар": "1.0", "тайлбар": "Би өргөтгөлийг кодчилж чадна", "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; хилийн радиус: 50 пиксел; хувиргах: эргүүлэх (57 градус); дүүргэгч: 10 пиксел; хэрэглэгчийн сонгох: байхгүй; курсор: хөндлөвч; шилжилт: 2s -ийг өөрчлөх; } #сайн уу: hover {хувиргах: эргүүлэх (-417deg); }

Энэ хоёр дахь жишээ нь эхлэгчдэд маш их ойлгомжгүй байж магадгүй юм. Гэхдээ энэ нь CSS нь програм/өргөтгөлд хичнээн чухал болохыг харуулах болно. Одоо завсарлага аваад HTML5 кодчиллыг сурч, лавлах зорилгоор developer.chrome.com -ийг ашиглахад тохиромжтой цаг байх болно. Хэсэг хугацаа шаардагдах боловч гайхалтай өргөтгөл хийх боломжтой.

Алхам 6: Үүнийг Chrome вэб дэлгүүрт нийтлэх

Хэрэв хэн нэгэн үнэхээр гайхалтай өргөтгөл хийсэн бөгөөд үүнийг дэлхийтэй хуваалцахыг хүсч байвал түүнийгээ нийтлэх боломжтой. Энэ нь эцсийн эцэст сунгах цэг юм. Энэ заавар нь зөвхөн манифест файл, түүнийг хэрхэн ашиглах талаар тайлбарлахыг хичээсэн бөгөөд зүгээр л 'Hello World' програмтай байсан.

Өргөтгөлийг олон нийтэд нээлттэй болгохын тулд хийх ёстой хамгийн эхний зүйл бол өргөтгөлийн хавтсыг zip файл болгоно. Хоёрдахь зүйл бол https://chrome.google.com/webstore/category/extensions хаягаар орж google данс руу нэвтрэх явдал юм. Дараа нь тохиргооны арааны товчлуур дээр дараад "хөгжүүлэгчийн хяналтын самбар" дээр дарна уу. Зип файлыг байршуулахын тулд 'Шинэ зүйл' товчийг дарна уу. Тэнд очсоны дараа дэлгүүрийн жагсаалт, нууцлал, үнийг засварлах шаардлагатай болно. Өргөтгөлийг хянуулахаар илгээсэн тохиолдолд хялбархан нийтэлж болно.

Өргөтгөл дууссаны дараа кодоо үргэлжлүүлээрэй!