Kuidas luua Chrome'i laiendusi Scratchist

Kui soovite mõnede funktsioonide lisamine või muutmine Google Chrome'is peate kasutama laiendit. Kuigi saate Chrome'i veebipoest laienduse alla laadida, on mõnikord vaja konkreetset funktsiooni, mida ei saa olemasolevas laienduses leida.

Hea uudis on see, et saate luua oma laienduse, et lisada või muuta vajalikku funktsionaalsust või teha uus lisandmoodul või rakendus Google Chrome'i jaoks, mida saate hiljem levitada teistele kasutajatele Chrome'i veebipoe kasutamine.

Järgnevalt näitan sulle lihtsam moodus laienduse loomiseks. Kui teil on teadmisi veebiarendusest (HTML, CSS ja JS), tunnete ennast kodus. Kui ei, vaadake kõigepealt neid kanaleid õppida veebiarenduse põhialuseid, seejärel jätkake allpool.

Eeltingimused

Enne selle juhendiga alustamist peate täitma järgmised nõuded.

1. Sa pead olema tuttav HTML, CSS ja JavaScript. [Kontrolli ressursse]
2. Sul peab olema a koodiredaktor laienduse kirjutamiseks. [Võrdle toimetajaid]
3. (Valikuline) Kui soovite oma laiendust teistele kasutajatele levitada, peab teil olema a arendajakonto Chrome'i veebipoes. [Kontot looma]

Märge: Google palub teil maksta väikese tasu arendajakonto loomise eest Chrome'i veebipoes.

Looge laiendus

Selles juhendis jagan ma protsessi a ülesannete laiendamine Google Chrome'i jaoks. See on kasulikkus (nagu allpool näidatud), et näidata olulisi komponente ja laiendustele antud võimeid.

1. Hankige mall

Google Chrome, nagu mis tahes muu platvorm, nõuab selle kasutamist laiendused, millel on määratud struktuur, mis võib algajatele tunduda keerukas. Sellepärast on hea, et laiendusele, mis pakub kõiki vajalikke elemente, on võimalik saada katlakivi.

Extensionizr on parim boilerplate generaator kroomi laienduste jaoks. See võimaldab valida ühe antud laiendustüüpidest - brauseri toiming (toiming kõigi lehekülgede või brauseri jaoks), lehekülje toiming (toiming praeguse lehe jaoks) või peidetud laiendus (tausttoiming, mis on tavaliselt esipaneelil peidetud).

Lisaks pakub see mitmesuguseid peenhäälestusvõimalusi lisada / välistada vajalikud lisandmoodulid, õigused, jne. Sa pead valima “Brauseri tegevus” laienduse tüübina ja “Taust puudub” selle juhendi taustaleheks.

Kui olete valinud valiku laienduse loomise võimalused, vajuta “Laadige see alla!” nuppu Extensionizris. Lõpuks, väljavõtte arhiiv (.zip) kataloogi laienduse kirjutamise alustamiseks avage oma koodiredaktor.

2. Koodige laiendus

Pärast malli allalaadimist ja väljavõtte näete kataloogistruktuuri, nagu on näidatud allpool oleval pildil. Mall on korralikult organiseeritud ja peate teadma, et kõige olulisem fail on “manifest.json“.

Tutvustame ka selle kataloogi teisi faile ja kaustu:

1. _locales: See on harjunud salvestada keeleandmeid mitmekeelse rakenduse jaoks.
2. css: See võimaldab salvestada kolmanda osapoole esikülje raamatukogusid nagu Bootstrap 4.
3. ikoonid: See on mõeldud laienduste ikoonideks erineva suurusega.
4. js: See on mugav salvestada kolmanda osapoole back-end raamatukogud nagu jQuery 3.
5. src: See salvestab tegeliku koodi, mille kirjutate oma laiendusele.

manifest.json

See sisaldab teie rakenduse põhilised metaandmed, mis määratleb teie rakenduse üksikasjad brauserile. Saate seda muuta, et määrata oma laienduse nimi, kirjeldus, veebisait, ikoon jne brauseri toimingud ja õigused.

Näiteks märkate allpool olevas koodis, et ma muutsin nime, kirjeldust ja kodulehte_url koos default_title brauseriga. Pealegi, mina lisatud “ladustamine” õigustega nagu me peame andmeid oma laiendisse salvestama.

 "name": "Todoizr - ülesannete lihtsustatud", "versioon": "0.0.1", "manifest_version": 2, "kirjeldus": "Lihtne teha kõigile.", "homepage_url": " https://go.aksingh.net/todoizr "," ikoonid ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" ikoonid / ikoon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - ülesannete lihtsustatud "," default_popup ":" src / brauseri_action / browser_action.html "," õigused ": [" storage "] 

src brauseriga

See kataloog hoiab brauseri tegevuse koodi. Meie puhul oleme kood hüpikaken kuvatakse laienduse ikooni klõpsamisel brauseris. Meie laiendus võimaldab kasutajatel hüpikaknas ülesandeid lisada ja vaadata.

Märge: Selle hoidla kloonimisega saate alati koodiga hüpata.

Malli algkood

Kuigi sellel kataloogil oli ainult HTML-fail, millel on kogu kood, olen otsustanud selle selguse huvides jagada kolmeks eraldi failiks. See tähendab, et HTML-fail nimega “brauseri_action.html” nüüd on sellel kood:

Pealegi nimetatakse stiilifaili nime “brauseri_action.css” omab alltoodud sisu, kui JavaScript-faili nimi on “brauseri_action.js” on nüüd tühi.

 #mainPopup polster: 10px; kõrgus: 200 px; laius: 400px; font-pere: Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size: 2em;  

Kujundage hüpikakna liides

Pärast esialgse projekti loomist kujundame esmalt hüpikakna liidese. mul on luua minimalistliku lähenemisviisiga liides, näitab üleval olevat nime, millele järgneb vormi ülesannete lisamiseks, ja allpool olevat ala lisatud elementide vaatamiseks. See on inspireeritud lihtsast disainist “Vormi stiil 5“.

Allolevas koodis olen lisanud kaks divs - ühte vormi näitamiseks ülesande lisamiseks ja teine ​​juba lisatud ülesannete nimekirja kuvamiseks. See tähendab, et uus kood on “brauseri_action.html” on järgmine:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

Ja stiilifail “brauseri_action.css” nüüd on sellel kood:

 @import URL ("./ form_style_5.css"); #mainPopup kõrgus: 200 px; laius: 300 px; font-pere: Helvetica, Ubuntu, Arial, sans-serif;  / * Ülesannete vorm * / .form-style-5 marginaal: auto; polsterdus: 0px 20px;  .form-style-5: esimene laps taust: pole;  .form-style-5 h1 color: # 308ce3; fondi suurus: 20px; teksti joondamine: keskus;  .form-style-5 sisend [type = "text"] laius: auto; float: vasakule; margin-bottom: unset;  .form-style-5 sisend [type = "button"] taust: # 308ce3; laius: auto; float: parem; polsterdus: 7px; piir: mitte; raadius: 4x; fondi suurus: 14px;  .form-style-5 sisend [type = "button"]: hover background: # 3868d5;  / * Ülesannete nimekiri * / .form-style-5: last-laps kõrgus: pärida; margin-bottom: 5px;  .form-style-5 ul padding: 20px;  .form-style-5 ul li font-size: 14px;  

Lõpuks, kolmanda osapoole stiilifail “form_style_5.css” on allpool esitatud sisu. See on lihtsalt võetud oma veebisaidilt, et inspireerida meie laienduse kujundust.

 / * Form Style 5 autor Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; polsterdus: 10px 20px; taust: # f4f7f8; marginaal: 10px auto; polsterdus: 20px; taust: # f4f7f8; raadius: 8x; font-pere: Gruusia, Times New Roman, Times, serif;  .form-style-5 fieldset border: none;  .form-style-5 legend font-size: 1.4em; margin-bottom: 10px;  .form-style-5 silt display: block; margin-bottom: 8px;  .form-style-5 sisend [type = "text"], .form-style-5 sisend [type = "date"], .form-style-5 sisend [type = "datetime"], .form-style -5 sisend [type = "email"], .form-style-5 sisend [type = "number"], .form-style-5 sisend [type = "search"], .form-style-5 sisend [tüüp = "time"], .form-style-5 sisend [type = "url"], .form-style-5 textarea, .form-style-5 vali font-family: Georgia, "Times New Roman", Times , serif; taust: rgba (255,255,255, .1); piir: mitte; raadius: 4x; fondi suurus: 16px; varu: 0; ülevaade: 0; polsterdus: 7px; laius: 100%; kastide suurus: piirikast; -webkit-box-sizing: piiri-box; -moz-box-sizing: piirikast; taustavärv: # e8eeef; värv: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) sisend; kasti vari: 0 1px 0 rgba (0,0,0,0.03) sisend; margin-bottom: 30px;  .form-style-5 sisend [type = "text"]: fookus, .form-style-5 sisend [type = "date"]: fookus, .form-style-5 sisend [type = "datetime"]: fookus, .form-style-5 sisend [type = "email"]: fookus, .form-style-5 sisend [type = "number"]: fookus, .form-style-5 sisend [type = "search"] : fookus, .form-style-5 sisend [type = "time"]: fookus, .form-style-5 sisend [type = "url"]: fookus, .form-style-5 textarea: fookus, .form- style-5 valige: focus background: # d2d9dd;  .form-style-5 vali -webkit-välimus: menulist-nupp; kõrgus: 35px;  .form-style-5 .number background: # 1abc9c; värv: #fff; kõrgus: 30 px; laius: 30 px; kuva: inline-block; fondi suurus: 0.8em; marginaal-parem: 4x; rea kõrgus: 30 px; teksti joondamine: keskus; teksti-vari: 0 1px 0 rgba (255,255,255,0,2); raadius: 15px 15 px 15px 0px;  .form-style-5 sisend [type = "Submit"], .form-style-5 sisend [type = "button"] asend: suhteline; kuva: plokk; polsterdus: 19px 39px 18px 39px; värv: #FFF; marginaal: 0 auto; taust: # 1abc9c; fondi suurus: 18px; teksti joondamine: keskus; font-style: normaalne; laius: 100%; piir: 1px tahke # 16a085; piiri laius: 1px 1px 3px; margin-bottom: 10px;  .form-style-5 sisend [type = "Submit"]: hover, .form-style-5 sisend [type = "button"]: hover background: # 109177;  

Kirjutage hüpikakna loogika

Kui oleme laienduse esiosaga teinud, kirjutage nüüd selle töö loogika. Me peame oma laiendust vajama lisage ülesanded ja neid ka kuvama hüpikaknas. Nii lisame nupule klõpsamise kuulaja, et lisada sisendtekst ülesandeks ja lehe laadimise kuulaja nende elementide näitamiseks.

Allolevas koodis kasutame kahte funktsiooni - sync.get () ja sync.set (), mis on osa “chrome.storage“. Me vajame teist, et salvestada ülesannete objektid ladustamisse ja esimene neist neid alla laadida ja näidata.

See tähendab, et allpool on lõplik kood “brauseri_action.js” faili. Nagu allpool näete, on kood väga kommenteeritud, et aidata teil mõista selle eesmärki.

 funktsioon loadItems () / * Kõigepealt saada () andmed mälust * / chrome.storage.sync.get (['todo'], funktsioon (tulemus) var todo = [] if (tulemus && results.todo && results.todo.trim ()! == ") / * Parseerida ja saada massiiv, kuna see salvestatakse stringina * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) jaoks (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. Laadige laiendus

Pärast laienduse kirjutamist on aeg proovida seda Google Chrome'i funktsiooni abil, mis pakub laadimata pakendamata laienduste laadimist. Aga kõigepealt peate lubage arendaja režiim oma brauseris: klõpsake nuppu võimalusi nuppu > valida “Rohkem tööriistu” > Laiendused, ja seejärel lülitage sisse “Arendaja režiim“.

Nüüd näete otsinguriba all rohkem nuppe. Klõpsake siin “Laadige pakk lahti” nuppu. See küsib kataloogi - sirvige ja vali oma laienduse kataloog ning see laadib laienduse. Kui muudate või uuendate oma laienduse koodi, saate klõpsata nupule uuesti laadimise nupp viimaste muudatuste laadimiseks.

Meie näites, näete laienduse ikooni profiili ikooni kõrval, kuna lisasime meie proovilaiendisse brauseri toimingu. Sellele ikoonile klõpsamiseks klõpsake ülesannete lisamine ja vaatamine meie laienduses, kuna see on määratud tegevus.

Jagage laiendit

Kuigi see on laiendit on lihtne üles laadida Chrome'i veebipoes, on protsess liiga pikk, et katta kõik üksikasjad. Lühidalt öeldes loote arendajakonto, pakendate laienduse ja esitate selle koos selle sisu üksikasjadega (nagu nimi, ikoon, ekraanipildid jne); nagu see on toodud samm-sammult juhendis.

Mis edasi? Loe ja kood

Nagu olete oodanud, on selle juhendi eesmärk alustada Google Chrome'i laienduse arendamisega. Olen püüdnud katta põhimõisted; Kuid, sa pead rohkem teadma tõsise laiendamise arendamiseks.

See tähendab, et allpool on mõned minu lemmik-ressursid Google Chrome'i ja teiste Chromiumil põhinevate brauserite laienduste õppimiseks:

1. Kõik laienduste võimed, komponendid ja omadused.
2. Proovi laiendused Google Chrome'i taga olevalt meeskonnalt.

Kui olete neid ressursse läbinud ja olete mõne väljakutse jaoks valmis, proovige lisada allpool omadusi laiendusse, mille olete just lõpetanud:

1. Salvestatud ülesannete kustutamise võimalus.
2. Funktsioon, mis näitab teateid, kui olete objekti lisanud.

See on kõigest kõige populaarsema brauseri esimese laienduse arendamine. Millist laiendust te loote? Kas sattusite probleemi? Palun andke mulle teada oma lugu, kirjutades kommentaar allpool või sõnumsides mind @aksinghnet.

Lõpuks, kuid mitte vähemtähtis, pange tähele, et võite proovida Chrome'i veebipoes Todoizri (meie loodud laiend) ja kontrollida selle täielikku koodi selles hoidlas..