Chrome-kiterjesztések létrehozása a Scratch-ből

Ha szeretné bizonyos funkciók hozzáadása vagy módosítása a Google Chrome-ban kiterjesztést kell használnia. Habár letölthet egy kiterjesztést a Chrome Internetes áruházból, de néha szükség van egy olyan speciális funkcióra, amelyet nem találhat a meglévő bővítményekben.

Nos, a jó hír az, hogy saját bővítményt hozhat létre a szükséges funkciók hozzáadásához vagy módosításához, vagy új bővítményt vagy alkalmazást készíthet a Google Chrome-hoz, amelyet később terjeszteni más felhasználóknak a Chrome Internetes áruház használatával.

A következőkben megmutatom neked a legegyszerűbb módja egy kiterjesztés létrehozásának. Ha ismerete van a webes fejlesztésről (HTML, CSS és JS), otthon érezheti magát. Ha nem, először nézze meg ezeket a csatornákat megtanulják a webfejlesztés alapjait, majd folytassa az alábbiakban.

Előfeltételek

Mielőtt elkezdené ezt a bemutatót, az alábbi követelményeket kell teljesítenie.

1. Meg kell ismernie HTML, CSS és JavaScript. [Ellenőrizze a forrásokat]
2. Szüksége van egy kódszerkesztő írja a kiterjesztést. [Szerkesztők összehasonlítása]
3. (Nem kötelező) Ha kiterjesztését szeretné terjeszteni más felhasználókra, akkor rendelkeznie kell a fejlesztői fiók a Chrome Internetes áruházban. [Hozzon létre egy fiókot]

Jegyzet: A Google kéri, hogy fizessen egy kis díjat a fejlesztői fiók létrehozásáért a Chrome Internetes áruházban.

Hozzon létre egy kiterjesztést

Ebben a bemutatóban megosztom az a tennivaló Google Chrome-hoz. Ez egy segédprogram lesz (amint az alább látható), hogy bemutassa az alapvető összetevőket és a kiterjesztésekhez biztosított képességeket.

1. Kap egy sablont

A Google Chrome, mint bármely más platform is, megköveteli annak használatát kiterjesztések egy meghatározott szerkezettel, amely kezdők számára összetettnek tűnhet. Éppen ezért jó, ha egy kiterjesztéshez csatolt sablont kapunk, amely minden szükségletet megad.

Az Extensionizr a legjobb generátor króm kiterjesztésekhez. Lehetővé teszi, hogy kiválasszon egyet az adott kiterjesztés típusok közül - böngésző művelet (minden oldalra vagy böngészőre vonatkozó művelet), oldal művelet (az aktuális oldalhoz tartozó művelet), vagy rejtett kiterjesztés (a háttér művelet általában elrejtve van az elülső felületen).

Ezenkívül különböző finomhangolási lehetőségeket biztosít tartalmazza / kizárja a szükséges bővítményeket, engedélyeket, stb. Ki kell választania “Böngésző művelet” mint kiterjesztés típusa és “Nincs háttér” a bemutató háttéroldalaként.

Ha befejezte a minta kiterjesztésének létrehozásának lehetőségeit, nyomja meg a “Töltsd le!” gomb az Extensionizr-ben. Végül, kivonja az archívumot (.zip) egy könyvtárba és nyissa meg a kódszerkesztőt a kiterjesztés megírásához.

2. Kódolja a kiterjesztést

Miután letöltötte és kitermelte a sablont, egy könyvtárstruktúrát fog látni, amint azt az alábbi képernyőkép mutatja. A sablon rendezett, és tudnia kell, hogy a legfontosabb fájl “manifest.json“.

Ismerjük meg a könyvtár többi fájlját és mappáját is:

1. _locales: Régebben tárolja a nyelvi információkat többnyelvű alkalmazás számára.
2. css: Úgy működik, hogy harmadik féltől származó front-end könyvtárakat tároljon, mint a Bootstrap 4.
3. ikonok: Úgy tervezték, hogy a kiterjesztés változatos méretű ikonok legyen.
4. js: Kényelmes menteni harmadik féltől származó háttértárak mint a jQuery 3.
5. src: Tárolja a tényleges kódot, amelyet a mellékére ír.

manifest.json

Ez tartalmazza a alapadatok az alkalmazásról, amely meghatározza az alkalmazás adatait a böngészőhöz. Szerkesztheti azt a kiterjesztés nevének, leírásának, webhelyének, ikonjának stb böngésző műveletek és engedélyek.

Például az alábbi kódban észreveszed, hogy megváltoztattam a nevet, a leírást és a homepage_url-t, valamint a default_title-t a böngészővel. Sőt, én hozzáadott “tárolás” engedélyek alatt mivel az adatokat bővítésünkben kell tárolni.

 "name": "Todoizr - teendő egyszerűsített", "verzió": "0.0.1", "manifest_version": 2, "leírás": "Egyszerű feladat mindenkinek.", "homepage_url": " https://go.aksingh.net/todoizr "," ikonok ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" ikonok / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - teendő egyszerűsített "," default_popup ":" src / böngésző_action / browser_action.html "," engedélyek ": [" tárolás "] 

src \ browser_action

Ez a könyvtár a böngészővel kapcsolatos kódot fogja megtartani. A mi esetünkben kódolja a felugró ablakot a böngészőben a kiterjesztés ikonjára kattintva jelenik meg. Bővítményünk lehetővé teszi a felhasználók számára, hogy a felugró ablakban tegyenek feladatokat.

Jegyzet: Mindig ugorhat a kóddal a tároló klónozásával.

A sablon kezdeti kódja

Bár ennek a könyvtárnak csak egy HTML-fájlja volt, amely rendelkezik az összes kóddal, úgy döntöttem, hogy három külön fájlba osztom a jobb érthetőséget. Ez a nevezett HTML-fájl “browser_action.html” most a következő kódja van:

Továbbá a stílusfájl neve “browser_action.css” a JavaScript-fájl neve alatt van az alábbi tartalom “browser_action.js” most üres.

 #mainPopup padding: 10px; magasság: 200px; szélesség: 400px; font-család: Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size: 2em;  

Tervezze meg a felugró ablakot

A kezdeti projekt beállítása után először tervezzük meg a felugró ablak felületét. Nekem van a felületet minimalista megközelítéssel hozza létre, a tetején lévő nevet, majd egy űrlapot, hogy a feladatokat és a hozzáadott elemek megtekintésére szolgáló területet adjon hozzá. Az egyszerűsített design ihlette “Űrlapstílus 5“.

Az alábbi kódban két divs-t adtam hozzá - egyet az űrlap megjelenítéséhez, a feladatok hozzáadásához, a másik pedig a már hozzáadott feladatok listájának megjelenítéséhez. Ez azt jelenti, hogy az új kód “browser_action.html” az alábbiak:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

És a stílusfájl “browser_action.css” most a következő kódja van:

 @import url ("./ form_style_5.css"); #mainPopup magasság: 200px; szélesség: 300px; font-család: Helvetica, Ubuntu, Arial, sans-serif;  / * Tennivaló űrlap * / .form-style-5 margó: auto; párnázás: 0px 20px;  .form-style-5: első gyermek háttér: nincs;  .form-style-5 h1 color: # 308ce3; betűméret: 20px; szöveg-igazítás: központ;  .form-style-5 bemenet [type = "text"] szélesség: auto; balra lebeg; margin-bottom: unset;  .form-style-5 bemenet [type = "gomb"] háttér: # 308ce3; szélesség: auto; úszó: jobb; párnázás: 7px; határ: nincs; határ-sugár: 4px; betűméret: 14px;  .form-style-5 bemenet [type = "gomb"]: lebeg háttér: # 3868d5;  / * Teendők listája * / .form-style-5: utolsó gyermek magasság: öröklés; margin-bottom: 5px;  .form-style-5 ul padding: 20px;  .form-style-5 ul li font-size: 14px;  

Végül a harmadik fél stílusfájlja “form_style_5.css” az alábbi tartalommal rendelkezik. Egyszerűen a webhelyéről származnak, hogy inspirálja kiterjesztésünk tervezését.

 / * 5-ös formanyomtatvány: Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; párnázás: 10px 20px; háttér: # f4f7f8; margó: 10px auto; párnázás: 20px; háttér: # f4f7f8; határ-sugár: 8px; font-család: Grúzia, "Times New Roman", Times, serif;  .form-style-5 fieldset határ: nincs;  .form-style-5 legenda font-size: 1.4em; margin-bottom: 10px;  .form-style-5 címke display: block; margin-bottom: 8px;  .form-style-5 bemenet [type = "text"], .form-style-5 bemenet [type = "date"], .form-style-5 bemenet [type = "datetime"], .form-style -5 bemenet [type = "email"], .form-style-5 bemenet [type = "szám"], .form-style-5 bemenet [type = "search"], .form-style-5 bemenet [típus = "time"], .form-style-5 bemenet [type = "url"], .form-style-5 textarea, .form-style-5 válassza a font-family: Georgia, "Times New Roman", Times , szerif; háttér: rgba (255,255,255, .1); határ: nincs; határ-sugár: 4px; betűméret: 16px; margin: 0; vázlat: 0; párnázás: 7px; szélesség: 100%; doboz-méretezés: szegélydoboz; -webkit-box-méretezés: szegélydoboz; -moz-box-méretezés: szegélydoboz; háttérszín: # e8eeef; color: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) betét; doboz-árnyék: 0 1px 0 rgba (0,0,0,0.03) betét; margin-bottom: 30px;  .form-style-5 bemenet [type = "text"]: fókusz, .form-style-5 bemenet [type = "date"]: fókusz, .form-style-5 bemenet [type = "datetime"]: fókusz, .form-style-5 bemenet [type = "email"]: fókusz, .form-style-5 bemenet [type = "number"]: fókusz, .form-style-5 bemenet [type = "search"] : fókusz, .form-style-5 bemenet [type = "time"]: fókusz, .form-style-5 bemenet [type = "url"]: fókusz, .form-style-5 textarea: fókusz, .form- style-5 select: focus background: # d2d9dd;  .form-style-5 válassza a -webkit-megjelenés: menulista-gombot; magasság: 35px;  .form-style-5 .number background: # 1abc9c; szín: #fff; magasság: 30px; szélesség: 30px; kijelző: inline-block; betűméret: 0.8em; margin-right: 4px; vonalmagasság: 30px; szöveg-igazítás: központ; szöveg-árnyék: 0 1px 0 rgba (255,255,255,0,2); határ-sugár: 15px 15px 15px 0px;  .form-style-5 bemenet [type = "Submit"], .form-style-5 bemenet [type = "gomb"] pozíció: relatív; kijelző: blokk; párnázás: 19px 39px 18px 39px; szín: #FFF; margin: 0 auto; háttér: # 1abc9c; betűméret: 18px; szöveg-igazítás: központ; betűtípus: normál; szélesség: 100%; határ: 1px szilárd # 16a085; határszélesség: 1px 1px 3px; margin-bottom: 10px;  .form-style-5 bemenet [type = "Submit"]: hover, .form-style-5 bemenet [type = "gomb"]: lebeg háttér: # 109177;  

Írja be a felugró logikát

Miután elvégeztük a kiterjesztés front-end-jével, most írjuk meg a logikáját a működéséhez. Szükségünk van a kiterjesztésre, hogy képes legyen hozzáadhat feladatokat és megjelenítheti azokat a felugró ablakban. Így hozzáadunk egy gombnyomással rendelkező hallgatót, hogy hozzáadjuk a beviteli szöveget feladatként, és egy oldal betöltő hallgatót, hogy megjelenítsük azokat az elemeket.

Az alábbi kódban két funkciót fogunk használni - sync.get () és szinkronizálás (), amelyek részét képezik “chrome.storage“. Szükségünk van a másodikra, hogy elmentse a feladatokat a tárolóba, és az elsőt, aki azokat lekéri és megmutatja.

Ez azt jelenti, hogy az alábbiakban a végleges kód a “browser_action.js” fájlba. Amint az alábbiakban láthatod, a kód nagyon kommentálva van, hogy megértsd a célját.

 funkció loadItems () / * Először kapja () az adatokat a tárolóból * / chrome.storage.sync.get (['todo'], függvény (eredmény) var todo = [] if (eredmény && results.todo && results.todo.trim ()! == ") / * Parse és kapja meg a tömböt, ahogy azt stringként menti * / todo = JSON.parse (results.todo) console.log ('todo.length =' + todo.length) a (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. Töltse be a bővítményt

Miután befejezte a kiterjesztés írását, itt az ideje, hogy tesztelje a Google Chrome funkcióját, amely lehetővé teszi a nem tárolt, kicsomagolt kiterjesztések betöltését. De először, meg kell engedélyezze a fejlesztői módot a böngészőben: kattintson a opciók gomb > választ “További eszközök” > Extensions, majd kapcsolja be “fejlesztői mód“.

Most már több gomb látható a keresősáv alatt. Kattintson ide a “A csomag kicsomagolása” gomb. Megkéri a könyvtárat - böngésszen és válassza ki a kiterjesztés könyvtárát, és betölti a kiterjesztést. Ha módosítja vagy frissíti a kiterjesztés kódját, kattintson a gombra újratöltési gomb a legújabb változtatások betöltéséhez.

Példánkban, megjelenik a kiterjesztés ikonja a profil ikon mellett, mert böngésző-műveletet adtunk a minta kiterjesztésünkhöz. Az ikonra kattintva kattinthat feladatok hozzáadása és megtekintése kiterjesztésünkben, mint ez a meghatározott akció.

Terjesztés terjesztése

Bár van könnyen bővíthető a Chrome Web Store-hoz, a folyamat túl hosszú ahhoz, hogy az összes részletet lefedje. Röviden, létrehozhat egy fejlesztői fiókot, csomagolhatja a kiterjesztését, majd elküldi azt a tartalmi adataival (például név, ikon, képernyőkép stb.) Együtt; ahogy azt a lépésenkénti útmutató tartalmazza.

Mi a következő? Olvasás és kódolás

Ahogy előfordulhatott, a bemutató célja, hogy elindítsa a Google Chrome bővítményfejlesztését. Megpróbáltam lefedni az alapfogalmakat; azonban, sokat tudnod kell komoly kiterjesztésfejlesztésért.

Ez azt jelenti, az alábbiakban néhány az én kedvenc go-to-erőforrások a Google Chrome és más Chromium-alapú böngészők bővítményeinek fejlesztéséhez:

1. A bővítmények minden képessége, összetevője és jellemzői.
2. Minta kiterjesztések a csapat által a Google Chrome mögött.

Ha ezeken az erőforrásokon ment keresztül, és készen állnak a kihívásokra, próbálkozzon az alábbi jellemzőkkel az újonnan befejezett fejlesztésben:

1. A mentett feladatok törlésének lehetősége.
2. Egy elem, amely egy elem hozzáadásakor megjeleníti az értesítéseket.

Ez az első bővítmény fejlesztése a legnépszerűbb böngésző számára. Milyen kiterjesztést hozott létre? Egy problémába kerültél? Kérem, tudassa meg a történetedet, ha az alábbi megjegyzést írod, vagy üzenetet küld a @aksinghnet-en.

Végül, de nem utolsósorban, vegye figyelembe, hogy kipróbálhatja a Todoizr-ot (a létrehozott kiterjesztést) a Chrome Internetes áruházban, és ellenőrizze a teljes kódját ebben a tárolóban.