Java týden Java týden
Pouze tento týden sleva až 80 % na celý Java e-learning!
Brno? Vypsali jsme pro vás nové termíny školení OOP v Brně!

Rozšíření pro chrome

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Většina lidí, co používá Google Chrome (Popř. Chromium) má nějaká rozšíření. Také vás napadlo, jak se dělají ?

V tomto tutoriálu si vytvoříme rozšíření, které zobrazí Vaše oblíbené odkazy. Vytvoříme si rozšíření typu Browser Action, které může mít ikonku.

Co budeme potřebovat?

  • Mozek
  • Počítač s nějakým editorem (gedit, na Woknech Notepad)
  • Na testování Google Chromium/Chrome

Soubory:

  • manifest.json
  • bg.html
  • popup.html
  • page2.html
  • page3.html

Do souboru manifest.json napíšeme:

{
  "name": "Moje odkazy",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Moje oblíbené odkazy",
  "icons": { "default": "icon.png" },
  "background_page": "bg.html",
  "permissions": ["http://*.psenak.cz", "http://*.google.com/", "https://*.google.com/", "http://*.google.cz/", "https://*.google.cz/", "http://www.devbook.cz"],
  "browser_action": {
    "default_title": "",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

Nezapomeňte si vytvořit ikonu icon.png! Do souboru bg.html nic nedáváme, je určen spíše pro složitější rozšíření. Do souboru popup.html:

<html>
<div style="width: 500px; height: 250px;">
<a href="http://www.google.cz" target="_blank">Google</a><br>
<a href="http://www.google.com" target="_blank">English Google</a><br>
<a href="http://www.devbook.cz" target="_blank">Devbook</a><br>
<a style="position: absolute;top: 230px;right: 20px;" href="page2.html">&#62;&#62;</a><br>
</div>
</html>

page2.html:

<html>
<div style="width: 500px; height: 250px;">
<a href="http://vojtech.psenak.cz" target="_blank">Vojtech.Psenak.cz</a><br>
<a style="position: absolute;top: 230px;left: 20px;" href="popup.html">&#60;&#60;</a><a style="position: absolute;top: 230px;right: 20px;" href="page3.html">&#62;&#62;</a>
</div>
</html>

page3.html:

<html>
<div style="width: 500px; height: 250px;">
<a target="_blank" href="http://vojtech.psenak.cz">Vojtech.Psenak.cz</a><br>
<a style="position: absolute;top: 230px;left: 20px;" href="page2.html">&#60;&#60;</a>
</div>
</html>

Ikonku si můžete vytvořit vlastní.

Tak, teď jen rozšíření přidat do chrome:

  • nastavení -> rozšíření
  • Aktivovat režim pro vývojáře
  • Zabalit rozšíření

Příště se podíváme na zoubek složitějším rozšířením, které již budou využívat URL, na které se uživatel nachází.

A to je vše, přátelé !

Rozšíření pro Chrome

P.S.: Teda není. Hotové rozšíření naleznete v archivu. Ale pozor !, v nejnovějších verzích prohlížeče Google Chrome (Chromium) je třeba rozšíření přidat pomocí stránky Rozšíření, aby prohlížeč věděl, že je skutečně chcete nainstalovat.


 

Stáhnout

Staženo 360x (32.74 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML

 

 

Aktivity (1)

 

 

Komentáře

Avatar
Michal Žůrek - misaz:17.3.2013 20:20

O toto jsem se jednou kdysi jen tak ze srandy zajimal a taky se mi něco podobného povedlo. Nicméně jsem rád že pro nás někdo něco podobného píše česky. Budu moc rád když napíšeš i pokračování.

 
Odpovědět 17.3.2013 20:20
Avatar
Anonym
Člen
Avatar
Anonym:18.3.2013 18:27

Píše to: Nelze přidávat aplikace, rozšíření a uživatelské skripty z tohoto webu. Co mám dělat? :(

 
Odpovědět  +1 18.3.2013 18:27
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Anonym
David Čápka:18.3.2013 18:33

"V nejnovější verzi prohlížeče Google Chrome je třeba rozšíření přidat pomocí stránky Rozšíření, aby prohlížeč věděl, že je skutečně chcete nainstalovat." Asi by to bylo vhodné doplnit i do článku.

Odpovědět 18.3.2013 18:33
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Anonym
Člen
Avatar
Odpovídá na David Čápka
Anonym:18.3.2013 18:43

Navíc at dělám co dělám, do Chrome Web Store mě to nejde dát.

 
Odpovědět 18.3.2013 18:43
Avatar
Anonym
Člen
Avatar
Anonym:18.3.2013 18:46

kdyžtak mě ten soubor prosím překontrolujte jestli to mám dobře :D
http://uloz.to/…7/fastyt-zip

 
Odpovědět 18.3.2013 18:46
Avatar
Vojta Pšenák
Redaktor
Avatar
Odpovídá na Anonym
Vojta Pšenák:18.3.2013 19:09

Máš zaplacenej ten 5$ poplatek ?

 
Odpovědět 18.3.2013 19:09
Avatar
Vojta Pšenák
Redaktor
Avatar
Odpovídá na Anonym
Vojta Pšenák:18.3.2013 19:21

Předělej popup.html na:

<html>
<div style="width: 233px; height: 217px;">
<a target="_blank" href="http://www.youtube.com"><img src="yt.jpg" alt="YT" /></a>
</div>
</html>
 
Odpovědět 18.3.2013 19:21
Avatar
Anonym
Člen
Avatar
Anonym:19.3.2013 16:48

Jinak už mě to jede, dík :)

 
Odpovědět 19.3.2013 16:48
Avatar
Anonym
Člen
Avatar
Anonym:19.3.2013 16:55

jinak umím do html5 dát video, asi nic novýho, ale mohl by na to někdo dát tutorial :) Třeba takle:

<html>
<head>
<title>Lucisek</title>
</head>
<center>
<h1> Křeččí web </h1>
<body>
<video src=krecek.mp4 width="1028" height="720" controls="controls"">
</video>
</center>

Stejně, není to nic světobornýho, jen kdyby někdo chtěl. :)

 
Odpovědět 19.3.2013 16:55
Avatar
Vojta Pšenák
Redaktor
Avatar
Odpovídá na Anonym
Vojta Pšenák:20.3.2013 7:40

Tag center je zastaralý, a když uvádíš kódy celé stránky, uveď i tagy jako </body> a </html>.
A tag h1 mimo body ?!
Správně je to takhle:

<html>
 <head>
 <title>Lucisek</title>
 </head>
 <body style="text-align: center;">
 <h1> Křeččí web </h1>
<video width="300" height="300" poster="nahled.png" controls>
 <source src="krecek.mp4" type="video/mp4">
<source src="krecek.webm" type="video/webm">
 <source src="krecek.ogv" type="video/ogg">
 <p>Video si můžete <a href="video.ogv">stáhnout</a>.</p>
</video>
</body>
</html>
 
Odpovědět 20.3.2013 7:40
Avatar
Anonym
Člen
Avatar
Odpovídá na Vojta Pšenák
Anonym:20.3.2013 16:08

No jo, sem blbec no :(

 
Odpovědět 20.3.2013 16:08
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na Vojta Pšenák
Daniel Vítek:22.3.2013 20:16

Zapoměl jsi na <!DOCTYPE html> :)

btw. na co je ten soubor bg.html ?

Odpovědět 22.3.2013 20:16
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
Vojta Pšenák
Redaktor
Avatar
Odpovídá na Daniel Vítek
Vojta Pšenák:23.3.2013 10:22

Doctype doplním, soubor bg.html tam být musí. Alespoň tak jsem se to učil

 
Odpovědět 23.3.2013 10:22
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na Vojta Pšenák
Daniel Vítek:23.3.2013 11:59

Ale já myslel DOCTYPE v tom komentáři :D

Odpovědět 23.3.2013 11:59
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
Michal Žůrek - misaz:27.8.2013 14:05

bude pokračování?

 
Odpovědět 27.8.2013 14:05
Avatar
Vojta Pšenák
Redaktor
Avatar
Odpovídá na Michal Žůrek - misaz
Vojta Pšenák:27.8.2013 16:18

Uvidím, nějak jsem neměl čas... Teď bude škola, možná jo. Zkus říct, co by si chtěl za pokračování, čemu se mám věnovat

 
Odpovědět 27.8.2013 16:18
Avatar
Odpovídá na Vojta Pšenák
Michal Žůrek - misaz:27.8.2013 17:37

já nevím, chtěl bych se dozvědět něco o nějakých specialitkách těchto doplňků.

 
Odpovědět 27.8.2013 17:37
Avatar
Snorlax
Redaktor
Avatar
Snorlax:4.9.2013 14:04

mám otázku ohledně těch koncovek .html... šlo by použít třeba .php?

Odpovědět 4.9.2013 14:04
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Odpovídá na Snorlax
Michal Žůrek - misaz:4.9.2013 14:17

ne, to vykresluje jádro prohlížeče (zatím webkit). PHP se zpracovává na serveru.

 
Odpovědět 4.9.2013 14:17
Avatar
Kit
Redaktor
Avatar
Odpovídá na Michal Žůrek - misaz
Kit:4.9.2013 14:36

V podstatě sice máš pravdu, ale PHP používám na notebooku jako normální programovací jazyk v režimu CLI. Kromě toho i jako webserver a dá se použít i ve třech kombinacích s jiným webovým serverem, např. Apache. To už je dohromady 5 způsobů a stále to není konečné číslo.

Odpovědět 4.9.2013 14:36
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Odpovídá na Kit
Michal Žůrek - misaz:4.9.2013 14:45

dobře ale předpokládám že ani jeden není doplňek pro chrome, které používá široké publikum.

 
Odpovědět  +1 4.9.2013 14:45
Avatar
Snorlax
Redaktor
Avatar
Odpovídá na Michal Žůrek - misaz
Snorlax:4.9.2013 19:24

ptám se na to proto, protože bych chtěl udělat nějakej plug-in no a PHP se mi nějak zalíbilo tak jsem přemejšlel nad pár blbostma.... ale tak JavaScript by snad už šel ne? :D

Odpovědět 4.9.2013 19:24
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Odpovídá na Snorlax
Michal Žůrek - misaz:4.9.2013 21:49

jo js by tam měl fungovat.

 
Odpovědět 4.9.2013 21:49
Avatar
Snorlax
Redaktor
Avatar
Odpovídá na Michal Žůrek - misaz
Snorlax:5.9.2013 16:38

tak s tím se moc nekamarádim ale asi nemám možnost... nebo mě napadlo tam dát <iframe> na nějakou stránku na netu s PHP.... to by šlo...

Odpovědět 5.9.2013 16:38
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Kit
Redaktor
Avatar
Odpovídá na Snorlax
Kit:5.9.2013 17:03

Také se říká, že když mám v ruce kladivo, tak všechno vypadá jako hřebík... :)

Odpovědět  +1 5.9.2013 17:03
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Snorlax
Redaktor
Avatar
Odpovídá na Kit
Snorlax:5.9.2013 17:51

asi použiju ten iframe.... nevidím jinou možnost... v JS se fakt nechci učit... alespoň zatim...

Odpovědět 5.9.2013 17:51
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Odpovídá na Snorlax
Michal Žůrek - misaz:5.9.2013 18:24

to je hloupý nápad, ten doplněk by měl fungovat i nějak offline.

 
Odpovědět 5.9.2013 18:24
Avatar
Odpovídá na Kit
Michal Žůrek - misaz:5.9.2013 18:24

a Snorlax je ten největší hřebík, že?

 
Odpovědět 5.9.2013 18:24
Avatar
Snorlax
Redaktor
Avatar
Odpovídá na Michal Žůrek - misaz
Snorlax:5.9.2013 19:07

tak třeba taková RSS čtečka je offline docela zbytečná :D

Odpovědět 5.9.2013 19:07
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Snorlax
Redaktor
Avatar
Odpovídá na Michal Žůrek - misaz
Snorlax:5.9.2013 19:07

já a kladivo nikdy nebyl kámoš :D

Odpovědět 5.9.2013 19:07
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Kit
Redaktor
Avatar
Odpovídá na Snorlax
Kit:5.9.2013 19:42

Pokud ta čtečka umí stahovat články, tak je docela užitečná.

Odpovědět 5.9.2013 19:42
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Snorlax
Redaktor
Avatar
Odpovídá na Kit
Snorlax:5.9.2013 19:57

to samozřejmě ano, ale to v plánu nemám... mě upřímě bude stačit když udělám aspoň něco :D

Odpovědět 5.9.2013 19:57
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Vojta Pšenák
Redaktor
Avatar
Vojta Pšenák:7.3.2014 23:13

Vypadá to, že Google rozšíření odjinud než z Google Web store zakáže, takže pokračování (už ho mám rozpracované) nejspíše nebude mít cenu.

 
Odpovědět 7.3.2014 23:13
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Vojta Pšenák
Samuel Illo :8.3.2014 9:20

Neviem či už aj nezakázalo rozšírenia. Mala byť na to posledná aktualizácia.

Odpovědět 8.3.2014 9:20
www.samuelillo.com | www.github.com/lamka02sk
Avatar
Odpovídá na Vojta Pšenák
Neaktivní uživatel:8.3.2014 10:10

Zakáže instalaci ze souboru, ale rozšíření se budou psát dál, takže nechápu, proč by to nemělo mít cenu.

Odpovědět  +1 8.3.2014 10:10
Neaktivní uživatelský účet
Avatar
Člen
Člen
Avatar
Člen:5.10.2014 14:54

Pekný článok :)

Odpovědět 5.10.2014 14:54
...
Avatar
dus30
Člen
Avatar
dus30:18.11.2017 6:44

prosím mě to v chromu píše tohle: invalid keys in icons: "default"

 
Odpovědět 18.11.2017 6:44
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 37 zpráv z 37.