Chrome Web Uzantısı - Əvvəlki Kodlaşdırma Təcrübəsinə Ehtiyac yoxdur: 6 Addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:43

Chrome Uzantıları, istifadəçilərə göz gəzdirmə təcrübəsini artırmaq üçün qurulmuş kiçik proqramlardır. Chrome uzantıları haqqında daha çox məlumat üçün https://developer.chrome.com/extensions ünvanına daxil olun.

Bir Chrome Web Uzantısı etmək üçün kodlaşdırma tələb olunur, buna görə HTML, JavaScript və CSS -ni aşağıdakı veb saytında nəzərdən keçirmək çox faydalıdır:

www.w3schools.com/default.asp (w3 məktəbləri mənbələri kodlaşdırmaq üçün yaxşı bir saytdır)

Kod yazmağı bilmirsən? Narahat olmayın, bu təlimat sizə yol göstərməyə kömək edəcək.

Chrome Uzantılarının ən yaxşı tərəfi, onların fərdiləşdirilə bilməsidir. Yalnız edilə biləcək bir şey deyil, yaradıcı olun.

Təchizat

Lazımi təchizatlar aşağıda verilmişdir:

• Mətn redaktoru olan kompüter (Notepaddan istifadə edirəm)
• Google Chrome

Və hamısı budur!

Addım 1: Kataloqu yaradın

Əvvəlcə bütün faylları saxlamaq üçün bir qovluq yaradın və adını 'uzantı' adlandırın. İstəyirsinizsə adı sonradan dəyişdirilə bilər.

Addım 2: Manifest Faylını yaradın və Kodlayın

Manifest faylı uzantının çox vacib bir hissəsidir. Nə etməli və nə olacağını uzantıdan dəqiq bilir. Manifest faylları JSON -da formatlanır. İlk addım bir mətn redaktoru açmaq və yeni bir faylı 'manifest.json' olaraq saxlamaqdır.

Sonra aşağıdakı skript yazın:

{

"ad": "Birinci Uzantı", "versiya": "1.0", "təsvir": "Bir uzantını kodlaya bilərəm", "manifest_version": 2, "browser_action": {"default_title": "İlk Uzantı"}}

Dəyərlərdən sonra vergülləri xatırlayın!

Bu yazıldıqdan sonra manifest faylını qeyd edin və chrome: // uzantılarına keçin (bunun üçün brauzer olaraq Chrome istifadə edilməlidir). Chrome: // uzantılarında bir dəfə developer rejimini aktiv edin. Bundan sonra 'Açılmayan yüklə' düyməsini basın və 'uzantı' qovluğunu seçin.

baraban rulonu zəhmət olmasa…

Vay! Bu bir növ uzantıdır, ancaq … cansıxıcıdır. Hal -hazırda sözün əsl mənasında heç bir şey etməz, amma tezliklə çox sərin olacaq.

Addım 3: Nişanlar yaradın və Manifesti yeniləyin

Nişanlar çəkmək üçün yaxşı işləyən veb saytlardan biri https://www.piskelapp.com/. İstifadə etmək üçün başqa rəsm proqramları da mövcuddur. Nişanlar kvadrat olmalıdır. Bu layihədə 16x16, 32x32, 48x48 və 128x128 nişanlar istifadə ediləcək. Simge hazırlandıqdan sonra uzantı qovluğunda 'şəkillər' adlı bir qovluq yaradın və işarəni həmin qovluğa qoyun. Bir görüntünün ölçüsünə görə ad vermək yaxşı bir fikir ola bilər. Məsələn, 'icon32.png'. Yeni kod aşağıda verilmişdir:

{

"ad": "Birinci Uzantı", "versiya": "1.0", "təsvir": "Bir uzantını kodlaya bilərəm", "manifest_version": 2, "browser_action": {"default_title": "İlk Uzantı", " default_icon ": {" 16 ":" images/icon16-p.webp

Manifest koduna istinad üçün https://developer.chrome.com/extensions/manifest ünvanına daxil olun.

Addım 4: Pop -up əlavə edin

Bu uzantıda bir popup olacaq. Açılan pəncərə bir HTML (Hypertext Markup Language) faylıdır, buna görə əvvəlcə HTML, CSS və JavaScript əsaslarını öyrənmək yaxşıdır.

Əvvəlcə bir sənədi uzantı qovluğunda 'popup.html' faylı olaraq qeyd edin.

Sonra, tıklandığında 'popup.html' göstərmək üçün manifest faylını düzəldin. Yeni kod aşağıda verilmişdir:

{

"ad": "Birinci Uzantı", "versiya": "1.0", "təsvir": "Bir uzantını kodlaya bilərəm", "manifest_version": 2, "browser_action": {"default_title": "İlk Uzantı", " default_icon ": {" 16 ":" images/icon16-p.webp

Vergili unutma!

İndi aşağıdakı HTML kodu popup.html -ə əlavə olunarsa, tıklandığında 'Hello World' göstərəcək.

Salam Dünya

Addım 5: Gözəl görünün və İnteraktiv olun

Əsas bir HTML xətti yazılırsa, o zaman minimum minimuma çatır. CSS (Cascading Style Sheets) əlavə olunarsa, daha sərin görünür və JavaScript əlavə olunarsa daha interaktiv ola bilər. Bu dərslik HTML, JavaScript və CSS -ni izah edən detallara girməyəcək, ancaq internetdə çoxlu qaynaqlar var. Aşağıda sırasıyla daha rəngarəng proqram olan 'Hello World' proqramının kodu verilmişdir:

Salam Dünya

Salam Dünya

#salam {fon rəngi: #000000; rəng: #ff0000; sərhəd: 8px başlanğıc #86a3b2; sərhəd radiusu: 50 piksel; çevir: çevir (57 dərəcə); doldurma: 10 piksel; istifadəçi seçimi: heç biri; kursor: çarpaz xətt; keçid: 2s çevirmək; } #Hello: hover {transform: rotate (-417deg); }

Bu ikinci nümunə yeni başlayanlar üçün çox qarışıq ola bilər. Ancaq bu, CSS -in bir proqram/uzantı üçün nə qədər əhəmiyyətli olduğunu göstərmək idi. İndi bir ara vermək və bir HTML5 kodlaşdırma öyrənmək və bir istinad üçün developer.chrome.com istifadə etmək üçün yaxşı bir vaxt olardı. Bir az vaxt ala bilər, amma böyük bir uzantı edilə bilər.

Addım 6: Chrome İnternet Mağazasında dərc edin

Kimsə həqiqətən böyük bir uzantı yaratdısa və bunu dünya ilə bölüşmək istəyirsə, onu dərc edə bilərlər. Yəni, hər şeydən sonra, uzadılma nöqtəsi. Bu dərslik yalnız manifest faylını və onu necə istifadə edə biləcəyinizi izah etməyə çalışdı və yalnız 'Hello World' proqramı var idi.

Bir uzantının ictimailəşdirilməsi üçün ediləcək ilk şey, uzantı qovluğunu bir zip faylına çevirməkdir. Ediləcək ikinci şey https://chrome.google.com/webstore/category/extensions saytına daxil olmaq və bir google hesabına daxil olmaqdır. Sonra, parametrlər dişli düyməsini və sonra 'geliştirici tablosuna' vurun. Zip faylını yükləmək üçün 'Yeni Məhsul' düyməsini basın. Orada olduqdan sonra Mağaza Siyahısını, Məxfilik və Qiymətləndirməni redaktə etmək lazımdır. Bir uzantı nəzərdən keçirmək üçün təqdim olunarsa asanlıqla nəşr edilə bilər.

İndi uzantı bitdikdən sonra kod yazmağa davam edin!