Kaip sukurti „Chrome“ plėtinius iš „Scratch“

Jei norite pridėti arba keisti kai kurias funkcijas „Google Chrome“, turite naudoti plėtinį. Nors galite atsisiųsti plėtinį iš „Chrome“ internetinės parduotuvės, tačiau kartais jums reikia tam tikros funkcijos, kurios negalite rasti jokiame esamame plėtinyje.

Na, gera žinia yra ta, kad galite sukurti savo plėtinį, jei norite pridėti ar modifikuoti reikalingą funkciją arba sukurti naują „Google Chrome“ papildinį ar programą, kurią vėliau galėsite naudoti platinti kitiems vartotojams naudojant „Chrome“ internetinę parduotuvę.

Toliau aš jums parodysiu paprasčiausias būdas sukurti plėtinį. Jei turite žinių apie žiniatinklio kūrimą (HTML, CSS ir JS), jausitės kaip namie. Jei ne, pirmiausia žiūrėkite šiuos kanalus išmokti žiniatinklio kūrimo pagrindus, tada tęskite toliau.

Būtinos sąlygos

Prieš pradedant šią pamoką, turite atlikti šiuos reikalavimus.

1. Turite būti susipažinę HTML, CSS ir JavaScript. [Patikrinti išteklius]
2. Turite turėti a kodo redaktorius rašyti plėtinį. [Palyginti redaktorius]
3. (Neprivaloma) Jei norite išplėsti plėtinį kitiems vartotojams, turite turėti kūrėjo sąskaita „Chrome“ internetinėje parduotuvėje. [Sukurti paskyrą]

Pastaba: „Google“ prašo mokėti nedidelį mokestį už kūrėjo paskyros sukūrimą „Chrome“ internetinėje parduotuvėje.

Sukurkite plėtinį

Šioje instrukcijoje pasidalinsiu kūrimo procesu darbų pratęsimas „Google Chrome“. Tai bus naudingumas (kaip parodyta žemiau), siekiant parodyti esminius komponentus ir gebėjimus, teikiamus plėtiniams.

1. Gaukite šabloną

„Google Chrome“, kaip ir bet kuri kita platforma, reikalauja jos plėtiniai turi nustatytą struktūrą, kuri gali atrodyti sudėtinga pradedantiesiems. Štai kodėl gera gauti pratęsimo šabloną, kuris suteiks visas reikmes.

Extensionizr yra geriausias generatorius chromo plėtiniams. Tai leidžia pasirinkti vieną iš nurodytų plėtinių tipų - naršyklės veiksmas (veiksmas visuose puslapiuose ar naršyklėje), puslapio veiksmas (veiksmas dabartiniam puslapiui), arba paslėptas plėtinys (fono veiksmas, kuris paprastai yra paslėptas priekinėje sąsajoje).

Be to, ji suteikia įvairias koregavimo parinktis įtraukti / neįtraukti būtinų priedų, leidimų, ir tt Jums reikia pasirinkti “Naršyklės veiksmai” kaip plėtinio tipas ir “Nėra fono” kaip šio vadovo fono puslapį.

Kai baigsite pasirinkti mėginio plėtinio kūrimo parinktis, paspauskite “Atsisiųskite jį!” mygtukas „Extensionizr“. Pagaliau, ištraukite archyvą (.zip) į katalogą ir atidarykite kodo redaktorių, kad pradėtumėte rašyti plėtinį.

2. Koduoti plėtinį

Atsisiuntę ir ištraukę šabloną, pamatysite katalogo struktūrą, kaip parodyta žemiau esančiame paveikslėlyje. Šablonas yra tvarkingas, ir jūs turite žinoti, kad svarbiausias failas yra “manifest.json“.

Susipažinkime su kitais šio katalogo failais ir aplankais:

1. _locales: Jis naudojamas saugoti kalbos informaciją už daugiakalbę programą.
2. css: Jis veikia kaip trečiosios šalies priekinių bibliotekų, tokių kaip „Bootstrap 4“, saugojimas.
3. piktogramos: Jis sukurtas tam, kad būtų galima plėtoti įvairaus dydžio plėtinius.
4. js: Jis yra patogus išsaugoti trečiųjų šalių „back-end“ bibliotekos kaip jQuery 3.
5. src: Jis išsaugo faktinį kodą, kurį rašysite savo plėtiniui.

manifest.json

Jame yra pagrindiniai jūsų programos metaduomenys, kuri apibrėžia jūsų programos duomenis naršyklėje. Galite redaguoti, kad nustatytumėte savo plėtinio pavadinimą, aprašymą, svetainę, piktogramą ir pan naršyklės veiksmai ir leidimai.

Pavyzdžiui, žemiau pateiktame kode pastebėsite, kad pakeitiau pavadinimą, aprašymą ir pagrindinį puslapį_url kartu su default_title pagal naršyklės parinktį. Be to, aš pridėta “saugojimo” pagal leidimus mes turime saugoti duomenis mūsų plėtinyje.

 "name": "Todoizr - darbų supaprastinta", "versija": "0.0.1", "manifest_version": 2, "aprašymas": "Paprasta užduotis visiems.", "homepage_url": " https://go.aksingh.net/todoizr "," piktogramos ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" piktogramos / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - darbų supaprastinta "," default_popup ":" src / naršyklė_action / browser_action.html "," leidimai ": [" saugojimas "] 

src naršyklės parinktis

Šiame kataloge bus rodomas naršyklės veiksmas. Mūsų atveju mes koduoti iššokantį langą rodomas spustelėję plėtinio piktogramą naršyklėje. Mūsų plėtinys leis vartotojams pridėti ir peržiūrėti užduotis elemente.

Pastaba: Visada galite pereiti nuo kodo, klonuodami šią saugyklą.

Pradinis šablono kodas

Nors šis katalogas turėjo tik HTML failą, turintį visą kodą, nusprendžiau jį padalinti į tris atskirus failus, kad būtų aiškiau. Tai reiškia, kad pavadintas HTML failas “naršyklė_action.html” dabar turi šį kodą:

Be to, pavadintas stiliaus failas “naršyklės_action.css” „JavaScript“ failo pavadinime yra toliau nurodytas turinys “naršyklė_action.js” dabar yra tuščias.

 #mainPopup padding: 10px; aukštis: 200px; plotis: 400px; šrifto šeima: Helvetica, Ubuntu, Arial, sans-serif;  h1 šrifto dydis: 2em;  

Sukurkite iššokantį langą

Sukūrę pradinį projektą, pirmiausia suprojektuokite iššokantį langą. Aš turiu sąsają su minimalistiniu požiūriu, rodomas viršuje nurodytas vardas, po kurio pateikiama forma, skirta pridėti darbų elementus, ir toliau apačioje esantis laukas, skirtas peržiūrėti pridėtus elementus. Jį įkvėpė paprastas dizainas “Formos stilius 5“.

Toliau pateiktame kode pridėjau du divus - vieną, skirtą formai rodyti, kad pridėtumėte užduotį, o kitas - jau pridėtų darbų sąrašo rodymą. Tai reiškia, kad naujasis kodas “naršyklė_action.html” yra toks:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

Ir stiliaus failas “naršyklės_action.css” dabar turi šį kodą:

 @import URL („./ form_style_5.css“); #mainPopup aukštis: 200px; plotis: 300px; šrifto šeima: Helvetica, Ubuntu, Arial, sans-serif;  / * Darbų atlikimo forma * / .form-style-5 margin: auto; paminkštinimas: 0px 20px;  .form-style-5: pirmasis vaikas fonas: nėra;  .form-style-5 h1 color: # 308ce3; šrifto dydis: 20px; teksto derinimas: centras;  .form-style-5 įvestis [type = "text"] plotis: auto; plūdė: kairė; paraštės apačia: išjungta;  .form-style-5 įvestis [type = "button"] fonas: # 308ce3; plotis: auto; float: right; paminkštinimas: 7px; siena: nėra; pasienio spindulys: 4px; šrifto dydis: 14px;  .form-style-5 įvestis [type = "button"]: hover background: # 3868d5;  / * Darbų sąrašas * / .form-style-5: paskutinis vaikas aukštis: paveldėti; paraštės apačioje: 5px;  .form-style-5 ul padding: 20px;  .form-style-5 ul li font-size: 14px;  

Galiausiai, trečiosios šalies stiliaus failas “form_style_5.css” turi žemiau pateiktą turinį. Tai paprasčiausiai paimta iš savo svetainės, kad įkvėptų mūsų išplėtimo dizainą.

 / * Form 5 stilius pagal Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; paminkštinimas: 10px 20px; fonas: # f4f7f8; paraštė: 10px auto; paminkštinimas: 20px; fonas: # f4f7f8; pasienio spindulys: 8px; font-family: Gruzija, „Times New Roman“, Times, serif;  .form-style-5 fieldset border: none;  .form-style-5 legenda font-size: 1.4em; paraštės apačia: 10px;  .form-style-5 etiketė display: block; paraštės apačioje: 8px;  .form-style-5 įvestis [type = "text"], .form-style-5 įvestis [type = "date"], .form-style-5 įvestis [type = "datetime"], .form-style -5 įvestis [type = "email"], .form-style-5 įvestis [type = "number"], .form-style-5 įvestis [type = "search"], .form-style-5 įvestis [tipas = "time"], .form-style-5 įvestis [type = "url"], .form-style-5 textarea, .form-style-5 pasirinkite font-family: Georgia, "Times New Roman", Times , serif; fonas: rgba (255,255,255, .1); siena: nėra; pasienio spindulys: 4px; šrifto dydis: 16px; marža: 0; kontūras: 0; paminkštinimas: 7px; plotis: 100%; dėžutės dydžio: rėmelis; -webkit-box-dydis: rėmelis; -moz-box-dydis: rėmelis; fono spalva: # e8eeef; spalva: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) įdėklas; dėžutės šešėlis: 0 1px 0 rgba (0,0,0,0.03) įdėklas; paraštės apačioje: 30px;  .form-style-5 įvestis [type = "text"]: fokusavimas, .form-style-5 įvestis [type = "date"]: fokusavimas, .form-style-5 įvestis [type = "datetime"]: fokusavimas, .form-style-5 įvestis [type = "email"]: fokusavimas, .form-style-5 įvestis [type = "number"]: fokusavimas, .form-style-5 įvestis [type = "search"] : fokusavimas, .form-style-5 įvestis [type = "time"]: fokusavimas, .form-style-5 įvestis [type = "url"]: fokusavimas, .form-style-5 textarea: focus, .form- style-5 pasirinkite: focus background: # d2d9dd;  .form-style-5 pasirinkite -webkit-looks: menulist-button; aukštis: 35px;  .form-style-5 .number background: # 1abc9c; spalva: #fff; aukštis: 30px; plotis: 30px; ekranas: inline-block; šrifto dydis: 0.8em; paraštė dešinėje: 4px; linijos aukštis: 30px; teksto derinimas: centras; teksto šešėlis: 0 1px 0 rgba (255,255,255,0,2); pasienio spindulys: 15px 15px 15px 0px;  .form-style-5 įvestis [type = "Submit"], .form-style-5 įvestis [type = "button"] position: suhte; ekranas: blokas; pagalvėlė: 19px 39px 18px 39px; spalva: #FFF; paraštė: 0 auto; fonas: # 1abc9c; šrifto dydis: 18px; teksto derinimas: centras; šrifto stilius: normalus; plotis: 100%; siena: 1px kietas # 16a085; sienos plotis: 1px 1px 3px; paraštės apačia: 10px;  .form-style-5 įvestis [type = "Submit"]: hover, .form-style-5 įvestis [type = "button"]: hover background: # 109177;  

Parašykite iššokančiosios logikos logiką

Kai baigsime pratęsimo priekį, dabar parašykime jos veikimo logiką. Kad galėtume, turime pratęsti pridėti darbų elementus ir taip pat juos rodyti iššokančiame lange. Taigi pridėsime mygtuko paspaudimo klausytoją, norėdami pridėti įvesties tekstą kaip užduoties elementą ir puslapio įkėlimo klausytoją, kad būtų rodomi šie elementai.

Toliau pateiktame kode mes naudojame dvi funkcijas - sync.get () ir sinchronizuoti (), kurios yra dalis “chrome.storage“. Mums reikia antrojo, kad išsaugotume užduočių elementus į saugyklą, o pirmasis - juos nuskaityti ir parodyti.

Be to, žemiau yra galutinis kodas “naršyklė_action.js” failą. Kaip matote žemiau, kodas labai komentuojamas, kad padėtų jums suprasti jo tikslą.

 funkcija loadItems () / * Pirmiausia gaukite () duomenis iš saugyklos * / chrome.storage.sync.get (['todo'], funkcija (rezultatas) var todo = [] if (rezultatas && results.todo && results.todo.trim ()! == ") / * Parsuoti ir gauti masyvą, nes jis išsaugomas kaip eilutė * / todo = JSON.parse (results.todo) console.log ('todo.length =' + todo.length) už (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. Įdėkite plėtinį

Baigę rašyti plėtinį, atėjo laikas išbandyti ją naudodami „Google Chrome“ funkciją, kuri leidžia įkelti ne parduotuvių, išpakuotų plėtinių. Bet pirmiausia turite įgalinti kūrėjo režimą naršyklėje: spustelėkite galimybės mygtukas > pasirinkti “Daugiau įrankių” > Plėtiniai, ir tada įjunkite “Kūrėjo režimas“.

Dabar po paieškos juosta matysite daugiau mygtukų. Čia spustelėkite “Krovinys išpakuotas” mygtukas. Jis paprašys katalogo - naršykite ir pasirinkite plėtinio katalogą, ir jis įkels plėtinį. Jei redaguojate arba atnaujinate plėtinio kodą, galite spustelėti įkrovimo mygtuką, jei norite įkelti naujausius pakeitimus.

Mūsų pavyzdyje, pamatysite plėtinio piktogramą šalia profilio piktogramos, nes mūsų mėginio plėtinyje pridėjome naršyklės veiksmą. Šią piktogramą galite spustelėti pridėti ir peržiūrėti darbus mūsų pratęsime, nes tai yra nurodytas veiksmas.

Paskirstykite plėtinį

Nors tai yra lengva įkelti plėtinį „Chrome“ internetinė parduotuvė, procesas yra per ilgas, kad būtų padengtos visos detalės. Trumpai tariant, sukuriate kūrėjo paskyrą, pakuotę savo plėtinį ir pateikiate ją kartu su turinio informacija (pvz., Vardas, piktograma, ekrano kopijos ir tt); kaip nurodyta jo žingsniuose.

Kas toliau? Skaitykite ir koduokite

Kaip galbūt tikėjotės, šios pamokos tikslas - pradėti „Google Chrome“ plėtinį. Bandžiau padengti pagrindines sąvokas; tačiau, jums reikia žinoti daug daugiau už rimtą pratęsimą.

Be to, žemiau yra keletas mano mėgstami ištekliai mokytis plėtoti „Google Chrome“ ir kitų „Chrome“ pagrindu veikiančių naršyklių plėtinius:

1. Visi plėtinių gebėjimai, komponentai ir funkcijos.
2. Komandos „Google Chrome“ pavyzdžių plėtiniai.

Jei išgyvenote šiuos išteklius ir esate pasiruošę tam tikram iššūkiui, pabandykite pridėti toliau pateiktus plėtinius, kuriuos ką tik baigėte kurti:

1. Galimybė ištrinti išsaugotus darbus.
2. Funkcija, rodanti pranešimus, kai baigsite pridėti elementą.

Viskas apie tai, kaip plėtoti pirmąjį populiariausios naršyklės plėtinį. Kokį išplėtimą sukūrėte? Ar susidūrėte su problema? Prašau leiskite man žinoti savo istoriją, parašydamas komentarą toliau arba siųskite man @aksinghnet.

Paskutinis, bet ne mažiau svarbus dalykas, atkreipkite dėmesį, kad „Chrome“ internetinėje parduotuvėje galite išbandyti „Todoizr“ (plėtinį, kurį sukūrėme) ir patikrinti visą jo kodą šiame saugykloje.