Ako vytvoriť jednoduché rozšírenie pre Chrome

Vytvorenie rozšírenia pre Chrome je pomerne jednoduchý proces. Keď skončíte, budete ho môcť použiť vo svojom počítači na zlepšenie fungovania prehliadača.

Existuje niekoľko základných komponentov, ktoré prehliadač vyžaduje, aby bolo rozšírenie plne funkčné. To všetko si prejdeme nižšie vrátane toho, ako zabezpečiť, aby vaše vlastné rozšírenie fungovalo v prehliadači Chrome(Chrome) bez toho, aby ste ho museli nahrávať alebo zdieľať s kýmkoľvek iným.

Vytvorenie komplexného rozšírenia pre Chrome je proces oveľa podrobnejší ako to, čo uvidíte nižšie, ale všeobecný proces je rovnaký. Pokračujte v čítaní a zistite, ako vytvoriť rozšírenie pre Chrome , ktoré môžete začať používať už dnes.

Tip : Ak chcete vidieť, aké úžasné môže byť vaše vlastné rozšírenie, pozrite si tieto úžasné rozšírenia pre Chrome(these amazing Chrome extensions) .

Ako vytvoriť rozšírenie pre Chrome

Pomocou tohto sprievodcu vytvoríte jednoduché rozšírenie pre Chrome , ktoré obsahuje niektoré z vašich obľúbených webových stránok. Je plne prispôsobiteľný a skutočne ľahko sa aktualizuje.

Čo robiť:

  • Vytvorte priečinok, ktorý bude obsahovať všetky súbory, ktoré tvoria príponu.
  • Vytvorte základné súbory, ktoré toto rozšírenie vyžaduje: manifest.json , popup.html , background.html , styles.css .
  • Otvorte popup.html v textovom editore a potom tam vložte všetky nasledujúce položky a po dokončení ich nezabudnite uložiť.
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

Neváhajte(Feel) a upravte odkazy a text odkazov, alebo ak chcete, aby bolo rozšírenie pre Chrome presne také, aké sme my, ponechajte všetko pri starom.

  • Otvorte manifest.json v textovom editore a skopírujte/prilepte nasledovné:

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

“manifest_version”: 2,
“name”: “Obľúbené stránky”, ( “name”: “Favorite Sites”,)
“description”: “Všetky moje obľúbené webové stránky.”, ( “description”: “All my favorite websites.”,)
“version”: “1.0”,
“icons”: {
“16”: “icon.png”,
„32“: „icon.png“,
„48“: „icon.png“,
„128“: „icon.png“
},

   “background”: { 
        “page”:”background.html”
},

    “browser_action” : {
        “default_icon” : “icon.png”,
        “default_title” : “Obľúbené stránky”, (        “default_title” : “Favorite Sites”,)
        “default_popup”: “popup.html”
    }
}

Jedlé oblasti tohto kódu zahŕňajú názov(name) , popis(description) a predvolený(default_title) názov .

  • Otvorte styles.css a prilepte nasledujúci kód. To je to, čo zdobí vyskakovacie menu, aby bolo oveľa atraktívnejšie na pohľad a ešte jednoduchšie na používanie.

#myUL {
list-style-type: none;
   výplň: 0; (   padding: 0;)
   okraj: 0; (   margin: 0;)
   šírka: 300px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  výplň: 12px; (  padding: 12px;)
  text-dekorácia: žiadna; (  text-decoration: none;)
  veľkosť písma: 18px; (  font-size: 18px;)
  farba: čierna; (  color: black;)
  displej: blok; (  display: block;)
  font-family: 'Noto Sans', bezpätkové; (  font-family: ‘Noto Sans’, sans-serif;)
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

V súbore CSS môžete zmeniť veľa . Po vytvorení rozšírenia pre Chrome(Chrome) sa pohrajte s týmito možnosťami a prispôsobte si ho podľa svojich predstáv.

  • Vytvorte(Create) ikonu rozšírenia a pomenujte ju icon.png . Umiestnite ho do priečinka rozšírenia Chrome . Ako vidíte v kóde vyššie, môžete vytvoriť samostatnú ikonu pre tieto veľkosti: 16 × 16 pixelov, 32 × 32 atď.

Tip: Google má viac informácií(Google has more information) o vytváraní rozšírení pre Chrome . Existujú ďalšie príklady a rozšírené možnosti, ktoré presahujú rámec jednoduchých krokov, ktoré sme tu uviedli.

Ako pridať vlastné rozšírenie(Custom Extension) do prehliadača Chrome

Teraz, keď ste vytvorili rozšírenie Chrome , je čas pridať ho do prehliadača, aby ste mohli skutočne používať všetky súbory, ktoré ste práve vytvorili. Inštalácia vlastného rozšírenia zahŕňa postup, ktorý sa líši od postupu inštalácie bežného rozšírenia pre Chrome(how you’d install a normal Chrome extension) .

  • V ponuke Chrome prejdite na položku Ďalšie nástroje(More tools ) > Rozšírenia(Extensions) . Alebo do panela s adresou zadajte chrome://extensions/
  • Vyberte tlačidlo vedľa režimu vývojára,(Developer mode) ak ešte nie je vybraté. Tým sa zapne špeciálny režim, ktorý vám umožní importovať vlastné rozšírenia prehliadača Chrome(Chrome) .

  • Pomocou tlačidla Načítať rozbalené(Load unpacked ) v hornej časti stránky vyberte priečinok, ktorý ste vytvorili v kroku 1(Step 1) vyššie.

  • Prijmite(Accept) všetky výzvy, ak ich vidíte. V opačnom prípade sa vaše prispôsobené rozšírenie prehliadača Chrome(Chrome) zobrazí spolu s ďalšími rozšíreniami, ktoré máte, v pravom hornom rohu prehliadača.

Úprava rozšírenia pre Chrome

Teraz, keď je vaše rozšírenie pre Chrome použiteľné, môžete vykonať zmeny, aby ste si ho prispôsobili. 

Súbor styles.css riadi, ako sa rozšírenie zobrazí, takže môžete upraviť celkový štýl zoznamu a zmeniť farbu alebo typ písma. W3Schools je jedným z najlepších zdrojov, kde sa dozviete o všetkých rôznych veciach, ktoré môžete robiť s CSS .

Ak chcete zmeniť poradie, v akom sú webové stránky uvedené, alebo pridať či viac stránok či odstrániť existujúce, upravte súbor popup.html. Nezabudnite ponechať úpravy iba adresy URL(URL) a názvu. Všetky ostatné znaky, ako sú <li> a <html> , sú povinné a nemali by sa meniť. HTML Tutorial na W3Schools(HTML Tutorial on W3Schools) je dobrým miestom, kde sa môžete dozvedieť viac o tomto jazyku.



Klement Sýkora

About the author

V podnikaní je to všetko o vytváraní hodnoty pre vašich klientov a zákazníkov. Zameriavam sa na poskytovanie podrobných pokynov, ktoré pomôžu mojim čitateľom vyťažiť maximum zo svojho hardvéru a softvéru pomocou balíka Microsoft Office. Medzi moje zručnosti patrí inštalácia klávesnice a ovládačov, ako aj podpora Microsoft Office. S mojimi dlhoročnými skúsenosťami v tomto odvetví vám môžem pomôcť pokryť akékoľvek hardvérové ​​alebo softvérové ​​potreby, ktoré by ste mohli mať.


Related posts