Chrome'i laienduse loomine

Selles artiklis õpetan teile, kuidas Chrome'i laiendust ise teha. Lähtun sellest õppetundidest, luues Chrome'i laienduse TalkToMe, mis aitab vaegnägijaid veebisaidi sisu lugedes ja teistele veebilehtedele navigeerides.

Käsitlen teie laienduse seadistamise põhitõdesid, sealhulgas:

  • Failide seadistamine seadistamiseks
  • Selle ettevalmistamine Chrome'i poodi paigutamiseks
Ma ei käsitle, kuidas hallata helifunktsioone, näiteks mikrofonilubade haldamist. Seda on selles artiklis käsitlenud mu sõber Palash ja see kasutab näiteks ka TalkToMe laiendust.

Failide seadistamine seadistamiseks

Kõigepealt minge oma brauseris saidile chrome: // extensions või klõpsake lihtsalt Chrome'i menüüs valikuid „Rohkem tööriistu” ja „Laiendused”. See peaks viima teid laienduste haldamise lehele, kus saate sisse lülitada arendajarežiimi (see peaks olema paremas ülanurgas).

Seejärel peate manifest.jsonoma laienduse jaoks tegema uue faili. See fail annab teie laienduse toimimiseks olulist teavet, näiteks õigused ja skriptifailid, millega oma projekti linkite. Nii peaks teie manifesti sisu välja nägema:

{ "name": "Chrome Extension Example", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2}

Kataloogi laiendushalduse lehele üleslaadimiseks klõpsake nuppu „Laadi pakkimata” ja valige oma kataloog. See seob teie failid veebipõhise kasutajaliidesega.

Teine oluline fail, mille peate konfigureerima, on see background.js, mis on teie projekti taustskript.

Taustskripti näidisel on seda tüüpi struktuur:

chrome.runtime.onInstalled.addListener(function() { // add an action here});

See töötab alati, kui laiendus on sisse lülitatud, ja see on kasulik erinevate sündmuste, näiteks klaviatuurivajutuste kuulamiseks või erinevatele lehtedele navigeerimiseks.

Teil võib olla isegi mitu taustskripti. Kõigepealt peate lihtsalt kõik need manifestifailis registreerima. Selleks struktureerige lihtsalt manifest.jsselline, nii näeb välja meie laienduse manifestifail:

{ "name": "Chrome Extension Example", ...
 "background": { "scripts": [ "js/es6-promise.auto.min.js", "js/defaults.js", "js/speech.js", "js/document.js", "js/events.js", "js/stt.js", "js/listen.js" ], "persistent": false }}

Nüüd vajate faili mitte ainult laienduse funktsiooni jaoks, vaid ka kasutajaliidese jaoks. Selleks tehke fail nimega popup.html. Hüpikaken on väike aken, mis kuvatakse pärast laienduse ikooni klõpsamist. Näiteks on siin küpsiste halduri Firefoxi laienduse hüpikaken.

popup.htmlFaili võib olla üsna lihtne. Allpool on mõned koodid ühe nupuga hüpikakna loomiseks. See on sama lihtne kui avamis- ja sulgemisnupu siltide lisamine dokumendi kehasse ja mõned stiilireeglid.

    button { height: 30px; width: 30px; outline: none; }  ;    

Muidugi popup.htmlon meie laienduse koodil palju rohkem komponente kui see. Lisage julgelt rohkem nuppe, stiililehti ja kõike muud, mis teie laienduse ideele sobib.

Aeg hüpikakoodi ja ikooni konfigureerimiseks. Ikooni jaoks peate siiski koodi lisama kahte kohta, "default_icon" ja "ikoonid". Atribuuti default_icon kasutatakse tööriistariba ikoonide jaoks ja ikoone piltide jaoks, mida kuvatakse lehel Laienduse haldamine.

Minge tagasi manifest.jsonja lisage järgmised koodiread, asendades vaikimisi ikooni pilditeed oma piltidega. Samuti saate samad pildid lisada nii „default_icon” kui ka „ikoonide” jaoks. Ja te ei pea sisestama samade mõõtmetega pilte nagu allpool määratletud. Näiteks kui teil on ainult pilte, mille suurus on 16 x 16 ja 48 x 48, kustutage julgelt kaks ülejäänud rida, mis määravad 32 ja 128 pikslit.

{ "name": "Chrome Extension Example", ...
 "page_action": { "default_popup": "popup.html", "default_icon": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" } }, "icons": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" }}

Seega on need failid, mis on olulised kroomitud laienduse loomisel:

  • manifestifail,
  • taustskriptid ja
  • hüpikfail

Mõned muud failid, mida võiksite konfigureerida, on:

  • options.html ja
  • options.js

options.jspakub teie kasutajatele laienduse kasutamisel laiemat valikut. See hoolitseb selle eest, kuidas teie suvandite leht välja näeb (see on väga sarnane popup.html), samal ajal options.jssaab see funktsionaalsusega hakkama.

Need failid on valikulised, kuid kui otsustate need lisada, ärge unustage options.htmlmanifestis seadistada ja linkida options.jsfail, lisades <; / script> otse enne lõppevat HTML-märgendit.

{ "name": "Chrome Extension Example", ... "options_page": "options.html"}

Laienduse toimimise nägemiseks salvestage kõik oma failid ja klõpsake lehel Laienduste haldamine nuppu „Laadi uuesti”. Tööriistaribal peaksite nägema oma ikooni. Valikute lehe vaatamiseks võite klõpsata ka laienduse all nupul „Üksikasjad” ja kerida allapoole, kus on kirjas „Laienduse valikud”.

Oma projekti avaldamine veebipoes

Nii et olete oma laienduse välja töötanud ja testinud. Nüüd peate selle levitama!

Projekti üleslaadimise alustamiseks teisendage see kõigepealt .zip-failiks. Fail peaks faili sisaldama vähemalt manifest.json. Seejärel veenduge, et teil oleks arendajakonto, külastades Chrome'i veebipoe arendajate juhtpaneeli.

Klõpsake nuppu „Lisa uus üksus” ja see peaks laskma teil oma .zipfaili sinna üles laadida . Kui te ei soovi oma rakenduse eest makseid registreerida, võite maksesüsteemi seadistamise sammu vahele jätta. Kui maksate projekti veebipoodi, peate maksma 5-dollarise ühekordse arendaja tasu.

Ärge unustage lisada ka laienduse üksikasjalikku kirjeldust ja pilte, et potentsiaalsed kasutajad teaksid täpselt, mida teie projekt teeb!

Kui see kõik on lõpule jõudnud, saate rakenduse ID ja OAuthi märgi. Rakenduse ID-d kasutatakse Google API-le päringute esitamiseks, OAuthi märki aga veebipoe maksete tegemiseks.

Palju õnne, olete nüüd oma laienduse avaldanud! ?

Kui teile see postitus meeldis, vaadake seda järgmist artiklit. Süveneme põhjalikumalt oma Chrome'i laienduse helifunktsioonide konfigureerimisse, nagu tegime TalkToMe puhul.