Chrome ვებ გაფართოება - კოდირების წინასწარი გამოცდილება არ არის საჭირო: 6 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:16

Chrome გაფართოებები არის მცირე პროგრამები, რომლებიც შექმნილია მომხმარებლებისთვის გამოცდილების გასაუმჯობესებლად. ქრომის გაფართოებების შესახებ დამატებითი ინფორმაციისთვის ეწვიეთ

Chrome ვებ გაფართოების შესაქმნელად საჭიროა კოდირება, ამიტომ ძალიან სასარგებლოა HTML, JavaScript და CSS გადახედვა ქვემოთ მოცემულ ვებსაიტზე:

www.w3schools.com/default.asp (w3 სკოლები არის კარგი ვებ – გვერდი რესურსების კოდირებისათვის)

კოდირება არ იცით? არ ინერვიულოთ, ეს გაკვეთილი დაგეხმარებათ გაიგოთ გზა.

Chrome Extensions– ში საუკეთესო ის არის, რომ მათი მორგება შესაძლებელია. ეს არ არის მხოლოდ ერთი კონკრეტული რამის გაკეთება, ასე რომ იყავით შემოქმედებითი.

მარაგები

საჭირო მასალები მოცემულია ქვემოთ:

• კომპიუტერი ტექსტური რედაქტორით (მე ვიყენებ Notepad– ს)
• გუგლ ქრომი

Და სულ ეს არის!

ნაბიჯი 1: შექმენით დირექტორია

პირველი, შექმენით საქაღალდე ყველა ფაილის შესანახად და დაასახელეთ "გაფართოება". თუ სასურველია, სახელი შეიძლება შეიცვალოს მოგვიანებით.

ნაბიჯი 2: შექმენით მანიფესტის ფაილი და დააკოპირეთ იგი

მანიფესტი ფაილი არის გაფართოების ძალიან მნიშვნელოვანი ნაწილი. ის ზუსტად ეუბნება გაფართოებას რა უნდა გააკეთოს და იყოს. მანიფესტის ფაილები ფორმატირებულია JSON– ში. პირველი ნაბიჯი არის ტექსტური რედაქტორის გახსნა და ახალი ფაილის შენახვა როგორც "manifest.json".

შემდეგი ჩაწერეთ ქვემოთ მოყვანილი სკრიპტი:

{

"name": "პირველი გაფართოება", "ვერსია": "1.0", "აღწერა": "შემიძლია გაფართოების კოდირება", "manifest_version": 2, "browser_action": {"default_title": "პირველი გაფართოება"}}

დაიმახსოვრე მძიმები მნიშვნელობების შემდეგ!

ამის აკრეფის შემდეგ შეინახეთ მანიფესტის ფაილი და გადადით chrome: // გაფართოებებზე (ამისთვის ბრაუზერი უნდა იქნას გამოყენებული Chrome). ერთხელ chrome: // გაფართოებებში ჩართეთ დეველოპერის რეჟიმი. ამის შემდეგ, დააჭირეთ ღილაკს "ჩატვირთეთ შეფუთული" და აირჩიეთ "გაფართოების" საქაღალდე.

ბარაბანი როლი გთხოვთ…

კაი! ეს არის გაგრძელება, გარდა… მისი სახის მოსაწყენი. ის ფაქტიურად არაფერს აკეთებს ჯერჯერობით, მაგრამ მალე ეს იქნება ძალიან მაგარი.

ნაბიჯი 3: შექმენით ხატები და განაახლეთ მანიფესტი

ერთი ვებ გვერდი, რომელიც კარგად მუშაობს ხატების დახატვისთვის არის https://www.piskelapp.com/. ასევე არსებობს ხატვის სხვა პროგრამები გამოსაყენებლად. ხატები უნდა იყოს კვადრატული. ეს პროექტი გამოიყენებს 16x16, 32x32, 48x48 და 128x128 ხატებს. მას შემდეგ რაც ხატი შეიქმნება, შექმენით საქაღალდე სახელწოდებით "სურათები" გაფართოების საქაღალდეში და ჩასვით ხატი ამ საქაღალდეში. შეიძლება კარგი იდეა იყოს სურათის დასახელება მისი ზომის მიხედვით. მაგალითად, 'icon32.png'. ახალი კოდი ქვემოთ მოცემულია:

{

"name": "პირველი გაფართოება", "ვერსია": "1.0", "აღწერა": "შემიძლია გაფართოების კოდირება", "manifest_version": 2, "browser_action": {"default_title": "პირველი გაფართოება", " default_icon ": {" 16 ":" images/icon16-p.webp

მანიფესტის კოდის მითითებისთვის გადადით

ნაბიჯი 4: დაამატეთ ამომხტარი ფანჯარა

ამ გაფართოებას ექნება ამომხტარი ფანჯარა. ამომხტარი არის HTML (ჰიპერტექსტის მარკირების ენა) ფაილი, ამიტომ კარგია ჯერ HTML, CSS და JavaScript საფუძვლების სწავლა.

პირველი, შეინახეთ დოკუმენტი, როგორც "popup.html" ფაილი გაფართოების საქაღალდეში.

შემდეგი, შეასწორეთ მანიფესტის ფაილი, რომ ნახოთ 'popup.html' როდესაც ის დაწკაპუნებულია. ახალი კოდი ქვემოთ მოცემულია:

{

"name": "პირველი გაფართოება", "ვერსია": "1.0", "აღწერა": "შემიძლია გაფართოების კოდირება", "manifest_version": 2, "browser_action": {"default_title": "პირველი გაფართოება", " default_icon ": {" 16 ":" images/icon16-p.webp

ნუ დაივიწყებ მძიმით!

ახლა, თუ შემდეგი HTML კოდი დაემატება popup.html- ს, მაშინ დაწკაპუნებისას გამოჩნდება 'Hello World'.

Გამარჯობა მსოფლიო

ნაბიჯი 5: გახადეთ ის კარგად და გახადეთ ინტერაქტიული

თუ ძირითადი HTML ხაზი აკრეფილია, მაშინ ის ასრულებს მინიმალურ რაოდენობას. თუ დაემატება CSS (კასკადური სტილის ფურცლები), მაშინ ის გამოიყურება უფრო მაგარი, ხოლო თუ JavaScript დაემატება, მაშინ ის შეიძლება იყოს უფრო ინტერაქტიული. ეს გაკვეთილი არ იქნება დეტალურად განმარტებული HTML, JavaScript და CSS, მაგრამ ინტერნეტში უამრავი რესურსია. ქვემოთ მოცემულია მარტივი პროგრამა "გამარჯობა მსოფლიო", შემდეგ უფრო ფერადი პროგრამა, შესაბამისად:

Გამარჯობა მსოფლიო

Გამარჯობა მსოფლიო

#გამარჯობა {ფონი-ფერი: #000000; ფერი: #ff0000; საზღვარი: 8px დასაწყისი #86a3b2; საზღვარი-რადიუსი: 50px; გარდაქმნა: როტაცია (57 გრადუსი); ბალიში: 10px; მომხმარებლის არჩევა: არცერთი; კურსორი: ჯვარი; გადასვლა: გარდაქმნა 2 წმ; } #hello: hover {გარდაქმნა: როტაცია (-417 გრადუსი); }

ეს მეორე მაგალითი შეიძლება ძალიან დამაბნეველი იყოს დამწყებთათვის. მაგრამ, ეს იყო იმის საჩვენებელი, თუ რამდენად მნიშვნელოვანია CSS პროგრამისთვის/გაფართოებისთვის. ახლა იქნება კარგი დრო, რომ დაისვენოთ და ისწავლოთ HTML5 კოდირება და გამოიყენოთ developer.chrome.com მითითებისთვის. შეიძლება გარკვეული დრო დასჭირდეს, მაგრამ დიდი გაფართოება შეიძლება.

ნაბიჯი 6: გამოაქვეყნეთ იგი Chrome ვებ მაღაზიაში

თუ ვინმეს აქვს მართლაც დიდი გაფართოება და სურს მას გაუზიაროს მსოფლიოს, მას შეუძლია გამოაქვეყნოს იგი. ყოველივე ამის შემდეგ, ეს არის გაფართოების წერტილი. ეს გაკვეთილი მხოლოდ მანიფესტის ფაილის ახსნას ცდილობდა და როგორ შეგიძლიათ მისი გამოყენება და მას უბრალოდ ჰქონდა პროგრამა "გამარჯობა მსოფლიო".

პირველი რაც უნდა გააკეთოთ გაფართოების საჯაროდ გახდომისთვის არის გაფართოების საქაღალდე zip ფაილში. მეორე რაც უნდა გააკეთოთ არის წასვლა https://chrome.google.com/webstore/category/extensions და შეხვიდეთ Google ანგარიშში. შემდეგ, დააწკაპუნეთ პარამეტრების გადაცემის ღილაკზე და შემდეგ დააწკაპუნეთ 'დეველოპერის დაფაზე'. დააჭირეთ ღილაკს "ახალი საქონელი", რომ ატვირთოთ zip ფაილი. იქ ყოფნისას აუცილებელია შეცვალოთ მაღაზიის ჩამონათვალი, კონფიდენციალურობა და ფასი. გაფართოება შეიძლება ადვილად გამოქვეყნდეს, თუ იგი გადატანილია განსახილველად.

ახლა, როდესაც გაფართოება დასრულდა, განაგრძეთ კოდირება!