Kiendelezi cha Wavuti cha Chrome - Hakuna Uzoefu wa Usimbuaji wa Kabla Unaohitajika: Hatua 6

2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:49

Viendelezi vya Chrome ni programu ndogo zilizojengwa ili kuongeza uzoefu wa kuvinjari kwa watumiaji. Kwa habari zaidi juu ya viendelezi vya chrome nenda kwa

Ili kutengeneza Ugani wa Wavuti wa Chrome, usimbuaji unahitajika, kwa hivyo ni muhimu sana kukagua HTML, JavaScript, na CSS kwenye wavuti hapa chini:

www.w3schools.com/default.asp (shule za w3 ni tovuti nzuri ya rasilimali za usimbuaji)

Sijui jinsi ya kuweka nambari? Usijali, mafunzo haya yatasaidia kuongoza njia.

Jambo bora juu ya Viendelezi vya Chrome ni kwamba zinaweza kuboreshwa. Sio jambo moja tu linaloweza kufanywa, kwa hivyo uwe mbunifu.

Vifaa

Vifaa ambavyo vinahitajika viko chini:

• Kompyuta iliyo na kihariri cha maandishi (ninatumia Notepad)
• Google Chrome

Na hiyo tu!

Hatua ya 1: Unda Saraka

Kwanza, tengeneza folda ya kushikilia faili zote, na uipe jina 'ugani'. Jina linaweza kubadilishwa baadaye ikiwa inataka.

Hatua ya 2: Unda Faili ya Kudhihirisha na Uiandike

Faili ya wazi ni sehemu muhimu sana ya kiendelezi. Inaelezea ugani hasa nini cha kufanya na kuwa. Faili za dhihirisho zimepangwa katika JSON. Hatua ya kwanza ni kufungua kihariri cha maandishi na uhifadhi faili mpya kama 'manifest.json'.

Andika aina inayofuata ya hati hapa chini:

{

"jina": "Kiendelezi cha kwanza", "toleo": "1.0", "maelezo": "Ninaweza kuweka nambari ya kiendelezi", "manifest_version": 2, "browser_action": {"default_title": "First Extension"}}

Kumbuka koma baada ya maadili!

Baada ya hii kuchapwa, hifadhi faili ya maelezo na nenda kwa chrome: // upanuzi (Chrome inapaswa kutumika kama kivinjari cha hii). Mara moja kwenye chrome: // upanuzi, washa hali ya msanidi programu. Baada ya hapo, bonyeza kitufe cha 'Load unpacked' na uchague folda ya 'ugani'.

gombo roll tafadhali…

Ndio! Hiyo ni kiendelezi, isipokuwa… aina yake ni ya kuchosha. Haifanyi chochote kama ilivyo sasa hivi, lakini hivi karibuni itakuwa nzuri sana.

Hatua ya 3: Unda Icons na Sasisha Dhihirisho

Tovuti moja ambayo inafanya kazi vizuri kwa kuchora ikoni ni https://www.piskelapp.com/. Kuna programu zingine za kuchora zinazopatikana kwa matumizi, pia. Aikoni zinapaswa kuwa mraba. Mradi huu utatumia ikoni 16x16, 32x32, 48x48, na 128x128. Mara ikoni inapotengenezwa, fanya folda inayoitwa 'picha' kwenye folda ya ugani na uweke ikoni kwenye folda hiyo. Inaweza kuwa wazo nzuri kutaja picha kulingana na saizi yake. Kwa mfano, 'icon32.png'. Nambari mpya iko hapa chini:

{

"jina": "Kiendelezi cha kwanza", "toleo": "1.0", "maelezo": "Ninaweza kuweka nambari ya kiendelezi", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images / icon16.png "," 32 ":" images / icon32.png "," 48 ":" images / icon48.png "," 128 ":" picha / icon128.png "}}}

Kwa kurejelea nambari ya maelezo, nenda kwa

Hatua ya 4: Ongeza Ibukizi

Kiendelezi hiki kitakuwa na kidukizo. Dukizo ni faili ya HTML (Lugha ya Markup Hypertext), kwa hivyo ni vizuri kujifunza misingi ya HTML, CSS, na JavaScript kwanza.

Kwanza, weka hati kama faili ya 'popup.html' kwenye folda ya ugani.

Ifuatayo, hariri faili ya maelezo ili kuonyesha 'popup.html' inapobofya. Nambari mpya iko hapa chini:

{

"jina": "Kiendelezi cha kwanza", "toleo": "1.0", "maelezo": "Ninaweza kuweka nambari ya kiendelezi", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images / icon16.png "," 32 ":" images / icon32.png "," 48 ":" images / icon48.png "," 128 ":" picha / icon128.png "}," default_popup ":" popup.html "}}

Usisahau koma!

Sasa, ikiwa nambari ifuatayo ya HTML imeongezwa kwenye popup.html, basi itaonyesha 'Hello World' unapobofya.

Salamu, Dunia

Hatua ya 5: Ifanye ionekane Nzuri na Ifanye iwe na Maingiliano

Ikiwa laini ya msingi ya HTML imechapishwa, basi hupata kiwango cha chini kabisa. Ikiwa CSS (Karatasi za Sinema za Kuingiza) imeongezwa, basi itaonekana kuwa baridi, na ikiwa JavaScript imeongezwa, basi inaweza kuingiliana zaidi. Mafunzo haya hayataelezea kwa kina HTML, JavaScript, na CSS, lakini kuna rasilimali nyingi mkondoni. Chini ni nambari ya programu rahisi ya 'Hello World', halafu programu yenye rangi zaidi, mtawaliwa:

Salamu, Dunia

Salamu, Dunia

#hello {rangi-ya nyuma: # 000000; rangi: # ff0000; mpaka: mwanzo wa 8px # 86a3b2; eneo la mpaka: 50px; badilisha: zunguka (57deg); padding: 10px; kuchagua-mtumiaji: hakuna; mshale: msalaba; mpito: badilisha 2s; } # hello: hover {transform: rotate (-417deg); }

Mfano huu wa pili unaweza kuchanganya sana, kwa Kompyuta. Lakini, hii ilikuwa kukuonyesha jinsi CSS ilivyo muhimu kwa mpango / ugani. Sasa itakuwa wakati mzuri wa kupumzika na kujifunza kuorodhesha HTML5 na utumie developer.chrome.com kwa rejeleo fulani. Inaweza kuchukua muda, lakini ugani mzuri unaweza kufanywa.

Hatua ya 6: Kuichapisha kwenye Duka la Wavuti la Chrome

Ikiwa mtu amefanya ugani mzuri sana na wanataka kushiriki na ulimwengu, basi wanaweza kuichapisha. Hiyo ni, baada ya yote, hatua ya ugani. Mafunzo haya yalijaribu tu kuelezea faili ya maelezo, na jinsi unavyoweza kuitumia, na ilikuwa tu na programu ya 'Hello World'.

Jambo la kwanza kufanya kufanya ugani kuwa wa umma ni kutengeneza folda ya ugani kwenye faili ya zip. Jambo la pili kufanya ni kwenda https://chrome.google.com/webstore/category/extensions na uingie kwenye akaunti ya google. Kisha, bonyeza kitufe cha mipangilio ya gia na kisha bonyeza 'dashibodi ya msanidi programu'. Bonyeza kitufe cha 'Kipengee kipya' kupakia faili ya zip. Ukiwa hapo, ni muhimu kuhariri Orodha ya Duka, Faragha, na Bei. Ugani unaweza kuchapishwa kwa urahisi ikiwa utawasilishwa kwa ukaguzi.

Sasa kwa kuwa ugani umekamilika, endelea kuweka nambari!