Kā izveidot Chrome paplašinājumus no Scratch

Ja vēlaties pievienot vai mainīt dažas funkcijas pārlūkā Google Chrome ir jāizmanto paplašinājums. Lai gan jūs varat lejupielādēt paplašinājumu no Chrome interneta veikala, bet dažreiz jums ir nepieciešama īpaša funkcionalitāte, kuru nevarat atrast nevienā esošā paplašinājumā.

Labā ziņa ir tā, ka jūs varat izveidot savu paplašinājumu, lai pievienotu vai modificētu nepieciešamo funkcionalitāti vai izveidotu jaunu papildinājumu vai lietotni Google Chrome, ko jūs varat vēlāk izplatīt citiem lietotājiem izmantojot Chrome interneta veikalu.

Turpmāk es jums parādīšu vienkāršākais veids, kā izveidot paplašinājumu. Ja jums ir zināšanas par tīmekļa izstrādi (HTML, CSS un JS), jūs justos kā mājās. Ja tā nav, vispirms skatiet šos kanālus apgūt tīmekļa izstrādes pamatus, tad turpiniet zemāk.

Priekšnoteikumi

Pirms sākat lietot šo pamācību, jums ir jāaizpilda šādas prasības.

1. Jums ir jāzina HTML, CSS un JavaScript. [Pārbaudīt resursus]
2. Jums ir jābūt koda redaktors rakstīt paplašinājumu. [Salīdzināt redaktorus]
3. (Pēc izvēles) Ja vēlaties izplatīt paplašinājumu citiem lietotājiem, jums ir jābūt izstrādātāja konts Chrome interneta veikalā. [Izveidot kontu]

Piezīme: Google lūdz jums maksāt nelielu maksu par izstrādātāja konta izveidi Chrome interneta veikalā.

Izveidojiet paplašinājumu

Šajā apmācībā es dalīšos procesa izveidē uzdevumu paplašinājums Google Chrome. Tas būs lietderība (kā parādīts zemāk), lai demonstrētu būtiskas sastāvdaļas un spējas, ko sniedz paplašinājumi.

1. Saņemiet veidni

Google Chrome, tāpat kā jebkura cita platforma, pieprasa to paplašinājumiem ir noteikta struktūra, kas iesācējiem var šķist sarežģīti. Tas ir iemesls, kādēļ tas ir labi, lai iegūtu paplašinājuma veidni, kas nodrošinās visas nepieciešamības.

Extensionizr ir labākais katlu ģenerators hroma paplašinājumiem. Tas ļauj izvēlēties vienu no norādītajiem paplašinājumu tipiem - pārlūka darbība (darbība visām lapām vai pārlūkprogrammai), lapas darbība (darbība pašreizējai lapai), vai slēpts pagarinājums (fona darbība, kas parasti ir paslēpta priekšējā saskarnē).

Turklāt tā nodrošina dažādas precizēšanas iespējas iekļaut / izslēgt nepieciešamos papildinājumus, atļaujas, utt. Jums ir jāizvēlas “Pārlūka darbība” kā paplašinājuma veidu un “Nav fona” kā šīs apmācības fona lapu.

Kad esat pabeidzis, izvēloties iespējas veidot parauga paplašinājumu, nospiediet “Lejupielādējiet to!” poga Extensionizr. Visbeidzot, izvilkt arhīvu (.zip) uz direktoriju un atveriet savu kodu redaktoru, lai sāktu rakstīt paplašinājumu.

2. Kodējiet paplašinājumu

Kad esat lejupielādējis un izvilkis veidni, jūs redzēsiet direktoriju struktūru, kā parādīts tālāk redzamajā ekrānā. Veidne ir kārtīgi organizēta, un jums ir jāzina, ka vissvarīgākais fails ir “manifest.json“.

Apskatīsim arī citus šajā direktorijā esošos failus un mapes:

1. _locales: Tas ir pieradis uzglabāt valodas informāciju daudzvalodu lietotnei.
2. css: Tā darbojas, lai saglabātu trešo pušu front-end bibliotēkas, piemēram, Bootstrap 4.
3. ikonas: Tā ir veidota tā, lai ikonas jūsu paplašinājumam būtu dažādi.
4. js: Tas ir ērts, lai saglabātu trešo pušu back-end bibliotēkas kā jQuery 3.
5. src: Tajā tiek saglabāts faktiskais kods, ko jūs rakstīsiet par paplašinājumu.

manifest.json

Tā satur pamata lietotnes metadati, kas definē jūsu lietotnes datus pārlūkprogrammā. To var rediģēt, lai iestatītu paplašinājuma nosaukumu, aprakstu, tīmekļa vietni, ikonu utt pārlūka darbības un atļaujas.

Piemēram, zemāk redzamajā kodā jūs pamanīsiet, ka mainīju vārdu, aprakstu un sākumlapu_url kopā ar noklusējuma nosaukumu ar pārlūka secību. Turklāt es pievienots “uzglabāšana” saskaņā ar atļaujām mums ir jāglabā dati mūsu paplašinājumā.

 "name": "Todoizr - uzdevumu vienkāršošana", "versija": "0.0.1", "manifest_version": 2, "apraksts": "vienkāršs uzdevums ikvienam.", "homepage_url": " https://go.aksingh.net/todoizr "," ikonas ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" ikonas / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - uzdevumu vienkāršošana "," default_popup ":" src / pārlūka seuraavo / pārlūku_action.html "," atļaujas ": [" uzglabāšana "] 

src pārlūkprogramma

Šajā direktorijā tiks saglabāts kods pārlūkprogrammas darbībai. Mūsu gadījumā mēs koda uznirstošo logu tiek parādīts, noklikšķinot uz paplašinājuma ikonas pārlūkprogrammā. Mūsu paplašinājums ļaus lietotājiem uznirstošajā logā pievienot un apskatīt uzdevumus.

Piezīme: Jūs vienmēr varat pāriet ar kodu, klonējot šo repozitoriju.

Sākotnējais kods no veidnes

Lai gan šai direktorijai bija tikai HTML fails ar visu kodu, es nolēmu to sadalīt trīs atsevišķos failos, lai iegūtu labāku skaidrību. Tas nozīmē, ka HTML fails ir nosaukts “pārlūka_action.html” tagad ir šāds kods:

Turklāt stila fails ir nosaukts “pārlūka_action.css” ir zemāks saturs, kamēr JavaScript fails ir nosaukts “pārlūka_action.js” šobrīd ir tukšs.

 #mainPopup polsterējums: 10px; augstums: 200px; platums: 400px; fontu saime: Helvetica, Ubuntu, Arial, sans-serifs;  h1 font-size: 2em;  

Izveidojiet uznirstošo logu

Pēc sākotnējā projekta izveides vispirms izveidojiet loga saskarni. Man ir izveidot interfeisu ar minimālisma pieeju, parādot virsotnes nosaukumu, kam seko veidlapa, lai pievienotu uzdevumu vienumus, un tālāk redzamo apgabalu, lai skatītu pievienotos vienumus. To iedvesmoja vienkāršais dizains “Veidlapas stils 5“.

Tālāk redzamajā kodā esmu pievienojis divus divus - vienu, lai parādītu veidlapu, lai pievienotu uzdevumu, un otru, lai parādītu jau pievienoto uzdevumu sarakstu. Tas nozīmē, ka jaunais kods ir “pārlūka_action.html” ir šāds:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

Un stila fails “pārlūka_action.css” tagad ir šāds kods:

 @import URL ("./ form_style_5.css"); #mainPopup augstums: 200px; platums: 300px; fontu saime: Helvetica, Ubuntu, Arial, sans-serifs;  / * Uzdevumu veidlapa * / .form-style-5 margin: auto; polsterējums: 0px 20px;  .form-style-5: pirmais bērns fons: nav;  .form-style-5 h1 krāsa: # 308ce3; fonta lielums: 20px; teksta saskaņošana: centrs;  .form-style-5 ievade [type = "text"] platums: auto; peldēt: pa kreisi; margas-apakšas: atiestatīts;  .form-style-5 ievade [type = "button"] fons: # 308ce3; platums: auto; pludiņš: pa labi; polsterējums: 7px; robeža: nav; robežu rādiuss: 4px; fonta lielums: 14px;  .form-style-5 ievade [type = "button"]: lidināties fons: # 3868d5;  / * Uzdevumu saraksts * / .form-style-5: pēdējais bērns augstums: pārmantot; margas apakšā: 5px;  .form-style-5 ul polsterējums: 20px;  .form-style-5 ul li font-size: 14px;  

Visbeidzot, trešās puses stila fails “form_style_5.css” ir zemāks saturs. Tas ir vienkārši ņemts no tās tīmekļa vietnes, lai iedvesmotu mūsu paplašinājuma dizainu.

 / * Form 5 ar Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; polsterējums: 10px 20px; fons: # f4f7f8; starpība: 10px auto; polsterējums: 20px; fons: # f4f7f8; robežu rādiuss: 8px; font-family: Gruzija, "Times New Roman", Times, serif;  .form-style-5 fieldset robeža: nav;  .form-style-5 leģenda font-size: 1.4em; margas apakšā: 10px;  .form-style-5 uzlīme display: block; margas apakšā: 8px;  .form-style-5 ievade [type = "text"], .form-style-5 ievade [type = "date"], .form-style-5 ievade [type = "datetime"], .form-style -5 ievade [type = "email"], .form-style-5 ievade [type = "number"], .form-style-5 ievade [type = "search"], .form-style-5 ievade [tips = "time"], .form-style-5 ievade [type = "url"], .form-style-5 textarea, .form-style-5 izvēlieties font-family: Georgia, "Times New Roman", Times , serifs; fons: rgba (255,255,255, .1); robeža: nav; robežu rādiuss: 4px; fonta lielums: 16px; starpība: 0; kontūra: 0; polsterējums: 7px; platums: 100%; kastes izmēri: robežkaste; -webkit-box-izmēri: robežkaste; -moz-box-izmēri: rāmis; fona krāsa: # e8eeef; krāsa: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) ieliktnis; kastes ēna: 0 1px 0 rgba (0,0,0,0.03) ieliktnis; margas apakšā: 30px;  .form-style-5 ievade [type = "text"]: fokuss, .form-style-5 ievade [type = "date"]: fokuss, .form-style-5 ievade [type = "datetime"]: fokuss, .form-style-5 ievade [type = "email"]: fokuss, .form-style-5 ievade [type = "number"]: fokuss, .form-style-5 ievade [type = "search"] : fokuss, .form-style-5 ievade [type = "time"]: fokuss, .form-style-5 ievade [type = "url"]: fokuss, .form-style-5 textarea: fokuss, .form- style-5 izvēlieties: focus background: # d2d9dd;  .form-style-5 izvēlieties -webkit-megjelenums: menulistu poga; augstums: 35px;  .form-style-5 .numurs fons: # 1abc9c; krāsa: #fff; augstums: 30px; platums: 30px; displejs: inline-bloks; fonta lielums: 0.8em; labās malas: 4px; līnijas augstums: 30px; teksta saskaņošana: centrs; teksta ēna: 0 1px 0 rgba (255,255,255,0,2); robežu rādiuss: 15px 15px 15px 0px;  .form-style-5 ievade [type = "Submit"], .form-style-5 ievade [type = "button"] position: relatīvais; displejs: bloks; polsterējums: 19px 39px 18px 39px; krāsa: #FFF; starpība: 0 auto; fons: # 1abc9c; fonta lielums: 18px; teksta saskaņošana: centrs; fonta stils: normāls; platums: 100%; robeža: 1px cietais # 16a085; robežu platums: 1px 1px 3px; margas apakšā: 10px;  .form-style-5 ievade [type = "Submit"]: hover, .form-style-5 ievade [type = "button"]: lidināties fons: # 109177;  

Uzrakstiet uznirstošās logikas loģiku

Kad mēs esam paveikuši ar paplašinājuma priekšējo galu, tagad rakstīsim tās darbības loģiku. Mums ir vajadzīgs mūsu paplašinājums, lai varētu pievienot uzdevumu vienumus un arī tos parādīt uznirstošajā logā. Tāpēc mēs pievienosim pogu, noklikšķinot uz klausītāja, lai pievienotu ievades tekstu kā uzdevuma vienumu un lapas ielādes klausītāju, lai parādītu šos vienumus.

Tālāk redzamajā kodā mēs izmantosim divas funkcijas - sync.get () un sync.set (), kas ir daļa no “chrome.storage“. Mums ir vajadzīgs otrais, lai saglabātu uzdevumu objektus glabāšanā, un pirmais, lai tos ielādētu un parādītu.

Tas nozīmē, ka zemāk ir gala kods “pārlūka_action.js” failu. Kā redzams zemāk, kods ir ļoti komentēts, lai palīdzētu jums saprast tā mērķi.

 funkcija loadItems () / * Vispirms iegūt () datus no krātuves * / chrome.storage.sync.get (['todo'], funkcija (rezultāts) var todo = [] if (rezultāts && results.todo && results.todo.trim ()! == ") / * Parsēt un iegūt masīvu, jo tas tiek saglabāts kā virkne * / todo = JSON.parse (results.todo) console.log ('todo.length =' + todo.length) par (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. Ievietojiet paplašinājumu

Pēc tam, kad esat pabeidzis paplašinājuma rakstīšanu, ir pienācis laiks to pārbaudīt, izmantojot Google Chrome funkciju, kas piedāvā ielādēt neuzglabātus, neiesaiņotus paplašinājumus. Bet vispirms jums ir iespējojiet izstrādātāja režīmu savā pārlūkprogrammā: noklikšķiniet uz iespējas poga > izvēlēties “Vairāk rīku” > Paplašinājumi, un pēc tam ieslēdziet “Izstrādātāja režīms“.

Tagad meklēšanas joslā būs redzamas vairākas pogas. Šeit noklikšķiniet uz “Slodze ir izsaiņota” poga. Tas lūgs direktoriju - pārlūkojiet un atlasiet paplašinājuma direktoriju, un tas ielādēs paplašinājumu. Ja rediģējat vai atjaunināt paplašinājuma kodu, varat noklikšķināt uz pārlādēšanas poga, lai ielādētu jaunākās izmaiņas.

Mūsu piemērā, jūs redzēsiet paplašinājuma ikonu blakus profila ikonai, jo mūsu izlases paplašinājumā pievienojām pārlūkprogrammas darbību. Jūs varat noklikšķināt uz šīs ikonas uz pievienot un apskatīt uzdevumus mūsu paplašinājumā, jo tā ir konkrētā darbība.

Izplatiet paplašinājumu

Lai gan tas ir viegli augšupielādēt paplašinājumu Chrome interneta veikalā, process ir pārāk ilgs, lai aptvertu visas detaļas. Īsāk sakot, jūs izveidojat izstrādātāja kontu, pakotējat paplašinājumu un pēc tam iesniedzat to kopā ar satura informāciju (piemēram, vārdu, ikonu, ekrānuzņēmumiem utt.); kā norādīts tās soli pa solim.

Kas tālāk? Lasīt un kodu

Kā jūs varētu gaidīt, šīs apmācības mērķis ir sākt darbu ar Google Chrome paplašinājumu. Es esmu mēģinājis aptvert pamatjēdzienus; tomēr, jums ir jāzina daudz vairāk par nopietnu paplašināšanas attīstību.

Tas nozīmē, ka turpmāk ir daži no maniem iecienītākie resursi lai uzzinātu, kā attīstīt Google Chrome un citu pārlūkprogrammu Chromium paplašinājumus:

1. Visas paplašinājumu iespējas, komponenti un funkcijas.
2. Izlases paplašinājumi, ko veic komanda Google Chrome.

Ja esat izmantojis šos resursus un esat gatavs kādam izaicinājumam, mēģiniet pievienot tālāk norādītās iezīmes paplašinājumā, kuru tikko pabeidzāt:

1. Iespēja izdzēst saglabātos uzdevumus.
2. Funkcija, lai parādītu paziņojumus, kad pabeigta vienuma pievienošana.

Tas ir viss, kas nepieciešams, lai attīstītu savu pirmo paplašinājumu populārākajai pārlūkprogrammai. Kādu paplašinājumu jūs izveidojāt? Vai jums radās problēma? Lūdzu, dariet man zināmu savu stāstu, rakstot komentāru zemāk vai ziņojiet man pie @aksinghnet.

Pēdējais, bet ne mazāk svarīgais, ņemiet vērā, ka varat izmēģināt Todoizr (izveidoto paplašinājumu) Chrome interneta veikalā un pārbaudīt tā pilnu kodu šajā repozitorijā..