Chrome -verkkolaajennus - aiempaa koodauskokemusta ei tarvita: 6 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 08:59

Chrome -laajennukset ovat pieniä ohjelmia, jotka on suunniteltu parantamaan käyttäjien selailukokemusta. Lisätietoja chrome -laajennuksista on osoitteessa

Chrome Web -laajennuksen luominen edellyttää koodausta, joten on erittäin hyödyllistä tarkistaa HTML, JavaScript ja CSS alla olevalla verkkosivustolla:

www.w3schools.com/default.asp (w3 -koulut ovat hyvä verkkosivusto resurssien koodaamiseen)

Etkö tiedä miten koodata? Älä huoli, tämä opetusohjelma auttaa sinua tiellä.

Parasta Chrome -laajennuksissa on, että niitä voidaan muokata. Se ei ole vain yksi tietty asia, joka voidaan tehdä, joten ole luova.

Tarvikkeet

Tarvittavat tarvikkeet ovat alla:

• Tietokone, jossa on tekstieditori (käytän Notepadia)
• Google Chrome

Ja siinä kaikki!

Vaihe 1: Luo hakemisto

Luo ensin kansio, johon mahtuu kaikki tiedostot, ja anna sille nimi "laajennus". Nimen voi halutessaan muuttaa myöhemmin.

Vaihe 2: Luo manifestitiedosto ja koodaa se

Luettelotiedosto on erittäin tärkeä osa laajennusta. Se kertoo laajennukselle tarkalleen, mitä tehdä ja olla. Luettelotiedostot on muotoiltu JSON -muodossa. Ensimmäinen askel on avata tekstieditori ja tallentaa uusi tiedosto nimellä manifest.json.

Kirjoita seuraavaksi alla oleva komentosarja:

{

"name": "First Extension", "version": "1.0", "description": "Voin koodata laajennuksen", "manifest_version": 2, "browser_action": {"default_title": "Ensimmäinen laajennus"}}

Muista pilkut arvojen jälkeen!

Kun tämä on kirjoitettu, tallenna luettelotiedosto ja siirry chrome: // -laajennuksiin (Chromea tulee käyttää selaimena tähän). Kun olet chrome: // -laajennuksissa, ota kehittäjätila käyttöön. Paina sen jälkeen Load unpacked -painiketta ja valitse laajennuskansio.

rumpurulla kiitos …

Jee! Se on laajennus, paitsi… sen tylsä. Se ei kirjaimellisesti tee mitään tällä hetkellä, mutta pian se on erittäin siistiä.

Vaihe 3: Luo kuvakkeet ja päivitä luettelo

Yksi verkkosivusto, joka toimii hyvin kuvakkeiden piirtämiseen, on https://www.piskelapp.com/. Käytettävissä on myös muita piirustusohjelmia. Kuvakkeiden tulee olla neliömäisiä. Tässä projektissa käytetään kuvakkeita 16x16, 32x32, 48x48 ja 128x128. Kun kuvake on tehty, luo laajennuskansioon kansio nimeltä "kuvat" ja aseta kuvake kyseiseen kansioon. Kuva saattaa olla hyvä nimetä sen koon mukaan. Esimerkiksi 'icon32.png'. Uusi koodi on alla:

{

"name": "First Extension", "version": "1.0", "description": "Voin koodata laajennuksen", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images/icon16-p.webp

Viittaus luettelon koodiin on osoitteessa

Vaihe 4: Lisää ponnahdusikkuna

Tämä laajennus sisältää ponnahdusikkunan. Ponnahdusikkuna on HTML (Hypertext Markup Language) -tiedosto, joten on hyvä oppia ensin HTML: n, CSS: n ja JavaScriptin perusteet.

Tallenna asiakirja ensin popup.html -tiedostona laajennuskansioon.

Muokkaa seuraavaksi luettelotiedostoa niin, että se näyttää popup.html, kun sitä napsautetaan. Uusi koodi on alla:

{

"name": "First Extension", "version": "1.0", "description": "Voin koodata laajennuksen", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images/icon16-p.webp

Älä unohda pilkkua!

Jos seuraava HTML -koodi lisätään popup.html -tiedostoon, siinä näkyy "Hello World", kun sitä napsautetaan.

Hei maailma

Vaihe 5: Tee siitä hyvän näköinen ja interaktiivinen

Jos HTML -perusrivi kirjoitetaan, se saa minimiinsä. Jos CSS (Cascading Style Sheets) lisätään, se näyttää viileämmältä, ja jos JavaScript lisätään, se voi olla vuorovaikutteisempi. Tässä opetusohjelmassa ei käsitellä yksityiskohtaisesti HTML-, JavaScript- ja CSS -selityksiä, mutta verkossa on runsaasti resursseja. Alla on yksinkertaisen Hello World -ohjelman koodi ja sitten värikkäämpi ohjelma:

Hei maailma

Hei maailma

#hello {background-color: #000000; väri: #ff0000; reuna: 8px alku #86a3b2; raja-säde: 50 kuvapistettä; muuntaa: kiertää (57 astetta); pehmuste: 10px; user-select: ei mitään; kohdistin: hiusristikko; siirtyminen: muunnos 2s; } #hello: hover {transform: rotate (-417deg); }

Tämä toinen esimerkki voi olla hyvin hämmentävä aloittelijalle. Mutta tämän tarkoituksena oli näyttää sinulle, kuinka tärkeä CSS on ohjelmalle/laajennukselle. Nyt olisi hyvä hetki pitää tauko ja oppia HTML5 -koodaus ja käyttää kehittäjää.chrome.com. Se voi viedä jonkin aikaa, mutta suuri laajennus voidaan tehdä.

Vaihe 6: Julkaise se Chrome Web Storessa

Jos joku on tehnyt todella suuren laajennuksen ja haluaa jakaa sen maailman kanssa, hän voi julkaista sen. Se on loppujen lopuksi pidennyksen tarkoitus. Tämä opetusohjelma yritti vain selittää luettelotiedoston ja sen käytön, ja siinä oli vain "Hello World" -ohjelma.

Ensimmäinen asia, jonka haluat tehdä laajennuksen julkistamiseksi, on tehdä laajennuskansio zip -tiedostoksi. Toinen asia on siirtyä osoitteeseen https://chrome.google.com/webstore/category/extensions ja kirjautua Google -tilille. Napsauta sitten asetusten rataspainiketta ja napsauta sitten "kehittäjien hallintapaneeli". Lataa zip -tiedosto painamalla Uusi kohde -painiketta. Kun olet siellä, sinun on muokattava myymälän tietoja, yksityisyyttä ja hinnoittelua. Laajennus voidaan julkaista helposti, jos se lähetetään tarkistettavaksi.

Nyt kun laajennus on valmis, jatka koodia!