Chrome-laajennusten luominen Scratchista

Jos haluat lisätä tai muokata joitakin toimintoja Google Chromessa sinun on käytettävä laajennusta. Vaikka voit ladata laajennuksen Chrome-verkkokaupasta, mutta joskus tarvitset tietyn toiminnon, jota et löydä olemassa olevasta laajennuksesta.

Hyvä uutinen on, että voit luoda oman laajennuksesi lisätäksesi tai muokata tarvittavaa toimintoa tai tehdä uuden lisäosan tai sovelluksen Google Chromelle, jonka voit myöhemmin levittää muille käyttäjille Chrome-verkkokaupasta.

Seuraavassa aion näyttää sinulle helpoin tapa luoda laajennus. Jos sinulla on jonkin verran tietoa web-kehityksestä (HTML, CSS ja JS), tunnet olosi kotoisaksi. Jos ei, katsele ensin näitä kanavia oppia web-kehityksen perusteet, jatka sitten alla.

edellytykset

Sinun on täytettävä seuraavat vaatimukset ennen tämän oppaan aloittamista.

1. Sinun täytyy tuntea HTML, CSS ja JavaScript. [Tarkista resurssit]
2. Sinulla on oltava koodieditori kirjoita laajennus. [Vertaa toimittajia]
3. (Valinnainen) Jos haluat jakaa laajennuksesi muille käyttäjille, sinulla on oltava kehittäjän tili Chrome-verkkokaupasta. [Luo tili]

Huomautus: Google pyytää sinua maksamaan pienen maksun kehittäjän tilin luomisesta Chrome-verkkokaupassa.

Luo laajennus

Tässä oppaassa jaan prosessin, jossa luodaan a tehtävien laajennus Google Chromelle. Se tulee olemaan apuohjelma (kuten alla on esitetty), jotta voidaan osoittaa keskeiset osat ja laajennuksille tarjotut kyvyt.

1. Hanki malli

Google Chrome, kuten mikä tahansa muu foorumi, vaatii sen laajennuksilla on asetettu rakenne, joka saattaa tuntua monimutkaiselta aloittelijoille. Siksi on hyvä saada kattilan malli laajennukselle, joka tarjoaa kaikki tarpeet.

Extensionizr on paras generaattori kromi-laajennuksia varten. Sen avulla voit valita jonkin annetuista laajennustyypeistä - selaintoiminto (toiminto kaikille sivuille tai selaimelle), sivutoiminto (toiminto nykyiselle sivulle), tai piilotettu laajennus (taustatoiminto, joka on yleensä piilotettu etupaneeliin).

Lisäksi se tarjoaa erilaisia ​​hienosäätömahdollisuuksia sisältää / sulje pois tarvittavat lisäosat, oikeudet, jne. Sinun täytyy valita “Selaimen toiminta” laajennustyypiksi ja “Ei taustaa” tämän oppaan taustasivuksi.

Kun olet valinnut vaihtoehdot, joilla voit luoda näytteen laajennuksen, paina “Lataa se!” painiketta Extensionizrissä. vihdoin, pura arkisto (.zip) hakemistoon ja avaa koodieditori, kun haluat aloittaa laajennuksen kirjoittamisen.

2. Koodi laajennus

Kun olet ladannut ja poistanut mallin, näet hakemistorakenteen, kuten alla olevassa kuvassa näkyy. Malli on siististi järjestetty, ja sinun on tiedettävä, että tärkein tiedosto on “manifest.json“.

Tutustu myös muihin tämän hakemiston tiedostoihin ja kansioihin:

1. _locales: Sitä käytetään tallentaa kielitietoja monikieliselle sovellukselle.
2. CSS: Se toimii tallentamaan kolmannen osapuolen etupaneelin kirjastoja, kuten Bootstrap 4.
3. kuvakkeet: Se on suunniteltu laajentamaan kuvakkeita eri kokoisina.
4. js: Se on kätevä tallentaa kolmannen osapuolen back-end-kirjastot kuten jQuery 3.
5. src: Se tallentaa todellisen koodin, jonka kirjoitat laajennukselle.

manifest.json

Se sisältää sovelluksen perustiedot, joka määrittää sovelluksen tiedot selaimeen. Voit muokata sitä, jos haluat määrittää laajennuksen nimen, kuvauksen, verkkosivuston, kuvakkeen jne. Mukaan selaimen toiminnot ja oikeudet.

Esimerkiksi alla olevassa koodissa huomaat, että muutin nimen, kuvauksen ja kotisivun_url -asetuksen yhdessä default_title-selaimen kanssa selaimen lisäyksessä. Lisäksi minä lisättyä “varastointi” luvat meidän on tallennettava tiedot laajennuksessamme.

 "name": "Todoizr - tehtävien yksinkertaistaminen", "versio": "0.0.1", "manifest_version": 2, "kuvaus": "Yksinkertainen tehtävä kaikille.", "homepage_url": " https://go.aksingh.net/todoizr "," kuvakkeet ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" kuvakkeet / kuvake128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - tehtävien yksinkertaistaminen "," default_popup ":" src / selain seuraavassa selaimessa seuraavassa selaimessa: n "", "käyttöoikeudet": ["tallennus"] 

src \ browser_action

Tämä hakemisto pitää koodin selaintoiminnassa. Meidän tapauksessamme koodaa ponnahdusikkuna näytetään napsauttamalla laajennuksen kuvaketta selaimessa. Laajennuksemme antaa käyttäjille mahdollisuuden lisätä ja tarkastella tehtäviä kohteita ponnahdusikkunassa.

Huomautus: Voit aina käynnistää koodin napsauttamalla tätä arkistoa.

Alkuperäinen koodi mallista

Vaikka tässä hakemistossa oli vain HTML-tiedosto, jolla oli kaikki koodi, olen päättänyt jakaa sen kolmeen erilliseen tiedostoon selkeyden lisäämiseksi. Sanottu HTML-tiedosto “browser_action.html” nyt on seuraava koodi:

Lisäksi tyylitiedosto on nimetty “browser_action.css” on alla oleva sisältö, kun JavaScript-tiedosto on nimetty “browser_action.js” on nyt tyhjä.

 #mainPopup pehmuste: 10px; korkeus: 200px; leveys: 400px; font-perhe: Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size: 2em;  

Suunnittele ponnahdusikkunan käyttöliittymä

Kun olet määrittänyt alkuperäisen projektin, suunnittele ensin ponnahdusikkunan käyttöliittymä. minulla on perustaa rajapinta minimalistisella lähestymistavalla, näyttää ylhäällä olevan nimen, jota seuraa lomake, johon voit lisätä tehtäviä, ja alla olevan alueen lisätyn kohteen katseluun. Se on saanut inspiraationsa “Lomakkeen tyyli 5“.

Alla olevassa koodissa olen lisännyt kaksi osaa - yhden lomakkeen näyttämiseen, jotta voit lisätä tehtävän, ja toinen, kun haluat näyttää jo lisättyjen tehtävien luettelon. Tämä tarkoittaa, että uusi koodi on “browser_action.html” on seuraava:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

Ja tyylitiedosto “browser_action.css” nyt on seuraava koodi:

 @import url ("./ form_style_5.css"); #mainPopup korkeus: 200px; leveys: 300px; font-perhe: Helvetica, Ubuntu, Arial, sans-serif;  / * Tehtävä-lomake * / .form-style-5 marginaali: auto; pehmuste: 0px 20px;  .form-style-5: ensimmäinen lapsi tausta: ei;  .form-style-5 h1 väri: # 308ce3; kirjasinkoko: 20px; text-align: center;  .form-style-5 input [type = "text"] leveys: auto; float: vasen; marginaali-pohja: unset;  .form-style-5 -tulo [type = "button"] tausta: # 308ce3; leveys: auto; float: oikea; pehmuste: 7px; raja: ei; raja-säde: 4px; fonttikoko: 14px;  .form-style-5 -tulo [type = "button"]: hover background: # 3868d5;  / * Tehtäväluettelo * / .form-style-5: viimeinen lapsi korkeus: peri; marginaalipohja: 5px;  .form-style-5 ul pehmuste: 20px;  .form-style-5 ul li font-size: 14px;  

Lopuksi kolmannen osapuolen tyylitiedosto “form_style_5.css” on alla oleva sisältö. Se on yksinkertaisesti otettu sen verkkosivuilta inspiroida laajennuksemme suunnittelua.

 / * Lomake tyyli 5: Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-leveys: 500px; pehmuste: 10px 20px; tausta: # f4f7f8; marginaali: 10px auto; pehmuste: 20px; tausta: # f4f7f8; raja-säde: 8px; font-family: Georgia, "Times New Roman", Times, serif;  .form-style-5 -kenttälaite border: none;  .form-style-5 legenda font-size: 1.4em; marginaalipohja: 10px;  .form-style-5 etiketti display: block; marginaalin pohja: 8px;  .form-style-5 -tulo [type = "text"], .form-style-5 -tulo [type = "date"], .form-style-5 -tulo [type = "datetime"], .form-style -5-tulo [type = "email"], .form-style-5 -tulo [type = "numero"], .form-style-5 -tulo [type = "search"], .form-style-5 -tulo [tyyppi = "time"], .form-style-5 input [type = "url"], .form-style-5 textarea, .form-style-5 valitse font-family: Georgia, "Times New Roman", Times , serif; tausta: rgba (255,255,255, .1); raja: ei; raja-säde: 4px; kirjasinkoko: 16px; marginaali: 0; ääriviivat: 0; pehmuste: 7px; leveys: 100%; laatikon koko: raja-laatikko; -webkit-box-sizing: raja-laatikko; -moz-box-mitoitus: raja-laatikko; taustaväri: # e8eeef; color: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) inset; laatikko-varjo: 0 1px 0 rgba (0,0,0,0.03) inset; marginaalipohja: 30px;  .form-style-5 -tulo [type = "text"]: tarkennus, .form-style-5 -tulo [type = "date"]: tarkennus, .form-style-5 -tulo [type = "datetime"]: tarkennus, .form-style-5 -tulo [type = "email"]: tarkennus, .form-style-5 -tulo [type = "numero"]: tarkennus, .form-style-5 -tulo [type = "search"] : tarkennus, .form-style-5 -tulo [type = "time"]: tarkennus, .form-style-5 -tulo [type = "url"]: tarkennus, .form-style-5 textarea: focus, .form- style-5 valitse: focus background: # d2d9dd;  .form-style-5 valitse -webkit-ulkonäkö: menulistipainike; korkeus: 35px;  .form-style-5 .numero tausta: # 1abc9c; väri: #fff; korkeus: 30px; leveys: 30px; näyttö: inline-block; kirjasinkoko: 0,8em; marginaali-oikea: 4px; linjan korkeus: 30px; text-align: center; teksti-varjo: 0 1px 0 rgba (255,255,255,0,2); raja-säde: 15px 15px 15px 0px;  .form-style-5 input [type = "Lähetä"], .form-style-5 sisääntulo [type = "painike"] sijainti: suhteellinen; näyttö: lohko; pehmuste: 19px 39px 18px 39px; väri: #FFF; marginaali: 0 auto; tausta: # 1abc9c; kirjasinkoko: 18px; text-align: center; font-style: normaali; leveys: 100%; raja: 1px kiinteä # 16a085; raja-leveys: 1px 1px 3px; marginaalipohja: 10px;  .form-style-5 -tulo [type = "Submit"]: hover, .form-style-5 sisääntulo [type = "button"]: hover background: # 109177;  

Kirjoita ponnahdusikkunan logiikka

Kun olemme tehneet laajennuksen etupäähän, kirjoitetaan nyt sen toiminnan logiikka. Tarvitsemme laajennuksen, jotta voimme lisää tehtäviä ja myös näyttää ne ponnahdusikkunassa. Niinpä lisäämme painikkeen napsautuksen kuuntelijan lisätäksesi tekstinsyötön tehtävänä ja sivun latauksen kuuntelija, joka näyttää ne kohteet.

Alla olevassa koodissa käytämme kahta toimintoa - sync.get () ja sync.set (), jotka ovat osa “chrome.storage“. Tarvitsemme toisen, jonka tehtävänä on tallentaa tehtävät tallennukseen ja ensimmäinen niistä, joka palauttaa ne ja näyttää ne.

Tämä tarkoittaa, että alla on lopullinen koodi “browser_action.js” tiedosto. Kuten alla on nähtävissä, koodi on erittäin kommentoitu auttamaan sinua ymmärtämään sen tarkoitusta.

 toiminto loadItems () / * Ensin saa () tiedot tallennustilasta * / chrome.storage.sync.get (['todo'], toiminto (tulos) var todo = [] if (tulos && results.todo && results.todo.trim ()! == ") / * Parse ja hanki taulukko, koska se tallennetaan merkkijonona * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) varten (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. Lataa laajennus

Kun olet kirjoittanut laajennuksen, on aika testata se Google Chromen ominaisuuden avulla, joka tarjoaa ladattavien laajennettujen pakkausten lataamisen. Mutta ensin sinun täytyy ota käyttöön kehitystila selaimessasi: napsauta vaihtoehtoja nappi > valita “Lisää työkaluja” > laajennukset, ja kytke sitten päälle “kehittäjätila“.

Nyt näet lisää painikkeita hakupalkin alla. Napsauta tätä “Kuorma puretaan” painiketta. Se pyytää hakemistoa - selaa ja valitse laajennuksen hakemisto, ja se lataa laajennuksen. Jos muokkaat tai päivität laajennuksesi koodia, voit napsauttaa ladata uusimmat muutokset uudelleen.

Esimerkissä, näet laajennuksen kuvakkeen profiilikuvakkeen vieressä, koska lisättiin näytteen laajennukseen selaintoiminto. Voit napsauttaa tätä kuvaketta lisätä ja tarkastella tehtäviä laajennuksessamme, koska se on määrätty toiminto.

Jakele laajennus

Vaikka se onkin on helppo ladata laajennus Chrome-verkkokauppaan, prosessi on liian pitkä kattamaan kaikki yksityiskohdat. Lyhyesti sanottuna voit luoda kehittäjän tilin, paketin laajennuksesi ja lähettää sen sisällön tietojen (kuten nimen, kuvakkeen, kuvakaappausten jne.) Ohella. kuten se on lueteltu sen vaiheittaisessa oppaassa.

Mitä seuraavaksi? Lue ja koodaa

Kuten olet ehkä odottanut, tämän opetusohjelman tarkoituksena on aloittaa Google Chromen laajennuksen kehittäminen. Olen yrittänyt peittää peruskäsitteet; kuitenkin, sinun täytyy tietää paljon enemmän vakavan laajennuksen kehittämiseen.

Tämä tarkoittaa, että alla on joitakin minun suosikkikustannukset oppia kehittämään Google Chromen ja muiden Chromium-pohjaisten selaimien laajennuksia:

1. Kaikki laajennusten kyvyt, komponentit ja ominaisuudet.
2. Esimerkkilaajennukset Google Chromen takana.

Jos olet käynyt läpi nämä resurssit ja olet valmis haasteeseen, yritä lisätä alla olevia ominaisuuksia juuri valmistuneessa laajennuksessa:

1. Voit poistaa tallennetut tehtävät.
2. Ominaisuus, jolla voit näyttää ilmoituksia, kun olet lisännyt kohteen.

Kyse on ensimmäisen laajennuksen kehittämisestä suosituimmalle selaimelle. Mitä laajennusta olet luonut? Saitko ongelman? Kerro minulle tarinasi kirjoittamalla alla oleva kommentti tai lähettämällä minulle viesti @aksinghnet.

Viimeisenä mutta ei vähäisimpänä, huomaa, että voit kokeilla Todoizria (luomamme laajennuksen) Chrome Web Storesta ja tarkistaa sen täydellisen koodin tässä arkistossa.