Kako izraditi proširenje kromiranog API-ja

Razvijanje kromiranog proširenja je zabavno. Pomoću kromiranih ekstenzija našoj web stranici ili pregledniku možemo dodati više funkcionalnosti, možemo prilagoditi stvari i poboljšati našu produktivnost.

Opseg našeg produžetka

Jedan naš klijent našao je poteškoće s ispunjavanjem obrasca koji može sadržavati 20+ polja i za postizanje tog obrasca mora koristiti više klikova. Stoga im je bio potreban lak i prilagođen način da to riješe. Ja i moj kolega HS razgovarali smo i odlučili izgraditi produžetak kao prvi korak.

Opseg proširenja je

  • Proširenje je dostupno samo na određenom URL-u.
  • Mora dohvatiti sva polja obrasca i mora se prikazivati ​​s vrijednostima.
  • To je ažuriranje informacija u pokretu, umjesto za kretanje kroz više stranica.

U ovom ćemo članku podijeliti naše izazove i način na koji smo ga ugradili u upotrebljiv.

Kako smo to izgradili?

Ako ste dobri s JavaScript konceptima, lako ćete izraditi proširenje za krom. Odlučili smo ovo proširenje napisati kao čisto JS proširenje bez upotrebe biblioteka koliko god je to moguće kako bismo izbjegli probleme poput učitavanja ovisnosti.

Svako proširenje za Chrome definirano je i konfigurirano u njemu manifest.json

U ovom manifestu možete konfigurirati stvari poput access_resources, dopuštenja, pokretanje stranica, content_scripts.

Sadržajne skripte: Te će se datoteke prikazati u kontekstu web stranica. Na stranicu možemo umetnuti više skripti sadržaja. Koristili smo "inject.js" za pokretanje na određenoj web stranici.

Radnja stranice: Radnje stranice predstavljaju radnje koje će biti dostupne samo na trenutnoj stranici, a ne na svim stranicama. Ovdje smo konfigurirali za otvaranje skočnog prozora za obrazac.

Dozvole: Da bismo koristili kromove API-je u našem proširenju, moramo ih proglasiti dopuštenjima. Na primjer, da biste pristupili lokalnoj pohrani preglednika, morate ga proglasiti dopuštenjem.

Web dostupni resursi: Navođenje puta pakiranih resursa za koje se očekuje da će ih koristiti u kontekstu web stranice. U ovome smo koristili slike, tablice stilova i prilagođene fontove.

Evo našeg manifesta

1. Ograničavanje produžetka

Proširenje treba ograničiti kako bi bilo dostupno samo na stranici s informacijama. To je tako jednostavno i može se postići pomoću Skripta sadržaja i radnje stranice u vašem manifestu.

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

A inject.js će biti ovako,

([chrome.declarativeContent.onPageChanged.addRules
  {
    Uvjeti: [
      novi chrome.declarativeContent.PageStateMatcher ({
        pageUrl: {hostContains: '.spritle.com', sheme: ['https']}
      })
    ],
    radnje: [novi chrome.declarativeContent.ShowPageAction ()]
  }
]);

Rezultat će biti takav,

Proširenje je onemogućeno na drugim web stranicamaProširenje je omogućeno na stranici

2. Dohvaćanje polja obrasca s API-ja i njegovo prikazivanje

REST API-je našeg klijenta koristili smo za donošenje polja obrazaca koja su naš posao učinila jednostavnim i lakim. Primjer odgovora API će biti ovako,

Obrađujući ovaj odgovor dobiven iz prethodnog koraka, morali smo izvršiti njegovo oblikovanje na način da izgleda bolje. Posao je obavljen samo uz malo Javascripta i CSS-a.

Evo primjera, stvorili smo ovo polje unosa,

Kao na slici ispod, mi smo ispisali svaki par ključnih vrijednosti dobivenog json odgovora i napravili proširenje.

Pop-up prozor dok korisnik klikne na proširenje.

Završavati

Nakon predaje obrasca, podatke objavljujemo na poslužitelju i informacije se ažuriraju za svaku uspješnu operaciju.

Da. To smo učinili i napravili smo to jednostavno bez prelaska na više stranica radi popunjavanja obrasca. Također naš obrazac za proširenje sadrži značajke poput grupa polja, pretraživanja polja itd.,

Napokon razvoj Chromeova proširenja zaista je zabavan. Naučili smo način prikaza polja obrazaca koji odgovaraju njihovim tipovima i koji se mogu proširivati ​​za dodavanje dodatnih vrsta polja. Uživali smo u tome. Hvala mom prijatelju HS.

Mi smo ljudi iz kompanije Spritle i ❤ gradimo proizvode koristeći šine, čvor JS, React Native itd.