Ebben a cikkben megtanítom Önnek, hogyan készítsen saját Chrome kiterjesztést. A TalkToMe, egy Chrome-kiterjesztés létrehozásakor levont tanulságokra alapozom, amely segít a látássérülteknek a weboldal tartalmának olvasásával és más weboldalakra való navigációval.
Kitérek a bővítmény beállításának alapjaira, beleértve:
- A fájlok beállítása a telepítéshez
- Felkészülés a Chrome áruházba való elhelyezésre
A fájlok beállítása a telepítéshez
Először nyissa meg a chrome: // extensions böngészőjét, vagy egyszerűen kattintson a Chrome menü „További eszközök” és „Bővítmények” elemére. Ennek a Bővítménykezelés oldalra kell vezetnie, ahol bekapcsolhatja a Fejlesztői módot (a jobb felső sarokban kell lennie).
Ezután egy manifest.jsonfájlt kell létrehoznia egy új könyvtárban a kiterjesztéshez. Ez a fájl fontos információkat nyújt a kiterjesztés működéséhez, például az engedélyeket és a szkriptfájlokat, amelyekkel összekapcsolja a projektjét. A manifeszt tartalmának így kell kinéznie:
{ "name": "Chrome Extension Example", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2}Könyvtárának az Extension Management oldalra való feltöltéséhez kattintson a „Csomagolatlan betöltése” gombra, és válassza ki a könyvtárat. Ez összekapcsolja a fájlokat a webalapú kezelőfelülettel.
Egy másik fontos fájl, amelyet konfigurálnia kell background.js, a projekt háttérszkriptje.
A minta szkript ilyen típusú felépítésű:
chrome.runtime.onInstalled.addListener(function() { // add an action here});Mindig fut, amíg a bővítmény be van kapcsolva, és hasznos különböző események, például billentyűzet megnyomásainak meghallgatásához, vagy különböző oldalakra történő navigáláshoz.
Akár több háttérszkript is lehet. Először csak regisztrálnia kell mindet a jegyzékfájljában. Ehhez egyszerűen strukturálja manifest.jsezt, így néz ki a kiterjesztésünk manifesztfájlja:
{ "name": "Chrome Extension Example", ... "background": { "scripts": [ "js/es6-promise.auto.min.js", "js/defaults.js", "js/speech.js", "js/document.js", "js/events.js", "js/stt.js", "js/listen.js" ], "persistent": false }}Szüksége lesz egy fájlra nemcsak a kiterjesztés funkciójához, hanem az UI-hez is. Ehhez készítsen egy nevű fájlt popup.html. A felugró ablak egy kis ablak, amely a kiterjesztés ikonjára kattintva jelenik meg. Például itt található a Cookie Manager Firefox kiterjesztés előugró része.
A popup.htmlfájl meglehetősen egyszerű lehet. Az alábbiakban néhány kódot készíthet egy felugró ablak egyetlen gombnyomással történő létrehozásához. Olyan egyszerű, mint a nyitó és záró gombcímkék hozzáadása a dokumentum törzséhez és néhány stílusszabály.
button { height: 30px; width: 30px; outline: none; } ; Természetesen popup.htmla kiterjesztésünk kódja ennél sokkal több összetevőt tartalmaz. Adjon hozzá nyugodtan további gombokat, stíluslapokat és bármi mást, amelyet megfelelőnek talál a bővítmény ötletéhez.
Ideje konfigurálni a felugró kódot és az ikont. Az ikonhoz azonban két helyre kell hozzáadnia a kódot: „default_icon” és „ikonok”. Az „default_icon” tulajdonság az eszköztár ikonjaihoz, az „ikonok” pedig a Bővítménykezelés oldalon megjelenő képekhez használható.
Térjen vissza manifest.jsona következő kódsorokhoz , és adja hozzá az alábbi kódsorokat, az alapértelmezett ikon képpályáit cserélje le saját képeire. Ugyanazt a képet beillesztheti mind az „alapértelmezett_ikon”, mind az „ikonok” kategóriába. És nem kell ugyanolyan méretű képeket elhelyeznie, mint az alábbiakban. Például, ha csak 16 x 16 és 48 x 48 méretű képei vannak, törölje bátran a másik két sort, amely 32 és 128 képpontot határoz meg.
{ "name": "Chrome Extension Example", ... "page_action": { "default_popup": "popup.html", "default_icon": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" } }, "icons": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" }}Tehát ezek a fájlok nélkülözhetetlenek a króm kiterjesztés felépítéséhez:
- egy jegyzékfájl,
- háttér szkriptek, és
- egy felugró fájl
Néhány további fájl, amelyet konfigurálhat:
options.htmlésoptions.js
options.jsszélesebb választékot kínál a felhasználóknak a kiterjesztés használatakor. Gondoskodni fog arról, hogy az opciók oldala hogyan néz ki (nagyon hasonlít popup.html), miközben options.jskezeli a funkcionalitást.
Ezek a fájlok nem kötelezőek, de ha úgy dönt, hogy felveszi őket, ne felejtse el konfigurálni options.htmla jegyzékben, és közvetlenül a végződő HTML-címke előtt kapcsolja össze a options.jsfájlt <; / script> hozzáadásával .
{ "name": "Chrome Extension Example", ... "options_page": "options.html"}A kiterjesztés működésének megtekintéséhez mentse el az összes fájlt, és kattintson az „Újratöltés” gombra, miközben a Bővítménykezelés oldalon tartózkodik. Az ikont látnia kell az eszköztáron. A beállítások oldal megtekintéséhez kattintson a bővítmény alatt található „Részletek” lehetőségre, és görgessen lefelé a „Bővítmény beállításai” feliratig.
A projekt közzététele a webáruházban
Tehát kifejlesztette és tesztelte a kiterjesztését. Most el kell terjesztenie!
A projekt feltöltésének megkezdéséhez először konvertálja át .zip fájlra. A fájlnak tartalmaznia kell legalább a manifest.jsonfájlt. Ezután győződjön meg róla, hogy rendelkezik fejlesztői fiókkal, ha ellátogat a Chrome Webstore fejlesztői irányítópultjára.
Kattintson az „Új elem hozzáadása” gombra, és lehetővé teszi a .zipfájl feltöltését . Hacsak nem szeretné regisztrálni az alkalmazás kifizetéseit, kihagyhatja a fizetési rendszer beállításának lépését. Ugyanakkor 5 USD egyszeri fejlesztői díjat kell fizetnie, amikor a projektet felteszi a webáruházba.
Ne felejtse el mellékelni a bővítmény részletes leírását és képeit, hogy a potenciális felhasználók pontosan tudják, mit csinál a projekt!
Miután mindez befejeződött, kap egy alkalmazásazonosítót és egy OAuth-tokent. Az alkalmazásazonosítót a Google API-khoz intézett kérésekhez, míg az OAuth tokent az internetes áruház fizetéseihez használják.
Gratulálunk, most közzétette a kiterjesztését! ?
Ha tetszett ez a bejegyzés, nézze meg ezt a következő cikket. Mélyebben elmélyülünk abban, hogyan konfigurálhatjuk az audio funkciókat a Chrome-bővítményben, akárcsak a TalkToMe esetében.