Getting started
Manifest V3 käynnistyy pian! Katso lisätietoja MV3: n dokumentaatiosta ja harkitse laajennuksen kehittämistä MV3: ssa.
laajennukset on tehty erilaisista, mutta yhtenäisistä komponenteista. Komponentit voivat sisältää tausta skriptejä, sisältöä skriptejä, asetukset-sivu, KÄYTTÖLIITTYMÄN elementit ja eri logiikka tiedostoja. Laajennuskomponentit luodaan web development technologies: HTML, CSS ja JavaScript. Laajennus ” s komponentit riippuvat sen toimivuudesta eikä välttämättä vaadi kaikkia vaihtoehtoja.,
Tämä opetusohjelma on rakentaa laajennus, jonka avulla käyttäjä voi muuttaa taustan väriä tahansa sivulla developer.chrome.com. Sitä käyttävät monet ydinosat antaa johdanto osoitus niiden suhteita.
aloita luomalla uusi hakemisto, joka pitää laajennuksen”s-tiedostoja.
täydennetty laajennus on ladattavissa täältä.
Luo manifesti #
Laajennukset aloittaa niiden ilmeinen. Luo tiedosto nimeltä manifest.json ja siihen on sisällyttävä seuraava koodi, tai lataa tiedosto tästä.,
hakemiston tilalla manifest-tiedosto voidaan lisätä laajennus kehittäjä tilassa sen nykyisessä tilassa.
- Avaa Laajennus Hallinta-sivulle siirtymällä
chrome://extensions.- Laajennus Hallinta-sivun voi avata myös klikkaamalla Chrome-valikko, leijuu Lisää Työkalut ja valitse sitten Laajennukset.
- ota Kehittäjätila käyttöön klikkaamalla kehittäjätilan vieressä olevaa vaihtokytkintä.
- napsauta Lataa pakkaamattomana-painiketta ja valitse laajennushakemisto.
Ta-da!, Laajennus on asennettu onnistuneesti. Koska manifestissa ei ollut kuvakkeita, laajennukselle luodaan generic toolbar-kuvake.
Lisää ohje #
Vaikka laajennus on asennettu, se ei ole opetusta. Käyttöön tausta-skripti luo tiedoston nimeltä background.js, tai lataamalla sen täältä, ja sijoittamalla se sisällä laajennus hakemistoon.
taustakomentosarjat ja monet muut tärkeät osat on kirjattava manifestiin., Taustan komentosarjan rekisteröiminen manifestissa kertoo laajennuksen, mihin tiedostoon viitataan, ja miten kyseisen tiedoston pitäisi käyttäytyä.
laajennus on nyt tietoinen siitä, että se sisältää ei-jatkuva tausta käsikirjoitus ja skannaa rekisteröity tiedosto tärkeitä tapahtumia se tarvitsee kuunnella.
Tämä laajennus tarvitsee tietoa jatkuva muuttuja heti, kun se on asennettu. Aloita sisällyttämällä runtime.onInstalled: n kuuntelutapahtuma Tausta-käsikirjoitukseen. onInstalled kuulijan sisällä laajennus asettaa arvon tallennusrajapinnan avulla., Tämä mahdollistaa useiden laajennusosien pääsyn kyseiseen arvoon ja päivittää sitä.
Useimmat APIs, mukaan lukien varastointi API, on oltava rekisteröity "permissions" kentän manifesti tiedostotunniste käyttää niitä.
siirry takaisin laajennuksen hallintasivulle ja napsauta Reload-linkkiä. Uusi kenttä, tarkastaa näkymiä, tulee saataville sininen linkki, taustasivu.,
Klikkaa linkkiä nähdäksesi tausta kirjoitus”s-konsoli loki, ”The color is green.”,
Käyttöön käyttöliittymä #
Laajennukset voi olla monia muotoja käyttöliittymä, mutta tämä yksi on käyttää popup. Luo ja lisää hakemistoon tiedosto nimeltä popup.html tai lataa se täältä. Tämä laajennus käyttää painiketta muuttaa taustaväri.
Kuten tausta, kirjoitus, tämä tiedosto pitää olla nimetty popup ilmetä alle page_action.,
Nimitys työkalurivin kuvakkeet mukana on myös alle page_action default_icons kenttä. Lataa Kuvat kansio tästä, pura se, ja aseta se laajennus ” s hakemistoon. Päivitä manifesti niin laajennus osaa käyttää kuvia.
laajennukset näyttävät kuvia myös laajennuksen hallintasivulla, käyttöoikeusvaroituksessa ja faviconissa. Nämä kuvat on merkitty manifestiin icons.,
Jos laajennus Ladataan tässä vaiheessa uudelleen, Siihen sisältyy harmaasävykuvake, mutta siinä ei ole toiminnallisuuseroja. Koska page_action on ilmoitettu ilmeinen, se on tiedostotunniste kertoa selain, kun käyttäjä voi olla vuorovaikutuksessa popup.html.
Lisää julistettu sääntöjen taustalla script declarativeContent API sisällä runtime.onInstalled kuuntelija tapahtuma.
laajennus tarvitsee luvan käyttää declarativeContent API sen ilmetä.,
selain näyttää nyt täysi-väri-sivun toimet-kuvaketta selaimen työkalurivin, kun käyttäjät siirtyä URL-osoitteeseen, joka sisältää "developer.chrome.com". Kun kuvake on täysvärinen, käyttäjät voivat klikata sitä nähdäksesi ponnahdusikkunan.html.
popup UI: n viimeinen vaihe on värin lisääminen nappiin. Luo ja lisää tiedosto nimeltä https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js kanssa seuraava koodi laajennus hakemistoon, tai ladata täältä.
Tämä koodi tarttuu painiketta popup.html ja pyyntöjä väri arvo varastointi., Sen jälkeen se käyttää väriä napin taustana. Sisältää script-tagilla https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js vuonna popup.html.
Lataa laajennus tarkastella vihreää painiketta.
Kerros logiikka #
– laajennus nyt tietää popup pitäisi olla käyttäjien käytettävissä developer.chrome.com ja näyttää värillinen painike, mutta tarvitsee logiikkaa edelleen käyttäjän toimia. Päivitä https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js sisältävät seuraavan koodin.,
päivitetty koodin lisää onclick tapahtuma-painiketta, joka laukaisee programatically pistetään sisällön käsikirjoituksen. Tämä muuttaa sivun taustavärin samanväriseksi kuin painike. Ohjelmallisen injektion avulla voidaan käyttää käyttäjän laskuttamia sisältökomentosarjoja sen sijaan, että automaattisesti asetettaisiin ei-toivottua koodia verkkosivuille.
ilmeinen tarvitset activeTab lupaa sallia tiedostotunniste käyttää väliaikaisesti tabs API. Näin laajennus voi soittaa tabs.executeScript.,
laajennus on nyt täysin toimiva! Lataa laajennus uudelleen, päivitä tämä sivu, avaa ponnahdusikkuna ja napsauta painiketta muuttaaksesi sen vihreäksi! Jotkut käyttäjät saattavat kuitenkin haluta vaihtaa taustan eri väriseksi.
anna käyttäjille vaihtoehtoja #
laajennus sallii tällä hetkellä vain käyttäjien vaihtaa taustan vihreäksi. Myös asetukset-sivu antaa käyttäjille enemmän valtaa laajennus”s toiminnallisuutta, edelleen muokkaamalla niiden selaamista.,
aloita luomalla hakemistoon tiedosto nimeltä options.html ja sisällytä seuraava koodi, tai lataa se täältä.
rekisteröi Sitten valinnat-sivun luettelossa,
Lataa laajennus ja valitse TIEDOT.
Selaa tiedot-sivulla ja valitse Laajennus valinnat, jos haluat nähdä asetukset-sivulla, vaikka se näyttää tällä hetkellä tyhjä.
Viimeinen vaihe on lisätä vaihtoehtoja logiikkaa., Luo tiedosto nimeltä options.js laajennus hakemistoon seuraava koodi tai ladata sen täältä.
Neljä värivaihtoehtoa toimitetaan sitten painikkeina options-sivulla onclick-tapahtuman kuuntelijoilla. Kun käyttäjä napsauttaa painiketta, se päivittää väriarvo laajennuksen ” s global storage. Koska kaikki laajennukset ” s-tiedostot vetävät väritiedot globaalista tallennustilasta, muita arvoja ei tarvitse päivittää.
Onneksi olkoon! Hakemistossa on nyt täysin toimiva, joskin pelkistetty Chrome-laajennus.
Mitä ” s next?,
- Chrome Laajennus Yleiskatsaus varmuuskopioi hieman, ja täyttää paljon yksityiskohtia Laajennuksia arkkitehtuuri yleensä, ja joitakin erityisiä käsitteitä kehittäjät haluavat olla perehtynyt.
- Tutustu vianetsintäpidennyksiin käytettävissä oleviin vaihtoehtoihin vianetsintätutoriaalissa.
- Chrome-laajennuksilla on pääsy tehokkaisiin APIs-laitteisiin sekä sen yli, mitä”s on saatavilla avoimella verkossa. Chrome.* APIs-dokumentaatio kulkee jokaisen API: n läpi.
- kehittäjä”s-opas on kymmeniä muita linkkejä kappaletta asiakirjat advanced tiedostotunnistetta luomiseen.,