„Chrome“žiniatinklio plėtinys - nereikia išankstinės kodavimo patirties: 6 veiksmai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:44

„Chrome“plėtiniai yra mažos programos, skirtos pagerinti naudotojų naršymo patirtį. Daugiau informacijos apie „Chrome“plėtinius rasite apsilankę

Norint sukurti „Chrome“žiniatinklio plėtinį, reikalingas kodavimas, todėl labai naudinga peržiūrėti HTML, „JavaScript“ir CSS žemiau esančioje svetainėje:

www.w3schools.com/default.asp („w3“mokyklos yra gera svetainė kodavimo ištekliams)

Nežinote, kaip koduoti? Nesijaudinkite, ši pamoka padės jums.

Geriausias „Chrome“plėtinių dalykas yra tai, kad juos galima pritaikyti. Tai gali būti ne tik vienas konkretus dalykas, todėl būkite kūrybingi.

Prekės

Reikalingos medžiagos yra šios:

• Kompiuteris su teksto redaktoriumi (naudoju „Notepad“)
• „Google Chrome“

Ir viskas!

1 žingsnis: sukurkite katalogą

Pirmiausia sukurkite aplanką, kuriame būtų visi failai, ir pavadinkite jį „plėtiniu“. Jei reikia, pavadinimą galima pakeisti vėliau.

2 veiksmas: sukurkite manifesto failą ir jį koduokite

Manifesto failas yra labai svarbi plėtinio dalis. Tai tiksliai nurodo plėtiniui, ką daryti ir būti. Manifesto failai suformatuoti JSON. Pirmasis žingsnis yra atidaryti teksto rengyklę ir išsaugoti naują failą kaip „manifest.json“.

Tada įveskite žemiau esantį scenarijų:

{

"name": "Pirmasis plėtinys", "versija": "1.0", "description": "Galiu koduoti plėtinį", "manifest_version": 2, "browser_action": {"default_title": "Pirmasis plėtinys"}}

Prisiminkite kablelius po vertėmis!

Įvedę tekstą, išsaugokite manifesto failą ir eikite į chrome: // extensions (tam reikia naudoti „Chrome“). Atidarę „chrome: // extensions“, įjunkite kūrėjo režimą. Po to paspauskite mygtuką „Įkelti išpakuotą“ir pasirinkite aplanką „plėtinys“.

būgno ritinį prašau …

Valio! Tai pratęsimas, išskyrus … jo nuobodų pobūdį. Šiuo metu tai praktiškai nieko nedaro, bet netrukus bus labai šaunu.

3 žingsnis: sukurkite piktogramas ir atnaujinkite manifestą

Viena svetainė, tinkanti piešti piktogramas, yra https://www.piskelapp.com/. Taip pat yra ir kitų piešimo programų. Piktogramos turi būti kvadratinės. Šiame projekte bus naudojamos 16x16, 32x32, 48x48 ir 128x128 piktogramos. Kai piktograma bus sukurta, plėtinių aplanke sukurkite aplanką pavadinimu „vaizdai“ir įdėkite piktogramą į tą aplanką. Gali būti gera idėja pavadinti paveikslėlį pagal jo dydį. Pavyzdžiui, „icon32.png“. Naujas kodas yra žemiau:

{

"name": "Pirmasis plėtinys", "versija": "1.0", "description": "Galiu koduoti plėtinį", "manifest_version": 2, "browser_action": {"default_title": "Pirmasis plėtinys", " default_icon ": {" 16 ":" images/icon16-p.webp

Norėdami gauti nuorodą į manifesto kodą, eikite į

4 veiksmas: pridėkite iššokantįjį langą

Šis plėtinys turės iššokantįjį langą. Iššokantis langas yra HTML (hiperteksto žymėjimo kalbos) failas, todėl gerai išmokti HTML, CSS ir „JavaScript“pagrindus.

Pirmiausia išsaugokite dokumentą kaip „popup.html“failą plėtinių aplanke.

Tada redaguokite aprašo failą, kad spustelėjus būtų rodomas „popup.html“. Naujas kodas yra žemiau:

{

"name": "Pirmasis plėtinys", "versija": "1.0", "description": "Galiu koduoti plėtinį", "manifest_version": 2, "browser_action": {"default_title": "Pirmasis plėtinys", " default_icon ": {" 16 ":" images/icon16-p.webp

Nepamirškite kablelio!

Dabar, jei toliau pateiktas HTML kodas yra pridėtas prie popup.html, spustelėjus jis bus rodomas „Labas pasaulis“.

Labas pasauli

5 žingsnis: atrodykite gerai ir interaktyviai

Jei įvedama pagrindinė HTML eilutė, ji atlieka minimalų minimumą. Jei pridėsite CSS (kaskadinių stiliaus lapų), jis atrodys vėsiau, o jei pridėsite „JavaScript“, jis gali būti interaktyvesnis. Šioje pamokoje nebus išsamiai paaiškinta HTML, „JavaScript“ir CSS, tačiau internete yra daug išteklių. Žemiau yra paprastos programos „Labas pasaulis“, tada atitinkamai spalvingesnės programos kodas:

Labas pasauli

Labas pasauli

#hello {background-color: #000000; spalva: #ff0000; kraštinė: 8 taškų pradžia #86a3b2; ribos spindulys: 50 taškų; transformuoti: pasukti (57deg); paminkštinimas: 10 taškų; user-select: nėra; žymeklis: kryželis; perėjimas: transformuoti 2s; } #hello: hover {transform: rotate (-417deg); }

Šis antrasis pavyzdys pradedantiesiems gali būti labai painus. Tačiau tai turėjo parodyti, koks svarbus CSS yra programai/plėtiniui. Dabar būtų tinkamas metas padaryti pertrauką ir išmokti HTML5 kodavimo bei naudoti nuorodą developer.chrome.com. Tai gali užtrukti šiek tiek laiko, tačiau gali būti atliktas puikus pratęsimas.

6 veiksmas: paskelbkite jį „Chrome“internetinėje parduotuvėje

Jei kas nors padarė tikrai puikų pratęsimą ir nori juo pasidalyti su pasauliu, jis gali jį paskelbti. Galų gale, tai yra pratęsimo esmė. Ši pamoka tik bandė paaiškinti manifesto failą ir tai, kaip galite jį naudoti, ir jame buvo tik programa „Labas pasaulis“.

Pirmas dalykas, kurį reikia padaryti, kad plėtinys būtų viešas, yra padaryti plėtinio aplanką į ZIP failą. Antras dalykas, kurį reikia padaryti, yra apsilankyti https://chrome.google.com/webstore/category/extensions ir prisijungti prie „Google“paskyros. Tada spustelėkite nustatymų krumpliaračio mygtuką, tada spustelėkite „kūrėjo prietaisų skydelis“. Norėdami įkelti ZIP failą, paspauskite mygtuką „Naujas elementas“. Ten nuvykus būtina redaguoti parduotuvės įrašą, privatumą ir kainas. Plėtinį galima lengvai paskelbti, jei jis pateikiamas peržiūrėti.

Dabar, kai plėtinys baigtas, tęskite kodavimą!