Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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">&#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 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!

Rozšírenie pre Chrome - Ostatné články o HTML a CSS
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ť.

 

Všetky články v sekcii
Ostatné články o HTML a CSS
Článok pre vás napísal Vojta Pšenák
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
...
Aktivity