Zgjatja e uebit të Chrome - Nuk nevojitet përvojë paraprake e kodimit: 6 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:10

Shtesat e Chrome janë programe të vogla të krijuara për të përmirësuar përvojën e shfletimit të përdoruesve. Për më shumë informacion mbi shtesat e kromit shkoni te

Për të bërë një shtesë në ueb Chrome, kërkohet kodim, kështu që është shumë e dobishme të rishikoni HTML, JavaScript dhe CSS në faqen e mëposhtme të internetit:

www.w3schools.com/default.asp (shkollat w3 është një uebfaqe e mirë për kodimin e burimeve)

Nuk dini si të kodoni? Mos u shqetësoni, ky mësim do t'ju ndihmojë të udhëzoni rrugën.

Gjëja më e mirë për Extensions Chrome është se ato mund të personalizohen. Nuk është vetëm një gjë specifike që mund të bëhet, prandaj bëhuni krijues.

Furnizimet

Furnizimet e nevojshme janë më poshtë:

• Një kompjuter me një redaktues teksti (Unë jam duke përdorur Notepad)
• Google Chrome

Dhe kjo eshte e gjitha!

Hapi 1: Krijoni Drejtorinë

Së pari, krijoni një dosje për të mbajtur të gjithë skedarët dhe emërtojeni atë 'zgjerim'. Nëse dëshironi, emri mund të ndryshohet më vonë.

Hapi 2: Krijoni skedarin Manifest dhe kodojeni atë

Skedari manifest është një pjesë shumë e rëndësishme e shtesës. Ajo i tregon zgjerimit saktësisht se çfarë të bëjë dhe të jetë. Skedarët e manifestit janë të formatuar në JSON. Hapi i parë është të hapni një redaktues teksti dhe të ruani një skedar të ri si 'manifest.json'.

Tjetra shkruani skriptin e mëposhtëm:

{

"name": "Zgjatja e parë", "versioni": "1.0", "përshkrimi": "Mund të kodoj një shtesë", "manifest_version": 2, "browser_action": {"default_title": "Shtesa e parë"}}

Mbani mend presjet pas vlerave!

Pasi të shtypet kjo, ruani skedarin e manifestit dhe shkoni te chrome: // extensions (Chrome duhet të përdoret si shfletues për këtë). Pasi të jeni në chrome: // extensions, aktivizoni modalitetin e zhvilluesit. Pas kësaj, shtypni butonin 'Load unpacked' dhe zgjidhni dosjen 'extension'.

daulle rrotull ju lutem…

Po! Kjo është një shtrirje, përveç … llojit të saj të mërzitshëm. Nuk bën fjalë për fjalë asgjë tani për tani, por së shpejti do të jetë super e ftohtë.

Hapi 3: Krijoni ikona dhe azhurnoni manifestin

Një faqe në internet që funksionon mirë për vizatimin e ikonave është https://www.piskelapp.com/. Ekzistojnë gjithashtu programe të tjera vizatimi për përdorim. Ikonat duhet të jenë katrore. Ky projekt do të përdorë ikona 16x16, 32x32, 48x48 dhe 128x128. Pasi të krijohet ikona, bëni një dosje të quajtur 'imazhe' në dosjen e zgjerimit dhe vendosni ikonën në atë dosje. Mund të jetë një ide e mirë të emërtoni një imazh sipas madhësisë së tij. Për shembull, 'icon32.png'. Kodi i ri është më poshtë:

{

"name": "Zgjatja e parë", "versioni": "1.0", "përshkrimi": "Unë mund të kodoj një shtesë", "manifest_version": 2, "browser_action": {"default_title": "Shtesa e parë", " default_icon ": {" 16 ":" images/icon16.png "," 32 ":" images/icon32.png "," 48 ":" images/icon48.png "," 128 ":" images/icon128.png "}}}

Për referencë në kodin e manifestit, shkoni te

Hapi 4: Shtoni një dritare kërcyese

Kjo shtesë do të ketë një dritare kërcyese. Dritarja është një skedar HTML (Hypertext Markup Language), kështu që është mirë që së pari të mësoni bazat e HTML, CSS dhe JavaScript.

Së pari, ruani një dokument si skedar 'popup.html' në dosjen e zgjerimit.

Tjetra, modifikoni skedarin e manifestit për të shfaqur 'popup.html' kur të klikohet. Kodi i ri është më poshtë:

{

"name": "Zgjatja e parë", "versioni": "1.0", "përshkrimi": "Unë mund të kodoj një shtesë", "manifest_version": 2, "browser_action": {"default_title": "Shtesa e parë", " default_icon ": {" 16 ":" images/icon16.png "," 32 ":" images/icon32.png "," 48 ":" images/icon48.png "," 128 ":" images/icon128.png "}," default_popup ":" popup.html "}}

Mos harroni presjen!

Tani, nëse kodi HTML i mëposhtëm shtohet në popup.html, atëherë do të shfaqë 'Përshëndetje Botërore' kur klikohet.

Përshendetje Botë

Hapi 5: Bëni që të duket mirë dhe bëjeni atë interaktiv

Nëse një linjë bazë HTML është shtypur, atëherë ajo merr minimumin e kryer. Nëse shtohet CSS (Cascading Style Sheets), atëherë do të duket më e ftohtë, dhe nëse shtohet JavaScript, atëherë mund të jetë më interaktive. Ky tutorial nuk do të hyjë në detaje duke shpjeguar HTML, JavaScript dhe CSS, por ka shumë burime në internet. Më poshtë është kodi për programin e thjeshtë 'Përshëndetje Botërore', pastaj programin më të gjallë, respektivisht:

Përshendetje Botë

Përshendetje Botë

#hello {background-color: #000000; ngjyra: #ff0000; kufi: fillimi 8px #86a3b2; kufiri-rreze: 50px; transformo: rrotullohu (57 gradë); mbushje: 10px; përdoruesi i zgjedhur: asnjë; kursori: kryqëzim flokësh; kalimi: transformoni 2s; } #hello: rri pezull {transform: rrotullo (-417deg); }

Ky shembull i dytë mund të jetë shumë konfuz, për një fillestar. Por, kjo ishte për t'ju treguar se sa e rëndësishme është CSS për një program/shtesë. Tani do të ishte një kohë e mirë për të bërë një pushim dhe për të mësuar disa kodime HTML5 dhe për të përdorur developer.chrome.com për ndonjë referencë. Mund të duhet pak kohë, por mund të bëhet një shtrirje e madhe.

Hapi 6: Publikimi i tij në Dyqanin e Uebit Chrome

Nëse dikush ka bërë një shtrirje vërtet të madhe dhe dëshiron ta ndajë me botën, atëherë mund ta publikojë. Kjo është, në fund të fundit, pika e një shtrirjeje. Ky tutorial u përpoq vetëm të shpjegojë skedarin e manifestit dhe si mund ta përdorni, dhe ai thjesht kishte një program 'Përshëndetje Botërore'.

Gjëja e parë që duhet bërë për të bërë publike një shtesë është ta bëni dosjen e zgjerimit në një skedar zip. Gjëja e dytë që duhet të bëni është të shkoni në https://chrome.google.com/webstore/category/extensions dhe të regjistroheni në një llogari google. Pastaj, klikoni në butonin e ingranazheve të cilësimeve dhe pastaj klikoni në 'pultin e zhvilluesit'. Shtypni butonin 'Artikulli i ri' për të ngarkuar skedarin zip. Pasi të jeni atje, është e nevojshme të redaktoni Listimin e Dyqaneve, Privatësinë dhe Çmimet. Një shtesë mund të publikohet lehtësisht nëse paraqitet për shqyrtim.

Tani që shtesa ka përfunduar, vazhdoni të kodoni!