Jak vytvořit jednoduché rozšíření pro Google Chrome

Jak vytvořit jednoduché rozšíření pro Google Chrome

Po zkoušení dalších nových rozšíření jsem začal pátrat po takovém, kterým bych si rozdělil pole ikon. Zkusil jsem zadat dotaz na Google+ a tam mi Radek Jančík napsal, že to je jednoduché a že to můžu zkusit, tak jsem do toho šel.

Začal jsem tedy hledat formou dotazů na Googlu a po pár minutovém pátrání a zkompletování informací v hlavě z asi 5 webů jsem se do toho pustil.

Oddělovač jako průhledná ikona rozdělující Googlí ikony od ostatních

Popíšu tedy postup jak vytvořit jen naprostý základ bez ničeho, tudíž ikonu, která nic nedělá.

1) Vytvoř složku (zde Oddělovač)
2) Vytvoř textový soubor
3) Pojmenuj ho Něco.json (zde Oddělovač.json) – jak má vypadat json a co znamenají jednotlivé položky(odkaz)
4) Do JSONu vlož:

{
„name“: „Oddělovač (Separator)“,
„version“: „0.4“,
„manifest_version“: 2,
„minimum_chrome_version“: „18“,

// Changelog:
// version 0.2 – průhledné pozadí ikony
// version 0.3 – přidány ikony pro stránku s výpisem rozšíření (i pro možný upload do Webstoru)
// version 0.4 – upraven kód a přidána ikona 32px

„icons“: { „16“: „ikony/icon16.png“,
  „32“: „ikony/icon32.png“,
  „48“: „ikony/icon48.png“,
          „128“: „ikony/icon128.png“ },

„description“: „Vytvoří prázdné místo/ikonu (Create free space between two extensions)“,

„browser_action“: {
„default_icon“: „icon.png“
}
}

5) Nyní potřebuješ vytvořit ikonu 19×19 pixelů (např. v Gimpu) a uložit ji do složky s json souborem
6) V Chromu jdi do rozšíření (Klíč -> Nástroje -> Rozšíření) a zaškrtni políčko „Režim pro vývojáře“
7) Klikni na „Načíst rozbalené rozšíření“ a ukaž cestu ke složce. V kroku kdy vidíš složku na ní jen jednou klikni a dej otevřít.
8) Hotovo! Pokud vše proběhlo dobře, tak se rozšíření objevilo ve výpisu i v panelu ikon. 🙂

Volitelně: Následně můžeš rozšíření „zabalit“ a poslat do světa. 🙂

Jestliže by Vás to chytlo a byla by naděje, že ještě něco v budoucnu spácháte, tak 5$, které jsou potřeba pro vkládání rozšíření a aplikací na Webstore, není tolik.

Pro zaplacení je v Panelu vývojáře třeba kliknout na odkaz pro zaplacení a pak již nic nebrání veřejnému vystavení tvojí práce.

Problém, který mi „bránil“ v nahrání byli komentáře v kódu, které je třeba vymazat.

Po korektním nahrání se objeví formulář k vyplnění několika informací. Zde musíte také nahrát ikonu propagující rozšíření ve velikosti 128x128px.
Dále je vhodné také nahrát snímek rozšíření a vhodné jsou i další obrázky.

Odkaz na rozšíření přímo ve Webstoru: https://chrome.google.com/webstore/detail/fekhjdkapdcigodkgfnnniodadejecgd?hl=cs&gl=CZ

Zde je ke stažení ZIP celé složky (JSON a ikona): https://docs.google.com/open?id=0BxhNGcYFnfQyOGJhZ0FXeVNBdk0

  • Pokud se ti článek líbil, tak sdílení potěší 😉

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

+ 68 = 77