Chrome webbővítmény - Előzetes kódolási tapasztalat nem szükséges: 6 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:39

A Chrome -bővítmények kis programok, amelyek célja a felhasználók böngészési élményének javítása. A chrome kiterjesztésekről a https://developer.chrome.com/extensions webhelyen talál további információt.

A Chrome Internetes bővítmény létrehozásához kódolás szükséges, ezért nagyon hasznos a HTML, a JavaScript és a CSS áttekintése az alábbi webhelyen:

www.w3schools.com/default.asp (A w3 iskolák jó webhelyek a kódolási forrásokhoz)

Nem tudja, hogyan kell kódolni? Ne aggódjon, ez az oktatóanyag segít eligazodni.

A legjobb a Chrome -bővítményekben az, hogy testreszabhatók. Ez nem csak egy konkrét dolog, amit meg lehet tenni, ezért légy kreatív.

Kellékek

A szükséges kellékek az alábbiak:

• Számítógép szövegszerkesztővel (Jegyzettömböt használok)
• Google Chrome

És ennyi!

1. lépés: Hozza létre a könyvtárat

Először hozzon létre egy mappát az összes fájl tárolására, és nevezze el "kiterjesztésnek". A név később megváltoztatható, ha szükséges.

2. lépés: Hozza létre a Manifest fájlt, és kódolja azt

A jegyzékfájl a kiterjesztés nagyon fontos része. Pontosan megmondja a melléknek, hogy mit kell tennie és mit kell tennie. A manifeszt fájlok JSON formátumban vannak formázva. Az első lépés egy szövegszerkesztő megnyitása és egy új fájl mentése „manifest.json” néven.

Ezután írja be az alábbi szkriptet:

{

"name": "First Extension", "version": "1.0", "description": "Kódolhatok egy kiterjesztést", "manifest_version": 2, "browser_action": {"default_title": "Első kiterjesztés"}}

Ne feledje a vesszőket az értékek után!

Miután beírta ezt, mentse el a jegyzékfájlt, és lépjen a chrome: // extensions címre (ehhez a Chrome -ot kell használni böngészőként). A chrome: // extensions oldalon kapcsolja be a fejlesztői módot. Ezt követően nyomja meg a „Betöltés kicsomagolva” gombot, és válassza ki a „kiterjesztés” mappát.

dobtekercset kérlek…

Hurrá! Ez egy kiterjesztés, kivéve… a maga unalmas típusát. Jelenleg szó szerint semmit nem csinál, de hamarosan szuper lesz.

3. lépés: Hozza létre az ikonokat és frissítse a jegyzéket

Az egyik webhely, amely jól működik az ikonok rajzolásához, a https://www.piskelapp.com/. Más rajzprogramok is használhatók. Az ikonoknak négyzet alakúnak kell lenniük. Ez a projekt 16x16, 32x32, 48x48 és 128x128 ikonokat fog használni. Miután elkészítette az ikont, hozzon létre egy "images" nevű mappát a kiterjesztés mappában, és tegye az ikont ebbe a mappába. Jó ötlet lehet egy képet a mérete szerint elnevezni. Például: 'icon32.png'. Az új kód az alábbiakban található:

{

"name": "First Extension", "version": "1.0", "description": "Kódolhatok egy kiterjesztést", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images/icon16-p.webp

A jegyzékkódra való hivatkozáshoz keresse fel a https://developer.chrome.com/extensions/manifest webhelyet.

4. lépés: Adjon hozzá egy előugró ablakot

Ez a bővítmény felugró ablakot tartalmaz. A felugró ablak egy HTML (Hypertext Markup Language) fájl, ezért érdemes először megtanulni a HTML, a CSS és a JavaScript alapjait.

Először mentsen el egy dokumentumot „popup.html” fájlként a kiterjesztés mappába.

Ezután szerkessze a jegyzékfájlt, és kattintson rá a „popup.html” fájlra. Az új kód az alábbiakban található:

{

"name": "First Extension", "version": "1.0", "description": "Kódolhatok egy kiterjesztést", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images/icon16-p.webp

Ne felejtsd el a vesszőt!

Ha a következő HTML -kódot hozzáadja a popup.html fájlhoz, akkor a kattintáskor a „Hello World” felirat jelenik meg.

Helló Világ

5. lépés: Jól nézzen ki és legyen interaktív

Ha egy alapvető HTML sort ír be, akkor a lehető legkevesebbet teszi. Ha hozzáadunk CSS -t (Cascading Style Sheets), akkor az hűvösebbnek tűnik, és ha JavaScriptet adunk hozzá, akkor interaktívabb lehet. Ez az oktatóanyag nem részletezi a HTML, a JavaScript és a CSS magyarázatát, de rengeteg erőforrás található az interneten. Az alábbiakban az egyszerű „Hello World” program, majd a színesebb program kódja látható:

Helló Világ

Helló Világ

#hello {background-color: #000000; szín: #ff0000; szegély: 8 képpont kezdet #86a3b2; határ-sugár: 50 képpont; átalakítás: forgatás (57deg); párnázás: 10px; user-select: nincs; kurzor: célkereszt; átmenet: 2s átalakítása; } #hello: hover {átalakítás: forgatás (-417deg); }

Ez a második példa nagyon zavaró lehet egy kezdő számára. Ezzel azonban meg akartam mutatni, mennyire fontos a CSS egy programnak/bővítménynek. Itt az ideje, hogy szünetet tartson, megtanuljon néhány HTML5 kódolást, és használja a developer.chrome.com webhelyet referenciaként. Eltarthat egy ideig, de nagy kiterjesztést lehet tenni.

6. lépés: Közzététel a Chrome Internetes áruházban

Ha valaki igazán nagyszerű bővítményt készített, és meg akarja osztani a világgal, akkor közzéteheti. Végül is ez a kiterjesztés lényege. Ez az oktatóanyag csak a jegyzékfájlt és annak használatát próbálta megmagyarázni, és csak volt egy „Hello World” programja.

Az első dolog, amit meg kell tennie a kiterjesztés nyilvánosságra hozatalához, ha a kiterjesztési mappát zip -fájlmá alakítja. Második lépésként lépjen a https://chrome.google.com/webstore/category/extensions weboldalra, és jelentkezzen be egy Google -fiókba. Ezután kattintson a beállítások fogaskerék gombra, majd a „fejlesztői irányítópultra”. Nyomja meg az "Új elem" gombot a zip fájl feltöltéséhez. Ha már ott van, módosítania kell az áruházi adatlapot, az adatvédelmet és az árakat. A kiterjesztés könnyen közzétehető, ha felülvizsgálatra benyújtják.

Most, hogy a kiterjesztés befejeződött, folytassa a kódolást!