TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda Google Chrome -laajennus?

2

Google Chrome on tällä hetkellä suosituin verkkoselain maailmanlaajuisesti lukuisten ominaisuuksiensa ja tietoturvansa vuoksi. Lisäksi Chrome -laajennusten avulla käyttäjät voivat lisätä tai muokata Chromen toimintoja muuttamatta selaimen alkuperäistä koodia. Voit ladata laajennuksia Chrome Web Storesta, jotta voit suorittaa lähes kaikki Chromen toiminnot. Voit kuitenkin kaipaa laajennusta, joka tarjoaa tiettyjä toimintoja, joita tarvitset verkkokaupan laajennuskirjastosta. Onneksi Chromen avulla käyttäjät voivat luoda omia laajennuksia, joita he voivat jakaa muille Chrome -käyttäjille. Tässä artikkelissa kerromme, miten voit luoda Google Chrome -laajennuksen ja julkaista sen Web Storessa.

Aiheeseen liittyviä: Kuinka asentaa ja poistaa laajennuksia Google Chromessa?

Edellytykset

Tässä on Chrome -laajennuksen luomisen perusvaatimukset:

  • Perustiedot verkkokehitystekniikasta – Chrome -laajennus on kuin verkkosivu, joten laajennuksen rakentamiseen tarvitaan HTML-, JavaScript- ja CSS -perustaitoja.
  • Koodieditori – Tarvitset myös yksinkertaisen koodieditorin, kuten Notepad ++ tai Brackets.
  • Chrome Web Storen kehittäjätili – Tätä tarvitaan vain, jos haluat jakaa laajennuksesi muille Chrome -käyttäjille.

Chrome -laajennuksen elementtejä

Kaikissa Chrome -selainlaajennuksissa on oltava seuraavat peruskomponentit:

  • Luettelotiedosto JSON -muodossa "manifest.json".
  • Sisältöskripti.
  • Ponnahdussivu.
  • Tapahtumat -sivu.

Luo hakemisto Chrome -laajennukselle

Ensimmäinen askel on luoda uusi hakemisto (kansio), johon lataat kaikki laajennustiedostot. Joten sinun on luotava uusi kansio tietokoneellesi ja annettava sille haluamasi nimi, tässä tapauksessa "My Sample Ext".

Luo ja tallenna manifestitiedosto

Luettelotiedosto antaa Chromelle yksityiskohtaisia ​​tietoja laajennuksesta, kuten nimen, käyttöoikeudet ja versionumeron.

  • Voit luoda tiedoston avaamalla koodieditorin ja luomalla uuden tiedoston nimeltä "manifest.json".
  • Lisää nyt luettelotiedoston sisältö kuvan mukaisesti ja tallenna tiedosto yllä luomaasi hakemistoon.

Kuinka luoda Google Chrome -laajennus?

Manifest -tiedosto

  • Voit lisätä luettelotiedostoon lisätietoja. Voimme esimerkiksi rekisteröidä ponnahdusikkunan ja kuvakkeen laajennukselle.
  • Paras tapa on tallentaa laajennusten muut elementit, kuten komentosarjat, HTML- ja kuvatiedostot eri kansioihin ja käyttää niihin suhteellista URL -osoitetta.
  • Lisää kuvake ja ponnahdussivu ja tallenna muutokset.

Kuinka luoda Google Chrome -laajennus?

Yksityiskohtainen manifesti

  • Voit myös lisätä käyttöoikeuksia luettelotiedostoon.

Ponnahdusikkunan luominen

Ponnahdussivu on HTML-tiedosto, joka ladataan, kun käyttäjä napsauttaa selaimen toimintoa. Meidän tapauksessamme olemme nimenneet tiedoston "sample.html".

  • Luo uusi tiedosto koodieditorissa ja tallenna tiedosto laajennushakemistoon .html -tiedostotunnisteella.

Kuinka luoda Google Chrome -laajennus?

Ponnahdussivu

  • Koska olet tavallinen HTML -tiedosto, voit lisätä tiedostoon mitä tahansa, mukaan lukien painikkeet, tekstit ja niin edelleen.
  • HTML -tiedosto sisältää viittauksen "sample.js" -skriptiin, joka on taustasivu, joka sisältää Chrome -laajennuksen logiikan.

Ponnahdusikkunan muotoilu

Tässä käytämme .css-tiedostoa laajennuksen ponnahdussivun muotoiluun, voit määrittää useita elementtejä, kuten fonttikoon ja värin, ponnahdusikkunan mitat ja tekstin tasauksen.

  • Tätä varten luo uusi tiedosto ja nimeä se uudelleen .css -tiedostotunnisteella, "sample.css" tapauksellemme. Huomaa, että tämä on tiedosto, johon viitattiin .css -tiedostossa, johon viitattiin yllä olevassa HTML -tiedostossa.
  • Lisää CSS -koodisi kuvan mukaisesti ja tallenna muutokset.

Kuinka luoda Google Chrome -laajennus?

Muotoilun laajennus

Luo sisältöskripti/ taustasivu

Tämä on .js -tiedosto, joka määrittelee laajennuksen takana olevan logiikan. Se määrittää tehtävän/ toiminnot, jotka laajennus suorittaa.

  • Lisää neljä tiedostoa koodieditorissa ja tallenna tiedosto hakemistoon .js -tunnisteella "sample.js".
  • Lisää komentoja, jotka suoritetaan, kun käyttäjä napsauttaa painiketta tai napsauttaa laajennuskuvaketta kuvan mukaisesti.
  • Sinun on myös rekisteröitävä sisältöskripti manifest.json -tiedostoon.

Huomautus: Voit lisätä useita tehtäviä suorittaaksesi tärkeän tehtävän .js -tiedostossa.

Laajennuksen lisääminen Chromeen

Kun luot kaikki neljä tiedostoa ja tallennat ne hakemistoon, olet nyt valmis lataamaan laajennuksesi Chromessa.

  • Avaa Chrome -selain, kirjoita URL -osoite "chrome: // extensions/" avataksesi laajennusten hallintasivun.
  • Aktivoi kehittäjätila kääntämällä sivun oikeassa yläkulmassa olevaa kytkintä.

Kuinka luoda Google Chrome -laajennus?

Kehitystila

  • Napsauta vasemmalla puolella olevaa "Lataa purkamatta" -painiketta ja selaa tiedostojasi ja valitse kansio, johon tallennat tiedostot.
  • Uusi laajennus lisätään luetteloon. Huomaat myös laajennuksesi kuvakkeen osoitepalkin oikealla puolella olevassa työkalupalkissa .

Kuinka luoda Google Chrome -laajennus?

Uusi laajennus

  • Testaa laajennus napsauttamalla kuvaketta avataksesi ponnahdussivun.

Kuinka luoda Google Chrome -laajennus?

Testilaajennus

Käärimistä

Chrome -laajennukset auttavat käyttäjiä lisäämään toimintoja tiettyjen Chromen tehtävien suorittamiseen. Vaikka voit ladata joukon valmiita Chrome -laajennuksia, voit luoda verkkosivustollesi mukautettuja laajennuksia noudattamalla yllä olevia perusvaiheita. Lisäksi voit jakaa laajennuksesi muiden Chrome -käyttäjien kanssa maailmanlaajuisesti Chrome Web Storen kautta, mutta sinun on maksettava kehittäjätilistä tämän saavuttamiseksi.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja