API İdarə Edilmiş Chrome Uzantısı necə yaradılır

Chrome uzantısını inkişaf etdirmək əyləncəlidir. Chrome uzantıları sayəsində veb saytımıza və ya brauzerimizə daha çox funksionallıq əlavə edə, işləri tənzimləyə və məhsuldarlığımızı yaxşılaşdırırıq.

Genişlənmənin əhatə dairəsi

Müştərilərimizdən biri 20-dən çox sahəni əhatə edə biləcək formaları doldurmaqda çətinlik çəkirdi və bu formaya çatmaq üçün bir neçə klik lazımdır. Buna görə bu problemi həll etmək üçün sadə və xüsusi bir yola ehtiyac duydular. Mən və həmkarım HS bir söhbət etdik və ilk addım olaraq bir uzantı qurmağa qərar verdik.

Genişlənmənin əhatə dairəsi

  • Uzantı yalnız müəyyən bir URL vasitəsilə əldə edilə bilər.
  • Bütün forma sahələri alınmalı və dəyərlərlə göstərilməlidir.
  • Birdən çox səhifəyə keçmək əvəzinə məlumatları yeniləmək üçün istifadə olunur.

Bu yazıda çətinliklərimizi və onları istifadə edilə bilən bir vəziyyətə necə daxil etdiyimizi təqdim edəcəyik.

Onu necə qurduq?

JavaScript konsepsiyalarından yaxşı istifadə edirsinizsə, Chrome uzantısı etmək asandır. Asılılıq yükləmə kimi problemlərin qarşısını almaq üçün heç bir kitabxana istifadə etmədən bu uzantını təmiz bir JS uzantısı kimi yazmağa qərar verdik.

Hər bir Chrome uzantısı manifest.json faylı tərəfindən müəyyən edilir və konfiqurasiya olunur

Bu manifestdə Accessible_Resources, Permmissions, Səhifə Action və Content Scripts kimi şeyləri konfiqurasiya edə bilərsiniz.

Məzmun skriptləri: Bu sənədlər veb səhifələr kontekstində icra olunur. Bir səhifəyə birdən çox məzmun skriptini qoya bilərik. Müəyyən bir veb səhifədə çalışmaq üçün inj.js istifadə etdik.

Səhifə əməliyyatı: Səhifə əməliyyatları bütün səhifələrdə deyil, yalnız cari səhifədə mövcud olan hərəkətləri əks etdirir. Burada formanı göstərmək üçün açılır pəncərəni açmaq üçün konfiqurasiya etdik.

İcazələr: Chrome API-lərimizi uzantımızda istifadə etmək üçün İcazələrdə elan etməliyik. Məsələn, brauzerin yerli yaddaşına daxil olmaq üçün icazə verildiyini elan etməlisiniz.

İnternetdə mövcud olan mənbələr: Bir veb səhifənin kontekstində istifadə olunma ehtimalı olan paketlənmiş mənbələrə yolları göstərin. Bunun üçün şəkillər, stillər və xüsusi şriftlərdən istifadə etdik.

Budur manifestimiz

1. Genişləndirmənin məhdudlaşdırılması

Uzatma yalnız məlumat səhifəsində mövcud olması üçün məhdudlaşdırılmalıdır. Bu qədər sadədir və manifestinizdəki məzmun skriptləri və səhifə hərəkəti ilə edilə bilər.

"content_scripts": [{"Maçlar": ["*: //*.spritle.com/information/*"], "js": ["js / inject.js", "js / login.js"]} ]

Və inj.js belə olacaq

chrome.declarativeContent.onPageChanged.addRules ([{Şərtlər: [yeni chrome.declarativeContent.PageStateMatcher ({pageUrl: {hostContains: '.spritle.com', sxemi: ['https']}})], Əməliyyatlar: [yeni chrome .declarativeContent.ShowPageAction ()]}]);

Nəticə olacaq

Uzatma başqa bir veb saytda ləğv ediləcəkUzatma

2. API-dən forma sahələrini götürün və göstərin

Müştərimizin REST API-sini iş sahəsini asan və sadə hala gətirən forma sahələrini almaq üçün istifadə etdik. Nümunə API cavabı belə görünür:

Əvvəlki addımdakı bu cavabı işləyərək daha yaxşı görünməsi üçün formatlaşdırmalı idik. İş yalnız kiçik Javascript və CSS ilə edildi.

Budur bir nümunə, bunun kimi bir giriş sahəsi yaratdıq,

Aşağıdakı şəkildə olduğu kimi, alınan JSON cavabının hər bir əsas dəyər cütündən keçdik və genişlənmə etdik.

İstifadəçi uzantını tıklayarkən açılan pəncərələr.

Bükün

Formu təqdim etdikdən sonra məlumatları serverə göndərəcəyik və hər bir uğurlu əməliyyat üçün məlumatlar güncəlləşəcəkdir.

Bəli. Bunu etdik və formanı doldurmaq üçün birdən çox səhifəyə keçmədən asanlaşdırdıq. Genişləndirmə formamızda sahə qrupları, sahə axtarışı və s. Kimi funksiyalar da var.

Nəhayət, Chrome uzantılarını inkişaf etdirmək həqiqətən əyləncəlidir. Forma sahələrini növlərinə görə göstərmək və daha çox sahə növü əlavə etmək üçün genişləndirmək üçün bir yol gördük. Çox xoşumuza gəldi. Dostum HS.

Biz Spritle-dən və Rails, Node JS, React Native və s. Məhsulları istehsal edirik.