Saját Chrome Web Store app készítése

A Google Chrome böngészője nem csak kiegészítőket, hanem beépített webes alkalmazásokat is képes futtatni. Akár a blogodnak is lehet egy nagy indítóikonja a kezdőképernyőn. Egy amolyan "Hello World!" típusú mintaprogram elkészítését mutatom meg, bár annál több értelme lesz.
Ha telepítettél már alkalmazásokat, akkor egy új ablak nyitása után a Chrome így néz ki (letolva, becsukva a leggyakrabban látogatott webhelyeket maga alá).

Az ikonokra kattintva alkalmazások vagy weboldalak indulnak el. Egy jó ideje így használom a Chromeot, mert az ikonok nem csak átrendezhetőek, de egyből szinkronizálásra is kerülnek a többi géppel, ahol a saját Google accountommal vagyok belépve.

A blogom indítóikonját itt találod meg a Chrome Web Store alatt:

https://chrome.google.com/webstore/detail/fhpdbkanaldmkfogkbcceipmjpoblakh
vagy
https://chrome.google.com/webstore/search/blog.sancho.hu

Az alábbiak kellenek az elkészítéséhez és nyilvános megosztásához:

Egy JSON fájl, melyben egy egyszerű kód van.
Egy 128x128 pixeles PNG ikon.
Egy Google account ide: https://chrome.google.com/webstore/developer/dashboard
A weboldalad engedélyezett felvétele a webmester eszközök közé (pár lépés, egyszerű, magyar leírással támogatott, ezért nem részletezem): https://www.google.com/webmasters/tools/home?hl=hu
Pár képernyőmentés a feltöltéskor kért méretekben (480x240, 1280x800).

A JSON kód az alábbi lesz (másold ki a vágólapra):

{
"name": "ALKALMAZÁS NÉV",
"description": "RÖVID LEÍRÁS, HOGY MI IS EZ",
"version": "1.0",
"icons": {
"128": "128.png"
},
"app": {
"urls": [
"http://WEBOLDALAD-LINKJE.HU"
],
"launch": {
"web_url": "WEBOLDALAD-LINKJE.HU"
}
},
"permissions": [
"unlimitedStorage",
"notifications"
]
}

A kiemelt részeket írd át arra, ami a Te weboldaladnak megfelelő adat lesz. Egy szövegszerkesztőbe másold be, és UTF-8 kódolással mentsd el egy munkakönyvtárba. A fájl neve legyen manifest.json. Figyelj arra, hogy alapállapotban a Windows sima .TXT kiterjesztést ad a fájloknak, így a ~~manifest.json.txt~~ nem lesz jó! Keress egy olyan fájlkezelőt, mely 1.) képes az ANSI kódolás helyett az UTF-8 kódolású mentésre, 2.) képes saját fájlkiterjesztéssel elmenteni az alkalmazást.

A fenti kódban látható, hogy a kép neve legyen 128.png! A képet másold be a manifest.json fájlt tartalmazó könyvtárba. Ha nem tudod, mivel készíts ikont 128x128 pixel méretben, akkor használd az Aviary Chrome Web Storeban is megtalálható alkalmazást:

https://chrome.google.com/webstore/detail/lnhpjhojpnckkehlebbkpoammaemnnno
vagy
https://chrome.google.com/webstore/search/Aviary%20Feather

Most jön a próba: A Chrome böngésző jobb felső sarkában van egy villáskulcs ikon. Kattints rá, majd keresd az "Eszközök - Bővítmények" menüt (chrome://extensions/). A jobb sarokban a "Fejlesztői mód" menüt nyisd el. Kattintsd a "Kicsomagolt bővítmények betöltése..." gombra. Keresd meg a könyvtárat, ahová a manifest.json fájlt elmentetted, majd kattints az "OK" gombra. Egyébként ekkor létrejön egy .crx és egy .pem fájl is egy könyvtárral kijjebb, mint a munkakönyvtárad.

Elvileg ha nem kapsz hibaüzenetet, akkor jól végezted dolgodat. Ha most egy új ablakot nyitsz, máris ott lesz az alkalmazásikonod. A "Bővítmények becsomagolása..." gombra kattintva az első "Tallózás..." gombot kell választanod, majd kijelölnöd a munkakönyvtárad. A művelet végén kapsz egy üzenetet, ami ha elvileg jól futott le minden, alkalmas lesz a feltöltésre.

Ahhoz, hogy feltölthető legyen a Web Storeba, előbb össze kell csomagolnod az előbbi művelettel létrejövő négy fájlt egyetlen .zip fájlba(.json, .png, .crx, .pem). Ne legyenek könyvtárban, egyszerre csomagold be mindet, legyenek egymás melletta fájlok! A .zip feltöltését az alábbi oldalon át tudod elvégezni:

https://chrome.google.com/webstore/developer/dashboard

Nem részletezném, mert egyértelmű magyar hibaüzeneteket ad a lap. Töltsd fel a képeket, hitelesítsd a webmesterrel az oldalad, add meg a leírásokat, stb... A végén a "Változások közzététele" gombbal élesedik az app, és az url máris osztható a haveroknak: