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í!