Hogyan készítsünk egyszerű Chrome-bővítményt

A Chrome -bővítmény elkészítése meglehetősen egyszerű folyamat. Ha végzett, használhatja számítógépén a böngésző működésének javítására.

Van néhány alapvető összetevő, amelyekre a böngészőnek szüksége van ahhoz, hogy a bővítmény teljesen működőképes legyen. Az alábbiakban mindezt áttekintjük, beleértve azt is, hogyan állíthatja be egyéni bővítményét a Chrome -ban anélkül, hogy fel kellene töltenie vagy meg kellene osztania másokkal.

Egy összetett Chrome -bővítmény elkészítése sokkal részletesebb folyamat, mint amit alább láthat, de az általános folyamat ugyanaz. Olvasson tovább, hogy megtudja, hogyan készíthet olyan Chrome - bővítményt, amelyet már ma elkezdhet használni.

Tipp(Tip) : Ha szeretné látni, milyen nagyszerű lehet saját bővítménye, tekintse meg ezeket a csodálatos Chrome-bővítményeket(these amazing Chrome extensions) .

Hogyan készítsünk Chrome-bővítményt

Ezzel az útmutatóval létrehozhat egy egyszerű Chrome - bővítményt, amely felsorolja néhány kedvenc webhelyét. Teljesen testreszabható és nagyon könnyen frissíthető.

A következőket kell tennie:

  • Hozzon létre egy mappát, amely a kiterjesztést alkotó összes fájlt tartalmazza.
  • Hozza létre a bővítményhez szükséges alapfájlokat: manifest.json , popup.html , background.html , styles.css .
  • Nyissa meg a popup.html fájlt(popup.html) egy szövegszerkesztőben, majd illessze be oda a következőket, és ügyeljen arra, hogy mentse, ha végzett.
<!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>

Nyugodtan(Feel) szerkessze a linkeket és a linkszöveget, vagy ha szeretné a Chrome -bővítményt pontosan olyanná tenni, amilyennek mi vagyunk, maradjon minden a régiben.

  • Nyissa meg a manifest.json fájlt(manifest.json) a szövegszerkesztőben, és másolja/illessze be a következőket:

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

"manifest_version": 2,
"name": "Kedvenc webhelyek", ( “name”: “Favorite Sites”,)
"leírás": "Minden kedvenc webhelyem." ( “description”: “All my favorite websites.”,)
"Verzió": "1.0", ( “version”: “1.0”,)
"ikonok": { ( “icons”: {)
"16": "icon.png",
„32”: „icon.png”,
„48”: „icon.png”,
„128”: „icon.png”
},

   "background": { 
        "page":"background.html"
},

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

A kód ehető területei közé tartozik a név(name) , a leírás(description) és a default_title .

  • Nyissa meg a styles.css fájlt(styles.css) , és illessze be a következő kódot. Ez díszíti a felugró menüt, hogy látványosabb legyen, és még könnyebben használható legyen.

#myUL {
list-style-type: nincs; (list-style-type: none;)
   párnázás: 0; (   padding: 0;)
   margó: 0; (   margin: 0;)
   szélesség: 300 képpont; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 12px;
  szöveg-dekoráció: nincs; (  text-decoration: none;)
  betűméret: 18 képpont; (  font-size: 18px;)
  fekete szín; (  color: black;)
  kijelző: blokk; (  display: block;)
  font-family: 'Noto Sans', sans-serif;
}

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

A CSS(CSS) - fájlban sok minden módosítható . Játsszon ezekkel a lehetőségekkel, miután elkészítette a Chrome -bővítményt, és testreszabhatja azt ízlése szerint.

  • Hozzon létre(Create) egy ikont a bővítményhez, és nevezze el icon.png . Helyezze a Chrome - bővítmény mappájába. Ahogy a fenti kódban is látható, ezekhez a méretekhez külön ikont készíthet: 16×16 pixel, 32×32 stb.

Tipp: A (Tip: )Google több információval rendelkezik a (Google has more information)Chrome - bővítmények létrehozásáról . Vannak más példák és speciális lehetőségek is, amelyek túlmutatnak az itt bemutatott egyszerű lépéseken.

Egyéni bővítmény(Custom Extension) hozzáadása a Chrome-hoz

Most, hogy elkészítette a Chrome -bővítményt, itt az ideje, hogy hozzáadja azt a böngészőhöz, hogy valóban használni tudja az összes most készített fájlt. Egy egyéni bővítmény telepítése olyan eljárást foglal magában, amely eltér a normál Chrome-bővítmények telepítésétől(how you’d install a normal Chrome extension) .

  • A Chrome menüben válassza a További eszközök(More tools ) > Bővítmények(Extensions) menüpontot . Vagy írja be a chrome://extensions/ címet a címsorba.
  • Válassza a Fejlesztői mód(Developer mode) melletti gombot, ha még nincs kiválasztva. Ezzel bekapcsol egy speciális módot, amely lehetővé teszi saját Chrome - bővítmények importálását.

  • Az oldal tetején található Kicsomagolt csomag betöltése(Load unpacked ) gombbal válassza ki a fenti 1. lépés során létrehozott mappát.(Step 1)

  • (Accept)Ha látja, fogadjon el minden felszólítást. Ellenkező esetben az Ön személyre szabott Chrome - bővítménye megjelenik a böngésző jobb felső sarkában lévő többi bővítmény mellett.

A Chrome-bővítmény szerkesztése

Most, hogy a Chrome -bővítmény használható, módosíthatja, hogy sajátja legyen. 

A styles.css fájl szabályozza a kiterjesztés megjelenését, így módosíthatja a lista általános stílusát, és módosíthatja a betűtípus színét vagy típusát. A W3Schools az egyik legjobb forrás a (W3Schools)CSS -sel elérhető különféle dolgok megismeréséhez .

A webhelyek sorrendjének megváltoztatásához, vagy további webhelyek hozzáadásához vagy a meglévők eltávolításához szerkessze a popup.html fájlt. Csak ügyeljen arra, hogy csak az URL -t és a nevet módosítsa. Az összes többi karakter, például a <li> és a <html> kötelező, és nem szabad megváltoztatni. A W3Schools HTML oktatóanyaga(HTML Tutorial on W3Schools) jó hely, hogy többet megtudjon erről a nyelvről.



Dorottya Szűcs

About the author

Számítógép-programozó vagyok, és több mint 15 éve. Szakértelmem szoftveralkalmazások fejlesztésében és karbantartásában, valamint ezen alkalmazások technikai támogatásában rejlik. Számítógép-programozást is tanítottam középiskolásoknak, jelenleg pedig profi oktató vagyok.


Related posts