Kuinka tehdä yksinkertainen Chrome-laajennus

Chrome -laajennuksen tekeminen on melko yksinkertainen prosessi. Kun olet valmis, voit käyttää sitä tietokoneellasi parantaaksesi selaimen toimintaa.

Selain vaatii joitakin peruskomponentteja, ennen kuin laajennus voi olla täysin toimintakuntoinen. Käymme läpi kaiken tämän alla, mukaan lukien kuinka saat mukautetun laajennuksen toimimaan Chromessa(Chrome) ilman, että sitä tarvitsee ladata tai jakaa kenenkään muun kanssa.

Monimutkaisen Chrome - laajennuksen rakentaminen on paljon yksityiskohtaisempi prosessi kuin mitä näet alla, mutta yleinen prosessi on sama. Jatka lukemista saadaksesi lisätietoja Chrome - laajennuksen tekemisestä, jonka voit aloittaa käytön jo tänään.

Vinkki(Tip) : Jos haluat nähdä, kuinka mahtava oma laajennuksesi voi olla, tutustu näihin upeisiin Chrome-laajennuksiin(these amazing Chrome extensions) .

Kuinka tehdä Chrome-laajennus

Tämän oppaan avulla voit tehdä yksinkertaisen Chrome -laajennuksen, joka luettelee joitain suosikkisivustoistasi. Se on täysin muokattavissa ja todella helppo päivittää.

Tässä on mitä tehdä:

  • Tee kansio, joka sisältää kaikki tiedostot, jotka muodostavat laajennuksen.
  • Luo tämän laajennuksen vaatimat perustiedostot: manifest.json , popup.html , background.html , styles.css .
  • Avaa popup.html tekstieditorissa ja liitä sitten kaikki seuraavat siihen. Muista tallentaa ne, kun olet valmis.
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

Voit(Feel) vapaasti muokata linkkejä ja linkkitekstiä, tai jos haluat tehdä Chrome - laajennuksesta juuri sellaisen kuin olemme, pidä kaikki ennallaan.

  • Avaa manifest.json tekstieditorissa ja kopioi/liitä seuraava:

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

"manifest_version": 2,
"name": "Suosikkisivustot", ( “name”: “Favorite Sites”,)
"description": "Kaikki suosikkisivustoni.", ( “description”: “All my favorite websites.”,)
"versio": "1.0", ( “version”: “1.0”,)
"kuvakkeet": { ( “icons”: {)
"16": "icon.png",
"32": "icon.png",
"48": "icon.png",
"128": "icon.png"
},

   "background": { 
        "sivu":"background.html" (        “page”:”background.html”)
},

    “browser_action” : {
        “default_icon” : “icon.png”,
        “default_title” : “Suosikkisivustot”, (        “default_title” : “Favorite Sites”,)
        “default_popup”: “popup.html”
    }
}

Tämän koodin syötäviä alueita ovat nimi(name) , kuvaus(description) ja oletusnimi(default_title) .

  • Avaa styles.css ja liitä seuraava koodi. Tämä koristaa ponnahdusvalikon, jotta se on paljon houkuttelevampi katsoa ja entistä helpompi käyttää.

#myUL {
list-style-type: ei mitään; (list-style-type: none;)
   pehmuste: 0; (   padding: 0;)
   marginaali: 0; (   margin: 0;)
   leveys: 300px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  marginaali yläosa: -1px; (  margin-top: -1px;)
  background-color: #f6f6f6;
  täyte: 12px; (  padding: 12px;)
  teksti-koriste: ei mitään; (  text-decoration: none;)
  fonttikoko: 18px; (  font-size: 18px;)
  väri musta; (  color: black;)
  näyttö: lohko; (  display: block;)
  font-family: 'Noto Sans', sans-serif;
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

CSS - tiedostossa on paljon muutoksia . Kokeile näitä vaihtoehtoja, kun olet tehnyt Chrome -laajennuksen ja mukauta sitä mieleiseksesi.

  • Luo(Create) laajennukselle kuvake ja anna sille nimi icon.png . Aseta se Chrome - laajennuskansioosi. Kuten yllä olevasta koodista näet, voit tehdä erillisen kuvakkeen näille kokoille: 16 × 16 pikseliä, 32 × 32 ja niin edelleen.

Vinkki: (Tip: )Googlella on lisätietoja (Google has more information)Chrome - laajennusten luomisesta . On myös muita esimerkkejä ja lisäasetuksia, jotka ylittävät tässä näyttämämme yksinkertaiset vaiheet.

Mukautetun laajennuksen(Custom Extension) lisääminen Chromeen

Nyt kun olet tehnyt Chrome - laajennuksen, on aika lisätä se selaimeen, jotta voit todella käyttää kaikkia juuri tekemiäsi tiedostoja. Muokatun laajennuksen asentamiseen liittyy erilainen toimenpide kuin tavallisen Chrome-laajennuksen asentaminen(how you’d install a normal Chrome extension) .

  • Valitse Chrome-valikosta Lisää työkaluja(More tools ) > Laajennukset(Extensions) . Tai kirjoita osoitepalkkiin chrome://extensions/
  • Valitse Kehittäjätilan(Developer mode) vieressä oleva painike, jos se ei ole jo valittuna. Tämä ottaa käyttöön erikoistilan, jonka avulla voit tuoda omia Chrome - laajennuksiasi.

  • Käytä sivun yläreunassa olevaa Lataa pakatut -painiketta valitaksesi kansio, jonka loit yllä (Load unpacked )vaiheessa 1(Step 1) .

  • Hyväksy(Accept) kehotteet, jos näet ne. Muussa tapauksessa räätälöidyt Chrome - laajennuksesi näkyvät selaimen oikeassa yläkulmassa muiden kanssa.

Chrome-laajennuksen muokkaaminen

Nyt kun Chrome -laajennuksesi on käyttökelpoinen, voit tehdä siitä omannäköisesi muutoksia. 

Styles.css-tiedosto ohjaa laajennuksen ulkoasua, joten voit säätää luettelon yleistä tyyliä ja muuttaa fontin väriä tai tyyppiä. W3Schools on yksi parhaista resursseista oppia kaikista erilaisista asioista, joita voit tehdä CSS :n avulla .

Muokkaa popup.html-tiedostoa, jos haluat muuttaa sivustojen järjestystä tai lisätä sivustoja tai poistaa olemassa olevia. Muista vain säilyttää vain URL -osoite ja nimi. Kaikki muut merkit, kuten <li> ja <html> , ovat pakollisia, eikä niitä pidä muuttaa. W3Schoolsin HTML-opetusohjelma(HTML Tutorial on W3Schools) on hyvä paikka oppia lisää kyseisestä kielestä.



Sari Mäkelä

About the author

Hei! Nimeni on ja olen laitteistohakkeri. Minulla on yli 10 vuoden kokemus tietokoneiden korjaamisesta ja muokkaamisesta. Voin korjata melkein mitä tahansa kannettavista tietokoneista tabletteihin ja älytelevisioihin. Taitojeni avulla pystyn auttamaan asiakkaita ratkaisemaan ongelmansa nopeasti ja tehokkaasti. Blogini on omistettu auttamaan ihmisiä korjaamaan tietokoneita ja laitteitaan oikeilla työkaluilla. Ja Facebook-sivullani jaan vinkkejä, temppuja ja oivalluksia kaikesta tietokoneeseen liittyvästä!


Related posts