Rozšíření pro chrome

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

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

 

  Aktivity (1)

Článek pro vás napsal Vojta Pšenák
Avatar
Autor se věnuje psaní stránek v HTML a CSS, programování v PHP a skriptování v Pythonu. Vyznává filozofii OpenSource

Jak se ti líbí článek?
Celkem (10 hlasů) :
4.94.94.94.94.9


 


Miniatura
Všechny články v sekci
Ostatní články o HTML a CSS

 

 

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

Avatar
Michal Žůrek (misaz):

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):

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:

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:

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:

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:

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:

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 :

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; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Radim Sückr
Redaktor
Avatar
Odpovídá na Vojta Pšenák
Radim Sückr:

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
Avatar
Člen
Člen
Avatar
Člen:

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