Chrome -webuitbreiding - geen voorafgaande kodering -ervaring nodig nie: 6 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:24

Chrome -uitbreidings is klein programme wat gebou is om die gebruikerservaring van gebruikers te verbeter. Gaan na https://developer.chrome.com/extensions vir meer inligting oor chrome -uitbreidings.

Om 'n Chrome -webuitbreiding te maak, is kodering nodig, daarom is dit baie handig om HTML, JavaScript en CSS na te gaan op die onderstaande webwerf:

www.w3schools.com/default.asp (w3 -skole is 'n goeie webwerf vir die kodering van hulpbronne)

Weet u nie hoe om te kodeer nie? Moenie bekommerd wees nie, hierdie handleiding sal u help om die pad te volg.

Die beste ding met Chrome -uitbreidings is dat dit aangepas kan word. Dit is nie net een spesifieke ding wat gedoen kan word nie, so wees kreatief.

Voorrade

Die benodigdhede is hieronder:

• 'N Rekenaar met 'n teksredakteur (ek gebruik Notepad)
• Google Chrome

En dit is al!

Stap 1: Skep die gids

Maak eers 'n gids om al die lêers te bevat en noem dit 'uitbreiding'. Die naam kan later verander word indien nodig.

Stap 2: Skep die manifestlêer en kodeer dit

Die manifes -lêer is 'n baie belangrike deel van die uitbreiding. Dit vertel die uitbreiding presies wat om te doen en te wees. Manifestlêers word in JSON geformateer. Die eerste stap is om 'n teksredakteur oop te maak en 'n nuwe lêer te stoor as 'manifest.json'.

Tik dan die onderstaande skrif:

{

"name": "Eerste uitbreiding", "weergawe": "1.0", "beskrywing": "Ek kan 'n uitbreiding kodeer", "manifest_version": 2, "browser_action": {"default_title": "Eerste uitbreiding"}}

Onthou die kommas na die waardes!

Stoor die manifeslêer nadat dit getik is, en gaan na chrome: // extensions (Chrome moet hiervoor as blaaier gebruik word). Sodra u by chrome: // extensions aangeskakel het, skakel die ontwikkelaarmodus aan. Druk daarna op die knoppie 'Laai uitgepak' en kies die 'uitbreiding' -lêergids.

trommelrol asseblief …

Yay! Dit is 'n uitbreiding, behalwe … dit is vervelig. Dit doen letterlik niks op die oomblik nie, maar binnekort sal dit super cool wees.

Stap 3: Skep die ikone en werk die manifestasie by

Een webwerf wat goed werk om ikone te teken, is https://www.piskelapp.com/. Daar is ook ander tekenprogramme beskikbaar. Die ikone moet vierkantig wees. Hierdie projek gebruik ikone 16x16, 32x32, 48x48 en 128x128. Sodra die ikoon gemaak is, maak 'n gids met die naam 'beelde' in die uitbreidingsmap en plaas die ikoon in die gids. Dit kan 'n goeie idee wees om 'n prent volgens die grootte daarvan te noem. Byvoorbeeld, 'icon32.png'. Die nuwe kode is hieronder:

{

"name": "Eerste uitbreiding", "weergawe": "1.0", "beskrywing": "Ek kan 'n uitbreiding kodeer", "manifest_version": 2, "browser_action": {"default_title": "Eerste uitbreiding", " default_icon ": {" 16 ":" images/icon16-p.webp

Gaan na https://developer.chrome.com/extensions/manifest vir verwysing na die manifeskode.

Stap 4: Voeg 'n pop -up by

Hierdie uitbreiding sal 'n opspring hê. Die opspring is 'n HTML -lêer (Hypertext Markup Language), daarom is dit goed om eers die basiese beginsels van HTML, CSS en JavaScript te leer.

Stoor eers 'n dokument as 'popup.html' -lêer in die uitbreidingsmap.

Wysig dan die manifeslêer om 'popup.html' te wys as daar geklik word. Die nuwe kode is hieronder:

{

"name": "Eerste uitbreiding", "weergawe": "1.0", "beskrywing": "Ek kan 'n uitbreiding kodeer", "manifest_version": 2, "browser_action": {"default_title": "Eerste uitbreiding", " default_icon ": {" 16 ":" images/icon16-p.webp

Moenie die komma vergeet nie!

As die volgende HTML -kode bygevoeg word in popup.html, sal dit 'Hallo wêreld' wys as daar geklik word.

Hello Wêreld

Stap 5: Laat dit goed lyk en maak dit interaktief

As 'n basiese HTML -reël ingetik word, word dit die minimum gedoen. As CSS (Cascading Style Sheets) bygevoeg word, sal dit koeler lyk, en as JavaScript bygevoeg word, kan dit meer interaktief wees. Hierdie handleiding sal nie in detail verduidelik word oor HTML, JavaScript en CSS nie, maar daar is baie hulpbronne aanlyn. Hieronder is die kode vir die eenvoudige 'Hello World' -program, dan die meer kleurryke program, onderskeidelik:

Hello Wêreld

Hello Wêreld

#hallo {agtergrond-kleur: #000000; kleur: #ff0000; grens: 8px aanvang #86a3b2; grensradius: 50 px; transformeer: draai (57 grade); opvulling: 10 px; gebruiker-kies: geen; wyser: dwarshaar; oorgang: transformeer 2s; } #hallo: sweef {transform: rotate (-417deg); }

Hierdie tweede voorbeeld kan vir 'n beginner baie verwarrend wees. Maar dit was om u te wys hoe belangrik CSS vir 'n program/uitbreiding is. Dit is 'n goeie tyd om 'n blaaskans te neem en HTML5 -kodering te leer en ontwikkelaar.chrome.com te gebruik. Dit kan 'n rukkie neem, maar 'n uitstekende uitbreiding kan gemaak word.

Stap 6: Publiseer dit in die Chrome -webwinkel

As iemand 'n uitstekende uitbreiding gemaak het en dit met die wêreld wil deel, kan hulle dit publiseer. Dit is immers die punt van 'n uitbreiding. Hierdie handleiding het slegs probeer om die manifeslêer en hoe u dit kan gebruik, te verduidelik, en dit het net 'n 'Hello World' -program.

Die eerste ding wat u moet doen om 'n uitbreiding openbaar te maak, is om die uitbreidingsmap in 'n zip -lêer te maak. Die tweede ding om te doen is om na https://chrome.google.com/webstore/category/extensions te gaan en by 'n Google -rekening aan te meld. Klik dan op die instellingsratknoppie en klik dan op 'ontwikkelaarskerm'. Druk die 'New Item' -knoppie om die zip -lêer op te laai. As u daar is, moet u die winkellys, privaatheid en pryse wysig. 'N Uitbreiding kan maklik gepubliseer word as dit vir hersiening voorgelê word.

Noudat die uitbreiding klaar is, gaan voort met die kode!