✅ Programirajte i izradite proširenja za Chrome

Sadržaj

1. Kako izraditi i programirati proširenje za Chrome
2. Primjer proširenja za Chrome

Ovaj će vodič biti podijeljen u 3 odjeljka: Prvi dio u kojem ćemo objasniti različite koncepte u vezi s proširenjima u Chromeu, njihovu strukturu i osnovno stvaranje proširenja. U drugom odjeljku ćemo se usredotočiti na stvaranje proširenja za ovaj sjajni preglednik, poput Google Chromea, čineći nekoliko praktičnih primjera. Na kraju, u trećem odjeljku objasnit ćemo napredne mogućnosti pri izradi proširenja i kako ih objaviti u web -trgovini Google Chrome kako bi bile dostupne široj javnosti.

Što su proširenja u pregledniku Google Chrome?Proširenja su mali programi koji mogu izmijeniti i poboljšati funkcionalnost preglednika, u ovom slučaju Chromea. Oni su razvijeni pomoću web tehnologija kao što su HTML, Javascript i CSS.

Proširenja imaju malo ili nimalo korisničkog sučelja. Na primjer, donja slika prikazuje ikonu lokota koji pri kliku na nju otvara malo sučelje.

Ovo posebno proširenje koristi se za šifriranje i dešifriranje vaših e -poruka pomoću PGP ključa. Proširenja su datoteke koje su pakirane u jednu, koju korisnik preuzima i instalira. Ovo pakiranje, za razliku od uobičajenih web aplikacija, ne mora ovisiti o web sadržaju.

Kao što je gore spomenuto, proširenja vam omogućuju dodavanje funkcionalnosti Chromeu bez dubljeg uranjanja u izvorni kôd. Nova proširenja mogu se stvoriti pomoću osnovnih tehnologija s kojima radi većina programera za web razvoj: HTML, CSS i Javascript.

1. Kako izraditi i programirati proširenje za Chrome

Za početak ćemo napraviti jednostavno proširenje koje dohvaća sliku od Googlea koristeći URL trenutne stranice kao pojam za pretraživanje. To ćemo učiniti implementacijom elementa korisničkog sučelja koji nazivamo chrome.browserAction, što nam omogućuje da postavimo ikonu tik uz kromirani izbornik, koju možete kliknuti za brzi pristup. Klikom na tu ikonu otvorit će se skočni prozor sa slikom dobivenom s trenutne stranice, koja će izgledati ovako:

Za početak naše prakse izradit ćemo direktorij tzv Preglednik slika, u ovo ćemo uključiti sve datoteke s kojima ćemo raditi. Kao uređivač za razvoj možete koristiti onu koju želite, u mom slučaju ja ću koristiti Chrome Dev Editor, koji možete preuzeti na sljedećoj adresi:

Chrome Dev Editor

Prva stvar koju ćemo trebati je stvoriti datoteku manifesta pod nazivom manifest.json. Ovaj manifest nije ništa drugo do datoteka metapodataka u JSON formatu koja sadrži svojstva kao što su naziv, opis, broj verzije njegovog proširenja itd. Na naprednoj razini upotrijebit ćemo ga da Chromeu izjavimo što će proširenje učiniti i dopuštenja koja su potrebna za određene radnje.

Format datoteke manifesta je sljedeći:

 {// Potrebna "manifest_version": 2, "name": "Moje proširenje", "version": "versionString", // Preporučeno "default_locale": "es", "description": "Opis običnog teksta", " icons ": {…}, // Odaberite jednu (ili nijednu)" browser_action ": {…}," page_action ": {…}, // Izborno" author ":…," automation ":…," background ": {// Preporučeno "persistent": false}, "background_page":…, "chrome_settings_overrides": {…}, "chrome_ui_overrides": {"bookmarks_ui": {"remove_bookmark_shortcut": true, "remove_button": true}}, " chrome_url_overrides ": {…}," naredbe ": {…}," content_capabilities ":…," content_scripts ": [{…}]," content_security_policy ":" policyString "," convert_from_user_script ":…," prisutnost ":… , "current_locale":…, "devtools_page": "devtools.html", "event_rules": [{…}], "external_connectable": {"odgovara": ["*: //*.example.com/*" ]}, "file_browser_handlers": […], "file_system_provider_capabilities": {"configurable": true, "multiple_mounts": true, "source": "network"}, " homepage_url ":" http: // path / to / homepage "," import ": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa "}]," incognito ":" obuhvaća ili dijeli "," input_components ":…," key " : "publicKey", "minimum_chrome_version": "versionString", "nacl_modules": […], "oauth2":…, "offline_enabled": true, "omnibox": {"keyword": "aString"}, "optional_permissions" : ["tabs"], "options_page": "options.html", "options_ui": {"chrome_style": true, "page": "options.html"}, "permissions": ["tabs"], " platforme ":…," dodaci ": […]," zahtjevi ": {…}," sandbox ": […]," short_name ":" Kratko ime "," potpis ":…," provjera pravopisa ":…, "storage": {"managed_schema": "schema.json"}, "system_indicator":…, "tts_engine": {…}, "update_url": "http: //path/to/updateInfo.xml", "version_name ":" aString "," web_accessible_resources ": […]}

Zatim ću opisati funkciju koja ispunjava najvažnije oznake:

Obavezno:

manifest_verzija: To je verzija manifesta, predstavljena je cijelim brojem koji navodi verziju formata datoteke. Počevši od Chromea 18, programeri moraju navesti broj 2.

jam: To je ime koje će imati vaše proširenje. To se mora sastojati od najviše 45 znakova, ime je glavni element definicije proširenja i obvezno je polje. Prikazuje se na sljedećim mjestima:

a) U kutiji za instalaciju.
b) U korisničkom sučelju na kojem se administrira proširenje.
c) U Chromeovoj virtualnoj trgovini.

verzija: Mora se sastojati od jednog do četiri cijela broja odijeljena točkama koje identificiraju verziju proširenja. Evo nekoliko primjera valjanih verzija:

"Verzija 1"
"Verzija": "1.0"
"Verzija": "2.10.2"
"Verzija": "3.1.2.4567"

Preporučeno:

zadana_lokalizacija: Određuje poddirektorij _locales (jezici) koji sadrži zadane nizove za ovo proširenje. Morate staviti sve nizove vidljive korisniku u datoteku pod nazivom messages.json. Svaki put kad uključite novi jezik, morate dodati novu datoteku poruke.json u direktoriju _locales / localecode gdje je localecode kôd jezika, baš kao što je en engleski i za španjolski jezik.

Primjer internacionaliziranog proširenja s podrškom za engleski (en), španjolski (es) i korejski (ko) bio bi sljedeći:

opis: Sadrži niz u običnom tekstu (bez HTML -a ili drugog formata) s najviše 132 znaka koji opisuje funkcionalnost proširenja.

Ikone: Omogućuje vam dodavanje jedne ili više ikona koje predstavljaju proširenje. Uvijek treba navesti ikonu 128x128px. To će se koristiti tijekom instalacije i u Chrome web -trgovini. Proširenja moraju sadržavati i ikonu 48x48 koja se koristi na stranici za upravljanje Chromeovim proširenjima (chrome: // extensions). Također možete navesti ikonu 16x16 koja će se koristiti kao oznaka za stranice proširenja.

Ikone bi općenito trebale biti u PNG formatu jer imaju najbolju podršku za transparentnost. Međutim, mogu biti u bilo kojem formatu koji WebKit podržava, uključujući BMP.webp, GIF.webp, ICO i JPEG.webp. Evo primjera specifikacije ikona:

 "icons": {"16": "icon16.png.webp", "48": "icon48.png.webp", "128": "icon128.png.webp"},

Primjer

Odaberite jedan (ili nijedan):

radnja preglednika: Upotrijebite browser_action za postavljanje ikona na glavnu alatnu traku pri vrhu preglednika Google Chrome, desno od adresne trake. Dodatno možete dodati opis (plutajuća poruka), značku (plutajući tekst na ikoni) i skočni prozor (plutajući prozor).

Primjer upotrebe browser_action:

 {"name": "Moje proširenje",… "browser_action": {"default_icon": {// izborno "19": "images / icon19.png.webp", // izborno "38": "images / icon38.png.webp" // izborno}, "default_title": "Google Mail", // izborno; prikazuje "default_popup" opis alata: "popup.html" // izborno}, …}

radnja stranice: Pomoću ovog API -ja postavite svoju ikonu u adresnu traku.

Primjer upotrebe:

 {"name": "Moje proširenje",… "page_action": {"default_icon": {// izborno "19": "images / icon19.png.webp", // izborno "38": "images / icon38. png" // neobavezno}, "default_title": "Google pošta", // izborno; prikaži u opisu "default_popup": "popup.html" // izborno},…}

Npr

Izborno:

Pozadina: Uobičajena potreba proširenja je imati jednu stranicu za izvođenje dugih nizova za upravljanje nekim zadatkom ili statusom. Ovo je HTML stranica koja se pokreće zajedno s nastavkom. Pokreće se kad se proširenje pokrene i aktivira samo jednu njegovu instancu odjednom. Umjesto upotrebe Pozadine, preporučuje se korištenje stranice događaja.

U tipičnom proširenju sa stranicom u pozadini, korisničko sučelje, na primjer, browser_action ili page_action, te neke opcije stranice djeluju kao prikaz proširenja. Kada prikaz mora znati neko stanje (zatvorio prozor, ažurirao stranicu …), šalje zahtjev za stanje stranici koja se nalazi kao Pozadina. Kad stranica u pozadini obavijesti da je došlo do promjene stanja, obavještava prikaz koji treba ažurirati ili poduzeti neke radnje.

Njegov format je sljedeći:

 {"name": "Moje proširenje",… "background": {"skripte": ["background.js"]},…}

Format

Stranice događaja: Prije definiranja sljedećeg atributa potrebno je objasniti o čemu se radi na stranicama događaja. Uobičajena potreba za aplikacijama i proširenjima je imati jednu, dugotrajnu skriptu za rukovanje nekim zadatkom ili stanjem. Ovo je cilj stranica događaja. Stranice događaja učitavaju se samo po potrebi. Kada nešto ne radi aktivno, istovara se iz predmemorije, oslobađajući memoriju i druge resurse sustava.

Prednosti performansi su značajne, osobito na uređajima male snage. Zbog toga se preporučuje korištenje više stranica događaja od pozadine.

Deklaracija stranice događaja u datoteci manifesta bila bi sljedeća:

 {"name": "Moje proširenje", … "background": {"scripts": ["eventPage.js"], "persistent": false}, …}

Kao što vidite, razlika u odnosu na Pozadinu je trajni atribut, koji će imati lažni status.

chrome_settings_ overrides: Koristi se za prepisivanje neke odabrane konfiguracije u Chromeu. Ovaj API dostupan je samo za Windows.

Neke od ovih konfiguracija mogu biti početna stranica (početna stranica preglednika, pružatelj pretraživanja (pružatelj pretraživanja) itd.

Primjer konfiguracije:

 {"name": "Moje proširenje",… "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", "keyword ":" ključna riječ .__ MSG_url_domain__ "," search_url ":" http: //www.foo.__MSG_url_domain__/s? q = {searchTerms} "," favicon_url ":" http: //www.foo.__MSG_url_domain__/favicon. ico "," predlagati_url ":" http: //www.foo.__MSG_url_domain__/suggest? q = {searchTerms} "," instant_url ":" http: //www.foo.__MSG_url_domain__/instant? q = {searchTerms} " , "image_url": "http: //www.foo.__MSG_url_domain__/image? q = {searchTerms}", "search_url_post_params": "search_lang = __ MSG_url_domain__", "predlagaj_url_post_params": "predloži_lang = __ MSG_ur_ MSG_url_domain = "instant_url_params_url_domain" __MSG_url_domain__ "," image_url_post_params ":" image_lang = __ MSG_url_domain__ "," alternate_urls ": [" http: //www.moo.__MSG_url_domen? .noo .__ MSG_url_url_? q = {searchTerms} "]," encoding ":" UTF-8 "," is_default ": true}," startup_pages ": [" http://www.st artup.com "]}," default_locale ":" de ", …}

chrome_ui_ nadjačava: Ovo svojstvo proširenja koristi se za prepisivanje nekih postavki na korisničkom sučelju Chromea. Kao na primjer markeri. Njegova konfiguracija je sljedeća:

 {"name": "My extension",… "chrome_ui_overrides": {"bookmarks_ui": {"remove_button": "true", "remove_bookmark_shortcut": "true"}},…}

U tom slučaju eliminira se zvjezdica koju preglednik ima za favorite.

chrome_url_ overrides: Ovo je način da zamijenite HTML datoteku s nastavka za stranicu koju preglednik Google Chrome obično nudi. Osim toga, možete prebrisati i njegov CSS i JavaScript kod.

Proširenje s ovom konfiguracijom može zamijeniti jednu od sljedećih Chrome stranica:

Upravitelj oznaka: To je stranica koja se pojavljuje kada korisnik odabere opciju s izbornika Upravitelj oznaka u izborniku Chrome ili za Mac, stavku Upravitelj oznaka u izborniku Oznake.

POVEĆAJTE

Povijest (povijest): To je stranica koja se pojavljuje kada korisnik odabere povijest s izbornika Chrome ili, na Macu, stavka prikazuje cijelu povijest s izbornika koji se nalazi u opciji povijesti.

POVEĆAJTE

Nova kartica (nova kartica): To je stranica koja se pojavljuje kada korisnik iz preglednika stvori novu karticu ili prozor. Ovoj stranici možete pristupiti i postavljanjem sljedeće adrese u adresnu traku: chrome: // newtab

POVEĆAJTE

BilješkaJedno proširenje može prebrisati samo jednu stranicu. Na primjer, proširenje ne može prebrisati oznake i okrenuti stranicu povijesti.

 {"name": "Moje proširenje",… "chrome_url_overrides": {"newtab": "mypage.html" // opcije su newtab, history, bookmarks},…}

naredbe: Ovaj naredbeni API koristi se za dodavanje tipkovnih prečaca koji pokreću radnju u vašem proširenju. Na primjer, radnja za otvaranje radnje preglednika ili slanje naredbe proširenju.

 {"name": "Moje proširenje",… "naredbe": {"toggle-feature-foo": {"predloženi_ključ": {"zadano": "Ctrl + Shift + Y", "mac": "Naredba + Shift + Y "}," description ":" Uključi / isključi značajku foo "}," _execute_browser_action ": {" predloženi_ključ ": {" windows ":" Ctrl + Shift + Y "," mac ":" Command + Shift + Y ", "chromeos": "Ctrl + Shift + U", "linux": "Ctrl + Shift + J"}}, "_execute_page_action": {"predloženi_ključ": {"zadano": "Ctrl + Shift + E", "prozori ":" Alt + Shift + P "," mac ":" Alt + Shift + P "}},…}

Na svojoj pozadinskoj stranici možete vezati kontroler za svaku naredbu definiranu u manifest.js (osim za '_execute_browser_action'Y'_execute_page_action') putem onCommand.addListener.

Na primjer:

 chrome.commands.onCommand.addListener (funkcija (naredba) {console.log ('Naredba pritisnuta:', naredba);});

content_scripts: To su javascript datoteke koje se izvršavaju u kontekstu web stranica. Koristeći standardni objektni model dokumenta (DOM), oni mogu čitati pojedinosti web stranica posjeta preglednika ili ih mijenjati.

 {"name": "Moje proširenje",… "content_scripts": [{"podudara se": ["http://www.google.com/*"], "css": ["mystyles.css"], " js ": [" jquery.js "," myscript.js "]}],…}

content_scripts: Kako bi naša proširenja bila sigurnija i izbjegli mogući problemi skriptiranja na različitim web-lokacijama, sustav proširenja Chrome ugradio je opći koncept Politika sigurnosti sadržaja (CSP). Ovo uvodi vrlo stroga pravila koja će proširenja po zadanom učiniti sigurnijim. Općenito, CSP funkcionira kao mehanizam crne i bijele liste za resurse učitane ili provedene pomoću njegovih proširenja.

 {…, "Content_security_policy": "script-src 'self' https://example.com; object-src 'self" "…}

To su bili neki od najvažnijih atributa. Za našu početnu praksu definirat ćemo našu datoteku manifest.json na sljedeći način:

 {"manifest_version": 2, "name": "Startup example", "description": "Ovo proširenje prikazuje sliku s google slika trenutne stranice", "version": "1.0", "browser_action": {"default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," permissions ": [" activeTab "," https://www.googleapis.com/ "]}

Kao što možete vidjeti u našem primjeru manifesta, proglasili smo browser_action, activeTab dopuštenjem da vidi URL trenutne kartice, a hostu je dato dopuštenje, na taj način se može pristupiti Google API -ju za obavljanje pretraživanja vanjskih slika.

S druge strane, 2 datoteke resursa se nalaze pri definiranju browser_action: icon.png.webp i popup.html. Oba izvora moraju postojati unutar paketa proširenja, pa ih sada stvorimo:

icon.png.webp Prikazat će se pored višenamjenskog okvira, čekajući interakciju korisnika. To je samo 19px x 19px PNG datoteka.

popup.html će se prikazati u skočnom prozoru koji je kreiran kao odgovor na korisnikov klik na ikonu. To je standardna HTML datoteka čiji je sadržaj sljedeći:

Prvi koraci Skočni prozor proširenja

POVEĆAJTE

2. Provjerite je li potvrđen okvir za način rada za razvojne programere u gornjem desnom kutu.

3. Pritisnite Upload Unzipped (Unpacked) Extension da biste otvorili dijaloški okvir za odabir datoteke.

POVEĆAJTE

4. Dođite do direktorija u kojem se nalaze datoteke s proširenjima i odaberite ga.

Alternativno, možete povući direktorij koji sadrži vaš projekt i ispustiti ga u prozor Chromeovih proširenja. Ovo će učitati proširenje u vaš preglednik.

Na ovaj način ćemo napraviti jednostavno proširenje za google Chrome. U sljedećem nastavku ćemo se pozabaviti izgradnjom proširenja zajedno s razvojnim okvirima kao što su jquery i Bootstrap, što će nam omogućiti racionalizaciju našeg razvoja.

2. Primjer proširenja za Chrome

U ovom ćemo odjeljku izvesti nekoliko primjera koji će nam omogućiti da u potpunosti razumijemo mnoge funkcionalnosti koje postoje pri izgradnji proširenja za Google Chrome.

Vježba 1 - Plava pozadina
U ovom primjeru napravit ćemo jednostavno proširenje u kojem ćemo naučiti kako možemo izmijeniti sadržaj stranica koje učitavamo u naš preglednik. U tom slučaju promijenit ćemo boju pozadine učitane stranice i promijeniti je u plavu.

Kao što sam objasnio u prvom dijelu ovog vodiča, možete koristiti bilo koji razvojni IDE, u mom slučaju ja ću koristiti Chrome Dev Editor.

POVEĆAJTE

Za početak ćemo stvoriti novi direktorij s imenom Plava pozadina i izradit ćemo projekt s istim imenom.

POVEĆAJTE

Unutra ćemo stvoriti našu prvu datoteku manifest.json koji će sadržavati definicije našeg proširenja.

POVEĆAJTE

Naša arhiva manifest.json mora sadržavati sljedeći kod:

 {"manifest_version": 2, "name": "Blue Background", "description": "Ovo proširenje je promijenilo boju pozadine trenutne stranice", "version": "1.0", "browser_action": {"default_icon": "icon.png.webp", "default_title": "Ovu stranicu učinite plavom"}, "permissions": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": false }}

Budući da je naše proširenje jednostavno, sadržavat će samo ikonu koja će pritiskom na izvršiti radnju. Kao što možete vidjeti u datoteci manifest.json definiramo ime i njegov opis u browser_action Definiramo ikonu koja će biti prikazana na traci našeg preglednika Google Chrome i naslov koji će se prikazati kada se pokazivač miša postavi iznad navedene ikone. Što se tiče dopuštenja, definirat ćemo da će se to učiniti samo na aktivnoj kartici. Datoteka koja će se izvoditi u pozadini bit će naša datoteka background.js koji neće biti postojan, budući da će se izvršiti tek kad kliknemo na proširenje.

Izrađujemo našu ikonu i spremamo je u direktorij projekta kako je definirano u manifest.json. U ovom slučaju u korijenu projekta.

Zatim stvaramo JavaScript datoteku pod nazivom background.js unutar istog direktorija sa sljedećim kodom:

 // poziva se kada korisnik klikne na proširenje chrome.browserAction.onClicked.addListener (funkcija (kartica) {console.log ('Promjena' + tab.url + 'u plavo!'); chrome.tabs.executeScript ({kod: ' document.body.style.backgroundColor = "plava" '});});

Ostavljajući cijeli projekt na sljedeći način:

POVEĆAJTE

Da biste pokrenuli naše proširenje, sve što trebate učiniti je pritisnuti gumb za reprodukciju koji se nalazi na gornjoj traci uređivača Chrome Dev.

POVEĆAJTE

Pritiskom na njega proširenje će se automatski učitati u preglednik Google Chrome.

Pogledajmo naše proširenje na djelu, klikom na ikonu koju sam napravio (plava pozadina sa slovom A u bijeloj boji), stranicu koju sam učitao na trenutnu karticu, u mom slučaju moj korisnički račun u Solvetiću (http: // www .solvetic… .berth-ramncgev /) promijenit će pozadinu u plavu. Valja napomenuti da će se promijeniti samo boja elementa BODY, a ne i DIV -ovi koje on sadrži, jer sam ga tako definirao u svom background.js.

POVEĆAJTE

Vježba 2 - Višebojna
U ovom primjeru pokazat ću kako pojednostaviti naš rad iz razvojnog IDE -a i koda. U Chrome Dev Editor, kliknemo gumb +, za stvaranje novog projekta, ovaj put ćemo promijeniti vrstu projekta, odabirom opcije JavaScript Chrome aplikacija.

POVEĆAJTE

Kao što vidite, automatski generira cijelu strukturu našeg projekta. S našim dosjeom manifest.json s najčešćim definicijama.

POVEĆAJTE

Ovoj datoteci dodat ćemo kratki opis na naljepnici opis postavljanje teksta koji želite, u mom slučaju "Proširenje koje omogućuje promjenu boje pozadine". Za ovaj projekt stvorit ćemo 2 ikone, jednu od 16x16 piksela, a drugu od 128x128 piksela, kao što možete vidjeti u strukturi, one će biti spremljene u direktoriju imovina.

Ispod oznake ćemo dodati sljedeći kôd minimalna_krom_verzija:

 "permissions": ["tabs", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Promijeni stranicu u više boja.", " default_popup ":" popup.html "},

Kao što vidite, definiramo skočni prozor ili prikaz koji će sadržavati sav html koji će korisnik vidjeti kada klikne na naše proširenje. Zatim ćemo dodati sljedeći kod:

 "content_scripts": [{"match": [""], "css": ["assets / bootstrap / css / bootstrap.min.css"], "js": ["assets / jquery.min.js", "main.js"], "run_at": "document_start"}]

content_scripts- Sadrži datoteke JavaScript (js) i tablice stilova (css) koje će se izvršavati u kontekstu web stranice. Može sadržavati sljedeća svojstva:

šibice: Obvezno. Određeno na koju će se stranicu ubaciti skripta.

exclude_matches: Opcionalno. Stranice koje će biti isključene kako se skripta ne bi ubacila.

match_about_blank: Opcionalno. Ova je vrijednost Boolean i označava hoće li skripta biti umetnuta u praznu stranicu (about: blank i about: srcdoc).

css: Opcionalno. To je aranžman koji označava popis css datoteka koje će biti umetnute na stranicu koja se traži u pregledniku.

js: Opcionalno. To je aranžman s popisom JavaScript datoteka koje će biti umetnute na stranicu koja se traži u pregledniku.

run_at: Opcionalno. To je tekstualni niz koji kontrolira kada će se js datoteke učitati. Njegova vrijednost može biti:
document_start: Datoteke se ubacuju nakon bilo koje css datoteke, ali prije nego što se izgradi bilo koji DOM ili izvrši bilo koja druga skripta.

dokument_kraj: Datoteke se ubacuju odmah nakon dovršetka DOM -a, ali prije nego što se učitaju resursi poput slika i okvira.

dokument_idle: Preglednik odabire vrijeme za ubacivanje skripti između document_end i odmah nakon što window.onload pokrene događaj. Ova je opcija ona koja je zadano konfigurirana.

Na kraju našeg dosjea manifest.json To bi trebalo biti sljedeće:

POVEĆAJTE

Kao što vidite, dodali smo nekoliko novih stvari u nekretninu css Definirali smo Bootstrap okvir koji neće olakšati razvoj na razini stila. Slijedi na imanju js Definiramo JQUERY JavaScript biblioteku koja nam neće omogućiti brži i lakši rad na svemu što ima veze s JavaScriptom. Naša datoteka index.html trebala bi izgledati ovako:

 Popup MultipleColorCrvenaPlavaZelenoŽuta boja

U datoteci index.html jednostavno upućujemo na datoteke Bootstrap, Jquery i main.js. U tijelu definiramo bootstrap spremnik s njegovim divovima koji će poslužiti kao gumbi za različite opcije boja.

Za datoteku main.js koristit ćemo događaj klika koji će se izvršiti pritiskom na tipku miša na svakoj klasi "col-md-12", uzimajući boju pozadine odabranog elementa i dodjeljujući je tijelu tijela stranica je otvorena. Tada će se izvršiti događaj window.close (); koji zatvaraju prozor našeg proširenja. Kod definiran za main.js je sljedeći:

 $ (document) .ready (function () {$ (". col-md-12"). click (function () {var color = $ (this) .css ("background-color"); chrome.tabs. executeScript (null, {code: "$ ('body'). css ('background-color', '" + color + "')"}); window.close ();});});

Rezultat pri izvršavanju našeg proširenja moći ćemo vizualizirati ikonu koju smo za njega stvorili u gornjoj traci.

Klikom na naše proširenje prikazat će se sljedeći skočni prozor:

A pri odabiru jedne od opcija rezultat će biti sljedeći:

POVEĆAJTE

Vježba 3 - Vrhunska povijest
U ovom primjeru primijenit ćemo sve gore navedeno, stvorit ćemo proširenje koje će nam, kada kliknemo na njega, prikazati skočni prozor s popisom najposjećenijih stranica iz našeg preglednika, dajući izravan pristup tim stranicama. Jedina razlika u ovom primjeru je ta što ćemo od jednog Chromeovog apisa zatražiti dopuštenje za pristup najgledanijim stranicama iz Chromea. Naziv ovog api -a je chrome.topSites.

Za početak idemo na Chrome Dev Editor i stvorili smo naš projekt s imenom TopHistorial a u vrsti projekta odabiremo opciju JavaScript Chrome Chrome.

Zatim naš dosje manifest.json To bi trebalo biti sljedeće:

 {"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Prikaži popis najgledanijih stranica u našem pregledniku", "version": "0.0.1", " minimum_chrome_version ":" 38 "," permissions ": [" topSites "]," browser_action ": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," content_scripts ": [{" podudara se s ": [" "]," css ": [" assets / bootstrap / css / bootstrap.min.css "]," js ": [" assets / jquery.min.js "," main.js "], "run_at": "document_start"}]}}

Kao što vidite, manifestu dodajemo novi atribut kako bismo mogli dobiti dopuštenje za Chromeov api: Deklarirajte dopuštenja, koristi se u većini Chrome API -ja u vašem proširenju, prvo ga morate deklarirati postavljanjem polja dopuštenja u vašem manifestu. Svako dopuštenje može biti tekstualni niz koji pripada sljedećem popisu (podijeljeno na 3 slike):

Što se tiče našeg dosjea popup.html To bi trebalo biti sljedeće:

 Popup MultipleColor

Naša arhiva main.js koji će sadržavati api upit i rukovanje događajem klika, bit će predstavljen na sljedeći način:

 $ (document) .ready (function () {function openpage () {chrome.tabs.create ({url: $ (this) .attr ("href")});} funkcija buildPopupDom (mostVisitedURLs) {for (var i = 0; i <mostVisitedURLs.length; i ++) {$ ("# top_list"). Dodati ('
' + najviše posjećenih URL -ova [i] .title +'
'); } $ (". veze"). bind ("klik", otvorena stranica); } chrome.topSites.get (buildPopupDom); });

Na strukturnoj razini naš projekt trebao je biti sljedeći:

Prilikom izvršavanja našeg proširenja moći ćemo vidjeti ikonu na vrhu preglednika, koja je u mom slučaju dizajnirana plavom bojom, kada kliknete na nju, otvara se skočni prozor s popisom stranica kojima sam najviše pristupio sa svoje stranice preglednik poredan prema broju posjeta koje sam obavio.

POVEĆAJTE

Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod