Rozšíření pro chrome

HTML a CSS Ostatní Rozšíření pro chrome

ONEbit hosting 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 345x (32.74 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML

 

 

Článek pro vás napsal Vojta Pšenák
Avatar
Jak se ti líbí článek?
10 hlasů
Autor se věnuje psaní stránek v HTML a CSS, programování v PHP a skriptování v Pythonu. Vyznává filozofii OpenSource
Miniatura
Všechny články v sekci
Ostatní články o HTML a CSS
Aktivity (1)

 

 

Komentáře
Zobrazit starší komentáře (26)

Avatar
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
Nesnáším {}, proto se jim vyhýbám.
Avatar
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
Nesnáším {}, proto se jim vyhýbám.
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
...
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 10 zpráv z 36. Zobrazit vše