Fórum Ubuntu CZ/SK

Ubuntu pro osobní počítače => Software => Příkazový řádek a programování pro GNU/Linux => Téma založeno: ADIO45 07 Února 2010, 19:33:01

Název: Programování pluginy pro Google Chrome
Přispěvatel: ADIO45 07 Února 2010, 19:33:01
Tak jsem rozhodl že podívám na zoubek. Pokud používáte Google Chrome a měli jste náhodou přešli na nějakou chuť vyrobit vlastní plugin? Není problém.

Co potřebujeme?
Prohlížeč Google Chrome Beta 4.0 a vyšší
Prohlížeč Google Chrome Dev 5.0 a vyšší
Alespoň znalosti CSS, HTML a Javascript.
Nutnost založit textový soubor manifest.json, popup.html
Grafické práce ikonkami - 19x19 icon.png

Jak začít?
Stačí když založíte složku dejme tomu Encyklopedie Mars
Spustíme složku Encyklopedie Mars

Založíme textový soubor manifest.json (poněkud objevuje pod *txt stačí když přejmenujte na *json)
Spustíme manifest.json a zbytek je povinnosti tuto probraném textu viz. zdroje:

Kód: [Vybrat]
{
  "name": "Encyklopedie Mars",
  "version": "1.0",
  "description": "Ukázka o vědy marsu",
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
   },
  "permissions": [
    "http://www.ubuntu.cz/"
  ]
}

Takhle bych měl podstatě vypadat. Stačí když tuto zdroj zkopírujte.
Malá připomínka:
Version nesmí obsahovat pod písmenky příklad 1.0b (b = beta) bohužel nelze použít písmena a proto používáme pouze číslovací verze.
Name je povinnosti aby jste zadal vaše název pluginy.
Description je textový komentář určen pro důvodu o čem program jedná.
Permissions je docela otravná věc. Proto Permissions můžeme chybu znát moc dobře. Proto příkladu "http://www.vasestranka.cz/" je OK ale "http://www.vasestranka.cz" není OK Proč? Proto chybí nakonci /. Podstatě musíte 100% vypadat tohle "http://www.vasestranka.cz/" poněkud něco chybí tak nemůžete vůbec komplikovat plugin.

Takže doufám že máte všechno v pořádku na manifest.json. A jdeme dál na popup.html
Stačí když založíte textový soubor pod *html. Bude vypadat popup.html

popup.html je pro vás 100% dělat co chcete aby jim to vyšlo plugin bez problému.
Kód: [Vybrat]
<html>
<body>
<font color="Blue">

<h1>O Marsu</h1>
Mars je nejunikátnější řešení v marsu které mohou bydle bla bla bla bla.....
<h2>Velikosti</h2>
<h3>Velikosti</h3>
<h4>Velikosti</h4>
<h5>Velikosti</h5>
<h6>Velikosti</h6>
<br>
<br>Pod sebou
</font>
</br>
<body>
</html>

Malá připomínka:
<font color="Blue"> - je povinností vybarvit nějakou barvu. Pokud nevyužijete barvu dejme tomu třeba Černá. Tak prostě kašlete tak na pluginu neuvidíte písma. Prostě je úplně bílí. Tak je dobré tomu napsat takový menší zdroj: <font color="vaše oblíbené barvy">

Stačí když uložíte tuto popup.html.
No jdeme na icon.png.
Icon.png stačí když googlujete třeba Mars. Stačí graficky upravit a nakonec dejte průhlední masku a nezapomeňte na takovou velikosti lze 19x19.

Hotovo! A co s tím?

Spustíme program Google Chrome od 4 a vyšší. Které podporují pluginy. Spustíme ikonku šroubovák či Přizpůsobení a ovládání Google Chrome -> Rozšíření.
A pokud tě spustí tab Rozšíření a jdete ještě nahoru a uvidíte snad Režim pro vývojáře.
Tak si klikněte a objeví tohle
Načíst rozbalené rozšíření                 Zabalit rozšíření             Aktualizovat rozšíření

A co dál?
No, je dobré předem dříve otestovat svůj plugin. Může někdy obsahovat chybu. Předtím kterou jste zkopírovaly mé zdroje tak bych neměli objevit chybu.

Proto jdeme otestovat plugin a tak proto klikneme na Načíst rozbalené rozšíření a najdete složku Encyklopedie Mars.
Samo se má plugin objevit na Rozšíření a taky na lištu. Tak si krásně otestujte a poněkud to váš vývoj plugin povedlo tak jdeme na Google Chrome Extensions viz.: https://chrome.google.com/extensions (https://chrome.google.com/extensions)

POZOR! Pokud máte účet Google třeba Gmail či Pisaca tak lze přidat váš plugin. Pokud nemáte Účet Google tak holt musíte zaregistrovat.

Po přihlášení se podívejte na dole - vlevo liště a objeví Jste vývojář? Publikovat rozšíření.

POZOR! Po kliknutí publikování rozšíření musíte mít připraven zabalenou archiv pod *zip Máme složku Encyklopedie Mars tak klikněte a zbytek souboru předejte do zipovou archivu. A později se můžete přidat archiv.

A máte vyhráno! Zbytek holt musíte napsat Info (nejlépe psát anglicky) i screeny atd... Toto návod určen kteří už má dobré zkušenosti HTML, CSS či Javascript.
Proto pokud neumíte HTML atd... Tak je dobré přečíst návod
Jak psát web - www.jakpsatweb.cz (http://www.jakpsatweb.cz)
Další studium které tady nevešlo - http://code.google.com/chrome/extensions/ (http://code.google.com/chrome/extensions/) - bohužel je to anglický návod

Moje tvorba:
https://chrome.google.com/extensions/detail/bopgcgamanhgdoelcmccjboakdigcmpl (https://chrome.google.com/extensions/detail/bopgcgamanhgdoelcmccjboakdigcmpl) - Photo Cat fo Flickr
https://chrome.google.com/extensions/detail/jmgldephjdbmjokjoiepebandnlljpbd?hl=cs (https://chrome.google.com/extensions/detail/jmgldephjdbmjokjoiepebandnlljpbd?hl=cs) - Garfield RSS Viewer
https://chrome.google.com/extensions/detail/mnojoahbjkhecofakjcokoggefpjphnf?hl=cs (https://chrome.google.com/extensions/detail/mnojoahbjkhecofakjcokoggefpjphnf?hl=cs) - Dilbert RSS CZ
https://chrome.google.com/extensions/detail/ddegagneededghlgjmojhieklbliglee?hl=cs (https://chrome.google.com/extensions/detail/ddegagneededghlgjmojhieklbliglee?hl=cs) - Ping-Pong 3D

Název: Re: Programování pluginy pro Google Chrome
Přispěvatel: mizik 10 Února 2010, 00:38:58
super! ... hned vyzkousim   ;)
+1
Název: Re: Programování pluginy pro Google Chrome
Přispěvatel: moom 13 Listopadu 2010, 14:15:08
Dobrý den, nemáte prosím tušení jestli se dá udělat rozšíření
aby Chrome uměl hledat i na základě názvu složky, umístěné
v záložkách. Né jenom v url adresách a popisech stránek.