Obsah:
- Zásoby
- Krok 1: Vytvorte adresár
- Krok 2: Vytvorte manifestný súbor a nakódujte ho
- Krok 3: Vytvorte ikony a aktualizujte manifest
- Krok 4: Pridajte vyskakovacie okno
- Ahoj Svet
- Krok 5: Nech to vyzerá dobre a interaktívne
- Ahoj Svet
- Ahoj Svet
- Krok 6: Publikovanie v Internetovom obchode Chrome
Video: Webové rozšírenie Chrome - nie sú potrebné žiadne predchádzajúce skúsenosti s kódovaním: 6 krokov
2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:56
Rozšírenia Chrome sú malé programy navrhnuté tak, aby zlepšovali zážitok z prehliadania používateľov. Ďalšie informácie o rozšíreniach pre Chrome nájdete na
Na vytvorenie webového rozšírenia pre Chrome je potrebné kódovanie, takže je veľmi užitočné skontrolovať HTML, JavaScript a CSS na nižšie uvedenom webe:
www.w3schools.com/default.asp (školy w3 sú dobrou webovou stránkou na kódovanie zdrojov)
Neviete, ako kódovať? Nebojte sa, tento návod vám pomôže nasmerovať cestu.
Najlepšie na rozšíreniach Chrome je, že sa dajú prispôsobiť. Nie je možné robiť len jednu konkrétnu vec, takže buďte kreatívni.
Zásoby
Potrebné zásoby sú uvedené nižšie:
- Počítač s textovým editorom (používam Poznámkový blok)
- Google Chrome
A to je všetko!
Krok 1: Vytvorte adresár
Najprv vytvorte priečinok pre všetky súbory a pomenujte ho „prípona“. V prípade potreby je možné meno neskôr zmeniť.
Krok 2: Vytvorte manifestný súbor a nakódujte ho
Súbor manifestu je veľmi dôležitou súčasťou rozšírenia. Rozšíreniu presne povie, čo má a má byť. Súbory manifestu sú formátované vo formáte JSON. Prvým krokom je otvorenie textového editora a uloženie nového súboru ako 'manifest.json'.
Ďalej zadajte nasledujúci skript:
{
"name": "First Extension", "version": "1.0", "description": "I can code an extension", "manifest_version": 2, "browser_action": {"default_title": "First Extension"}}
Za hodnotami si pamätajte čiarky!
Potom, čo to napíšete, uložte súbor manifestu a prejdite na chrome: // extensions (Ako prehliadač by sa na to mal použiť prehliadač Chrome). Keď ste na adrese chrome: // extensions, zapnite režim pre vývojárov. Potom kliknite na tlačidlo „Načítať rozbalené“a vyberte priečinok „prípona“.
bubon, prosím …
Jéj! Je to rozšírenie, ibaže … je to nudné. Momentálne to nič nerobí, ale čoskoro to bude super.
Krok 3: Vytvorte ikony a aktualizujte manifest
Jedna webová stránka, ktorá funguje dobre na kreslenie ikon, je https://www.piskelapp.com/. K dispozícii sú aj ďalšie kresliace programy. Ikony by mali byť štvorcové. Tento projekt bude používať ikony 16x16, 32x32, 48x48 a 128x128. Po vytvorení ikony vytvorte v priečinku rozšírenia priečinok s názvom „images“a do tohto priečinka vložte ikonu. Možno by bolo vhodné pomenovať obrázok podľa jeho veľkosti. Napríklad „icon32.png“. Nový kód je uvedený nižšie:
{
"name": "First Extension", "version": "1.0", "description": "I can code an extension", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images/icon16.png "," 32 ":" images/icon32.png "," 48 ":" images/icon48.png "," 128 ":" images/icon128.png "}}}
Odkaz na kód manifestu nájdete na stránke
Krok 4: Pridajte vyskakovacie okno
Toto rozšírenie bude mať vyskakovacie okno. Vyskakovacie okno je súbor HTML (Hypertext Markup Language), takže je dobré sa najskôr naučiť základy HTML, CSS a JavaScript.
Najprv uložte dokument ako súbor „popup.html“do priečinka s príponou.
Potom upravte súbor manifestu tak, aby po kliknutí zobrazoval „popup.html“. Nový kód je uvedený nižšie:
{
"name": "First Extension", "version": "1.0", "description": "I can code an extension", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" images/icon16.png "," 32 ":" images/icon32.png "," 48 ":" images/icon48.png "," 128 ":" images/icon128.png "}," default_popup ":" popup.html "}}
Nezabudnite na čiarku!
Teraz, ak je do popup.html pridaný nasledujúci kód HTML, zobrazí sa po kliknutí „Hello World“.
Ahoj Svet
Krok 5: Nech to vyzerá dobre a interaktívne
Ak je zadaný základný riadok HTML, vykoná sa nevyhnutné minimum. Ak sa pridá CSS (Cascading Style Sheets), bude to pôsobiť chladnejšie a ak sa pridá JavaScript, môže to byť interaktívnejšie. Tento tutoriál nepôjde do podrobností vysvetľujúcich HTML, JavaScript a CSS, ale existuje množstvo zdrojov online. Nasleduje kód jednoduchého programu Hello World, potom farebnejší program:
Ahoj Svet
Ahoj Svet
#hello {farba pozadia: #000000; farba: #ff0000; orámovanie: 8px začiatok #86a3b2; polomer ohraničenia: 50 pixlov; transformácia: otočenie (57 stupňov); polstrovanie: 10 pixelov; užívateľský výber: žiadny; kurzor: nitkový kríž; prechod: transformácia 2s; } #hello: hover {transform: rotate (-417deg); }
Tento druhý príklad môže byť pre začiatočníka veľmi mätúci. Toto vám však malo ukázať, aké dôležité sú CSS pre program/rozšírenie. Teraz by bolo načase si dať prestávku a naučiť sa niečo o kódovaní HTML5 a ako referenciu použiť developer.chrome.com. Môže to chvíľu trvať, ale je možné urobiť veľké rozšírenie.
Krok 6: Publikovanie v Internetovom obchode Chrome
Ak niekto urobil skutočne skvelé rozšírenie a chce ho zdieľať s celým svetom, môže ho zverejniť. To je koniec koncov bod predĺženia. Tento tutoriál sa pokúsil vysvetliť súbor manifestu a spôsob, ako ho môžete použiť, a mal iba program „Hello World“.
Prvá vec, ktorú musíte urobiť, aby bolo rozšírenie verejné, je vytvoriť priečinok rozšírenia do súboru zip. Druhá vec, ktorú musíte urobiť, je navštíviť stránku https://chrome.google.com/webstore/category/extensions a prihlásiť sa do účtu Google. Potom kliknite na tlačidlo ozubeného kolieska nastavení a potom kliknite na „panel vývojárov“. Kliknutím na tlačidlo „Nová položka“nahrajte súbor zip. Akonáhle ste tam, je potrebné upraviť záznam v obchode, súkromie a ceny. Rozšírenie je možné ľahko zverejniť, ak je odoslané na kontrolu.
Teraz, keď je rozšírenie dokončené, pokračujte v kódovaní!
Odporúča:
Skúsenosti z výroby PCB Hecho Con Dremel: 8 krokov
Experimenty s výrobou PCB Hecho Con Dremel: El d í a de hoy queremos subir unintento/experimento para hacer PCBs use use dremel y papel. Návody na použitie majú niekoľko tipov, ako skončiť a skončiť, alebo napríklad: Herramientas y materiales Dremel 4000 Punta diamante
Rozšírenie pre akýkoľvek DJ softvér, ktorý chcete !: 6 krokov
Rozšírenie pre akýkoľvek DJ softvér, ktorý chcete !: Nie každý môže jednoducho skočiť do DJ -ského prvého dňa a očakávať, že v prvý deň bude mať pripravené všetky mixéry, gramofóny a horúce tága, ale buďme tu skutoční: mixovanie na prenosnom počítači je nanič. Na to slúži toto, aby sa vyriešili všetky vaše finančné starosti
Žiadne Makey Makey? Žiadne problémy ! Ako si vyrobiť makeyy doma?: 3 kroky
Žiadne Makey Makey? Žiadne problémy ! Ako si vyrobiť makeyy doma ?: Už ste sa niekedy chceli zúčastniť súťaže Makey Makey o pokynoch, ale nikdy ste Makey Makey Makey nemali?! TERAZ môžete! V nasledujúcej príručke vám chcem ukázať, ako si vytvoriť vlastnú Makey Makey pomocou niekoľkých jednoduchých komponentov, ktoré môžete
Nositeľné senzorické rozšírenie Cat Whisker (2,0): 6 krokov (s obrázkami)
Nositeľné senzorické rozšírenie Cat Whisker (2.0): Tento projekt je pokračovaním a preformátovaním „Whisker Sensory Extension Wearable“môjho bývalého kolegu (metaterra). Cieľom tohto projektu bolo zamerať sa na vytvorenie nových, výpočtovo obohatených „zmyslových rozšírení“, ktoré
Automobil Bluetooth RC Arduino s pohonom všetkých štyroch kolies a motorovým štítom UNO R3, HC-05 a L293D s kódovaním a aplikáciou pre Android: 8 krokov
Automobil Bluetooth RC Arduino s pohonom všetkých štyroch kolies s použitím motorového štítu UNO R3, HC-05 a L293D s kódovaním a aplikáciou pre Android: Dnes vám poviem, ako vyrobiť bluetooth RC auto arduino s pohonom všetkých štyroch kolies pomocou štítu motora HC 05, L293, 4 DC motor, s kódovaním a aplikáciou pre Android na ovládanie auta. Použitý komponent: -1-Arduino UNO R32-Bluetooth HC-053-Motorshield L293