Rozšírenie pre chrome
Väčšina ľudí, čo používa Google Chrome (Prípadne. Chromium) má nejaká rozšírenia. Tiež vás napadlo, ako sa robia?
V tomto tutoriále si vytvoríme rozšírenie, ktoré zobrazí Vaše obľúbené odkazy. Vytvoríme si rozšírenie typu Browser Action, ktoré môže mať ikonku.
Čo budeme potrebovať?
- mozog
- Počítač s nejakým editorom (gedit, na Wokno Notepad)
- Na testovanie Google Chromium / Chrome
súbory:
- manifest.json
- bg.html
- popup.html
- page2.html
- page3.html
Do súboru 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" } }
Nezabudnite si vytvoriť ikonu icon.png! Do súboru bg.html nič nedávame, je určený skôr pre zložitejšie rozšírenie. Do súboru 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">>></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"><<</a><a style="position: absolute;top: 230px;right: 20px;" href="page3.html">>></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"><<</a> </div> </html>
Ikonku si môžete vytvoriť vlastné.
Tak, teraz len rozšírenie pridať do chrome:
- nastavenia -> rozšírenie
- Aktivovať režim pre vývojárov
- Zbaliť rozšírenie
Nabudúce sa pozrieme na zúbok zložitejším rozšírením, ktoré už budú využívať URL, na ktorej sa používateľ nachádza.
A to je všetko, priatelia!
PS: Teda nie je. Hotové rozšírení nájdete v archíve. Ale pozor!, V najnovších verziách prehliadača Google Chrome (Chromium) je potrebné rozšírenie pridať pomocou stránky Rozšírenia, aby prehliadač vedel, že je skutočne chcete nainštalovať.