Chrome tīmekļa paplašinājums - nav nepieciešama iepriekšēja pieredze ar kodēšanu: 6 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:52

Chrome paplašinājumi ir nelielas programmas, kas izveidotas, lai uzlabotu lietotāju pārlūkošanas pieredzi. Lai iegūtu papildinformāciju par Chrome paplašinājumiem, apmeklējiet vietni

Lai izveidotu Chrome tīmekļa paplašinājumu, ir nepieciešama kodēšana, tāpēc ir ļoti noderīgi pārskatīt HTML, JavaScript un CSS zemāk esošajā vietnē:

www.w3schools.com/default.asp (w3 skolas ir laba vietne resursu kodēšanai)

Vai nezināt, kā kodēt? Neuztraucieties, šī apmācība palīdzēs jums virzīties uz priekšu.

Pats labākais Chrome paplašinājumos ir tas, ka tos var pielāgot. Tas nav tikai viena konkrēta lieta, ko var izdarīt, tāpēc esiet radošs.

Piegādes

Nepieciešamie materiāli ir norādīti zemāk:

• Dators ar teksta redaktoru (es izmantoju Notepad)
• Google Chrome

Un tas arī viss!

1. darbība: izveidojiet direktoriju

Vispirms izveidojiet mapi visu failu glabāšanai un nosauciet to par “paplašinājumu”. Ja vēlaties, nosaukumu var mainīt vēlāk.

2. darbība: izveidojiet manifesta failu un kodējiet to

Manifesta fails ir ļoti svarīga paplašinājuma sastāvdaļa. Tas precīzi norāda paplašinājumam, kas jādara un jābūt. Manifesta faili ir formatēti JSON. Pirmais solis ir atvērt teksta redaktoru un saglabāt jaunu failu kā “manifest.json”.

Tālāk ierakstiet zemāk esošo skriptu:

{

"name": "Pirmais paplašinājums", "versija": "1.0", "description": "Es varu kodēt paplašinājumu", "manifest_version": 2, "browser_action": {"default_title": "Pirmais paplašinājums"}}

Atcerieties komatus aiz vērtībām!

Kad tas ir ievadīts, saglabājiet manifesta failu un dodieties uz vietni chrome: // extensions (pārlūks ir jāizmanto pārlūkā Chrome). Kad esat atvēris chrome: // extensions, ieslēdziet izstrādātāja režīmu. Pēc tam nospiediet pogu “Ielādēt izpakotu” un atlasiet mapi “paplašinājums”.

bungu rullis, lūdzu …

Yay! Tas ir pagarinājums, izņemot … tā veida garlaicību. Pašlaik tas burtiski neko nedara, bet drīz tas būs super foršs.

3. darbība: izveidojiet ikonas un atjauniniet manifestu

Viena vietne, kas labi darbojas ikonu zīmēšanai, ir https://www.piskelapp.com/. Ir pieejamas arī citas zīmēšanas programmas. Ikonām jābūt kvadrātveida. Šajā projektā tiks izmantotas ikonas 16x16, 32x32, 48x48 un 128x128. Kad ikona ir izveidota, paplašinājuma mapē izveidojiet mapi ar nosaukumu “attēli” un ievietojiet ikonu šajā mapē. Varētu būt laba ideja nosaukt attēlu atbilstoši tā lielumam. Piemēram, 'icon32.png'. Jaunais kods ir redzams zemāk:

{

"name": "Pirmais paplašinājums", "versija": "1.0", "description": "Es varu kodēt paplašinājumu", "manifest_version": 2, "browser_action": {"default_title": "Pirmais paplašinājums", " default_icon ": {" 16 ":" images/icon16-p.webp

Lai iegūtu atsauci uz manifesta kodu, apmeklējiet vietni

4. darbība: pievienojiet uznirstošo logu

Šim paplašinājumam būs uznirstošais logs. Uznirstošais logs ir HTML (hiperteksta iezīmēšanas valodas) fails, tāpēc ir labi vispirms apgūt HTML, CSS un JavaScript pamatus.

Vispirms paplašinājumu mapē saglabājiet dokumentu kā “popup.html” failu.

Pēc tam rediģējiet manifesta failu, lai uz tā noklikšķināšanas tiktu parādīts “popup.html”. Jaunais kods ir redzams zemāk:

{

"name": "Pirmais paplašinājums", "versija": "1.0", "description": "Es varu kodēt paplašinājumu", "manifest_version": 2, "browser_action": {"default_title": "Pirmais paplašinājums", " default_icon ": {" 16 ":" images/icon16-p.webp

Neaizmirstiet komatu!

Tagad, ja popup.html ir pievienots šāds HTML kods, tad uzklikšķinot uz tā parādīsies “Sveika pasaule”.

Sveika pasaule

5. solis: lai tas izskatās labi un padara to interaktīvu

Ja tiek ierakstīta vienkārša HTML līnija, tad tiek izpildīts minimālais minimums. Ja tiek pievienota CSS (kaskādes stila lapas), tas izskatīsies vēsāk, un, ja tiek pievienots JavaScript, tas var būt interaktīvāks. Šajā apmācībā netiks detalizēti izskaidrots HTML, JavaScript un CSS, taču tiešsaistē ir daudz resursu. Zemāk ir kods vienkāršai programmai “Sveika pasaule” un attiecīgi krāsainākai programmai:

Sveika pasaule

Sveika pasaule

#hello {background-color: #000000; krāsa: #ff0000; robeža: 8 pikseļu sākums #86a3b2; robežas rādiuss: 50 pikseļi; pārveidot: pagriezt (57deg); polsterējums: 10 pikseļi; lietotāja izvēle: nav; kursors: šķērsgriezums; pāreja: pārveidot 2s; } #hello: virziet kursoru {pārveidot: pagriezt (-417deg); }

Šis otrais piemērs iesācējam varētu būt ļoti mulsinošs. Bet tam bija jāparāda, cik svarīga programmai/paplašinājumam ir CSS. Tagad būtu īstais laiks atpūsties un iemācīties HTML5 kodēšanu, kā arī izmantot vietni developer.chrome.com. Tas var aizņemt kādu laiku, bet to var ievērojami pagarināt.

6. darbība: publicējiet to Chrome interneta veikalā

Ja kāds ir izveidojis patiešām lielisku paplašinājumu un vēlas to kopīgot ar pasauli, viņš var to publicēt. Galu galā tas ir pagarinājuma punkts. Šī apmācība tikai mēģināja izskaidrot manifesta failu un to, kā jūs to varat izmantot, un tam vienkārši bija programma “Hello World”.

Pirmā lieta, kas jādara, lai paplašinājumu padarītu publisku, ir paplašinājuma mapi padarīt par zip failu. Otra lieta, kas jādara, ir apmeklēt vietni https://chrome.google.com/webstore/category/extensions un pieteikties Google kontā. Pēc tam noklikšķiniet uz iestatījumu zobrata pogas un pēc tam uz “izstrādātāja informācijas panelis”. Nospiediet pogu 'Jauns vienums', lai augšupielādētu zip failu. Kad esat tur, ir jārediģē veikala ieraksts, konfidencialitāte un cenas. Paplašinājumu var viegli publicēt, ja tas tiek iesniegts pārskatīšanai.

Tagad, kad paplašinājums ir pabeigts, turpiniet kodēt!