✅ Užprogramuokite ir sukurkite „Chrome“ plėtinius

Turinys

1. Kaip sukurti ir užprogramuoti „Chrome“ plėtinį
2. „Chrome“ plėtinių pavyzdys

Ši pamoka bus padalyta į 3 skyrius: Pirmasis skyrius, kuriame paaiškinsime įvairias „Chrome“ plėtinių sąvokas, jų struktūrą ir pagrindinį plėtinio kūrimą. Antrame skyriuje mes sutelksime dėmesį į šios puikios naršyklės, pvz., „Google Chrome“, plėtinių kūrimą, atlikdami keletą praktinių pavyzdžių. Galiausiai, trečiajame skyriuje paaiškinsime išplėstines parinktis kuriant plėtinius ir kaip juos paskelbti „Google Chrome“ internetinėje parduotuvėje, kad jis būtų prieinamas plačiajai visuomenei.

Kas yra plėtiniai „Google Chrome“?Plėtiniai yra mažos programos, kurios gali keisti ir pagerinti naršyklės, šiuo atveju „Chrome“, funkcionalumą. Jie sukurti naudojant tokias žiniatinklio technologijas kaip HTML, Javascript ir CSS.

Plėtiniai turi mažai arba visai neturi vartotojo sąsajos. Pavyzdžiui, žemiau esančiame paveikslėlyje rodoma spynos piktograma, kurią spustelėjus atidaroma maža sąsaja.

Šis konkretus plėtinys naudojamas šifruoti ir iššifruoti jūsų el. Laiškus naudojant PGP raktą. Plėtiniai yra failai, supakuoti į vieną, kurį vartotojas atsisiunčia ir įdiegia. Ši pakuotė, skirtingai nei įprastos žiniatinklio programos, neturi priklausyti nuo žiniatinklio turinio.

Kaip aptarta aukščiau, plėtiniai leidžia pridėti funkcijų „Chrome“, nesigilinant į savąjį kodą. Naujus plėtinius galima sukurti naudojant pagrindines technologijas, su kuriomis dirba dauguma interneto kūrimo programuotojų: HTML, CSS ir „Javascript“.

1. Kaip sukurti ir užprogramuoti „Chrome“ plėtinį

Norėdami pradėti, mes padarysime paprastą plėtinį, kuris nuskaitys vaizdą iš „Google“, kaip paieškos terminą naudodami dabartinio puslapio URL. Tai padarysime įdiegę vartotojo sąsajos elementą, kurį mes vadiname chrome.browserAction, kuri leidžia mums šalia „Chrome“ meniu įdėti piktogramą, kurią galite spustelėti, kad greitai pasiektumėte. Spustelėjus šią piktogramą, atsidarys iššokantis langas, kuriame yra vaizdas, gautas iš dabartinio puslapio, kuris atrodys taip:

Norėdami pradėti savo praktiką, sukursime katalogą pavadinimu Image_Viewer, į tai įtrauksime visus failus, su kuriais ketiname dirbti. Kaip kūrimo redaktorius galite naudoti vieną iš savo pasirinkimų, mano atveju naudosiu „Chrome Dev Editor“, kurį galite atsisiųsti šiuo adresu:

„Chrome“ kūrėjų redaktorius

Pirmas dalykas, kurio mums reikės, yra sukurti manifesto failą pavadinimu manifestas.jsonas. Šis manifestas yra ne kas kita, kaip metaduomenų failas JSON formatu, kuriame yra tokių savybių kaip pavadinimas, aprašas, jo plėtinio versijos numeris ir pan. Išplėstiniu lygiu mes jį naudosime, norėdami pranešti „Chrome“, ką veiks plėtinys ir kokie leidimai reikalingi tam tikriems dalykams atlikti.

Manifesto failo formatas yra toks:

 {// Būtinas "manifest_version": 2, "name": "Mano plėtinys", "versija": "versionString", // Rekomenduojama "default_locale": "es", "description": "Paprastas teksto aprašymas", " piktogramos ": {…}, // Pasirinkite vieną (arba nė vieną)„ browser_action ": {…},„ page_action “: {…}, // Neprivalomas„ autorius “:…,„ automatika “:…,„ fonas “: {// Rekomenduojama "persistent": false}, "background_page":…, "chrome_settings_overrides": {…}, "chrome_ui_overrides": {"bookmarks_ui": {"remove_bookmark_shortcut": true, "remove_button": true}}, " chrome_url_overrides ": {…}," komandos ": {…}," content_capbility ":…," content_scripts ": [{…}]," content_security_policy ":" policyString "," convert_from_user_script ":…," copresence ":… , "current_locale":…, "devtools_page": "devtools.html", "event_rules": [{…}], "externally_connectable": {"atitinka": ["*: //*.example.com/*" ]}, "file_browser_handlers": […], "file_system_provider_capbility": {"configurable": true, "multiple_mounts": true, "source": "network"}, " homepage_url ":" http: // kelias / į / homepage "," import ": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa "}]," inkognito ":" apimantis arba padalintas "," input_components ":…," raktas " : "publicKey", "minimum_chrome_version": "versionString", "nacl_modules": […], "oauth2":…, "offline_enabled": true, "omnibox": {"keyword": "aString"}, "pasirenkami_permissions" : ["tabs"], "options_page": "options.html", "options_ui": {"chrome_style": true, "page": "options.html"}, "leidimai": ["tabs"], " platformos ":…," papildiniai ": […]," reikalavimai ": {…}," smėlio dėžė ": […]," trumpas_pavadinimas ":" Trumpas vardas "," parašas ":…," rašybos tikrinimas ":…, "saugykla": {"managed_schema": "schema.json"}, "system_indicator":…, "tts_engine": {…}, "update_url": "http: //path/to/updateInfo.xml", "version_name ":" aString "," web_accessible_resources ": […]}

Toliau aprašysiu funkciją, kuri atlieka svarbiausias etiketes:

Privaloma:

manifest_version: Tai manifesto versija, ją vaizduoja sveikasis skaičius, nurodantis failo formato versiją. Pradėdami nuo „Chrome 18“ kūrėjai turi nurodyti skaičių 2.

yam: Tai bus jūsų plėtinio pavadinimas. Jį turi sudaryti ne daugiau kaip 45 simboliai, vardas yra pagrindinis plėtinio apibrėžimo elementas ir privalomas laukas. Jis rodomas šiose vietose:

a) Įdiegimo dėžutėje.
b) Vartotojo sąsajoje, kurioje valdomas plėtinys.
c) „Chrome“ virtualioje parduotuvėje.

versija: Jį turi sudaryti vienas ar keturi sveiki skaičiai, atskirti taškais, kurie nurodo plėtinio versiją. Štai keletas galiojančių versijų pavyzdžių:

"1 versija"
"Versija": "1.0"
"Versija": "2.10.2"
"Versija": "3.1.2.4567"

Rekomenduojamas:

default_locale: Nurodo _locales (kalbų) pakatalogį, kuriame yra numatytosios šio plėtinio eilutės. Visas naudotojui matomas eilutes turite įdėti į failą, vadinamą messages.json. Kiekvieną kartą įtraukdami naują kalbą turite pridėti naują failą messages.json kataloge _locales / localecode, kur kalbos kodas yra lokalinis kodas, taip pat kaip en yra anglų ir yra ispanų kalba.

Tarptautinio plėtinio, palaikančio anglų (en), ispanų (es) ir korėjiečių (ko), pavyzdys būtų toks:

apibūdinimas: Jį sudaro eilutė paprastu tekstu (be HTML ar kito formato), ne daugiau kaip 132 simbolių, apibūdinanti plėtinio funkcijas.

Piktogramos: Leidžia pridėti vieną ar daugiau plėtinio simbolių. Visada turėtų būti pateikta 128 x 128 pikselių piktograma. Tai bus naudojama diegiant ir „Chrome“ internetinėje parduotuvėje. Plėtiniuose taip pat turi būti 48 x 48 piktograma, naudojama „Chrome“ plėtinių valdymo puslapyje („chrome: // extensions“). Taip pat galite nurodyti 16 x 16 piktogramą, kuri bus naudojama kaip plėtinio puslapių piktograma.

Piktogramos paprastai turėtų būti PNG formato, nes jos geriausiai palaiko skaidrumą. Tačiau jie gali būti bet kokiu formatu, kurį palaiko „WebKit“, įskaitant BMP.webp, GIF.webp, ICO ir JPEG.webp. Čia yra piktogramų specifikacijos pavyzdys:

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

Pavyzdys

Pasirinkite vieną (arba nė vieno):

browser_action: Naudodami „browser_action“ piktogramas įdėkite į pagrindinę įrankių juostą „Google Chrome“ naršyklės viršuje, adreso juostos dešinėje. Be to, galite pridėti patarimą (plaukiojantis pranešimas), ženklelį (plūduriuojantis tekstas piktogramoje) ir iššokantįjį langą (plaukiojantis langas).

Naudojimo pavyzdys browser_action:

 {"name": "Mano plėtinys",… "browser_action": {"default_icon": {// pasirenkama "19": "images / icon19.png.webp", // pasirenkama "38": "images / icon38.png.webp" // pasirenkamas}, "default_title": "Google Mail", // pasirenkamas; rodomas patarimas „default_popup“: „popup.html“ // pasirenkamas}, …}

page_action: Naudokite šią API, kad įdėtumėte savo piktogramą į adreso juostą.

Naudojimo pavyzdys:

 {"name": "Mano plėtinys",… "page_action": {"default_icon": {// pasirenkamas "19": "images / icon19.png.webp", // pasirenkamas "38": "images / icon38. png" // pasirenkamas}, "default_title": "" Google "paštas", // pasirenkamas; rodyti apraše „default_popup“: „popup.html“ // neprivaloma},…}

Pvz

Neprivaloma:

Fonas: Dažnas plėtinių poreikis yra turėti vieną puslapį ilgoms sekoms vykdyti, kad būtų galima valdyti tam tikrą užduotį ar būseną. Tai HTML puslapis, veikiantis kartu su plėtiniu. Jis prasideda, kai plėtinys pradeda veikti, ir vienu metu aktyvuoja tik vieną jo egzempliorių. Vietoj fono rekomenduojama naudoti įvykio puslapį.

Įprastame plėtinyje, kurio puslapis yra fone, vartotojo sąsaja, pvz., „Browser_action“ arba „page_action“, ir kai kurios puslapio parinktys veikia kaip plėtinio vaizdas. Kai vaizdui reikia žinoti tam tikrą būseną (uždarytas langas, atnaujintas puslapis …), būsenos užklausa pateikiama puslapiui, kuris randamas kaip fonas. Kai fono puslapyje pranešama, kad pasikeitė būsena, jis informuoja, kad reikia atnaujinti vaizdą arba imtis tam tikrų veiksmų.

Jo formatas yra toks:

 {"name": "Mano plėtinys",… "background": {"scripts": ["background.js"]},…}

Formatas

Įvykių puslapiai: Prieš apibrėždami šį atributą, turite paaiškinti, apie ką yra įvykių puslapiai. Dažnas programų ir plėtinių poreikis yra turėti vieną ilgalaikį scenarijų, skirtą tam tikrai užduočiai ar būsenai atlikti. Tai yra renginių puslapių tikslas. Įvykių puslapiai įkeliami tik tada, kai to reikia. Kai jis aktyviai nieko nedaro, jis iškraunamas iš talpyklos, atlaisvinant atmintį ir kitus sistemos išteklius.

Našumas yra didelis, ypač naudojant mažos galios įrenginius. Štai kodėl rekomenduojama naudoti daugiau įvykių puslapių nei fone.

Įvykio puslapio deklaravimas aprašo faile būtų toks:

 {"name": "Mano plėtinys", … "background": {"scripts": ["eventPage.js"], "persistent": false}, …}

Kaip matote, skirtumas tarp fono yra nuolatinis atributas, kurio būsena bus klaidinga.

chrome_settings_overrides: Jis naudojamas perrašyti kai kurias pasirinktas „Chrome“ konfigūracijas. Ši API galima tik „Windows“.

Kai kurios iš šių konfigūracijų gali būti pagrindinis puslapis (naršyklės pagrindinis puslapis, paieškos teikėjas (paieškos teikėjas) ir kt.).

Konfigūracijos pavyzdys:

 {"name": "Mano plėtinys",… "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", "raktažodis ":" raktažodis .__ MSG_url_domain__ "," search_url ":" http: //www.foo.__MSG_url_domain__/s? q = {searchTerms} "," favicon_url ":" http: //www.foo.__MSG_url_domain__/favicon. ico "," offer_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__", "offer_url_post_params": "siūlo_lang = __ MSG_url__ 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_s = "URL", "URL" .noo .__ MSG_url_url_? q = {searchTerms} "]," encoding ":" UTF-8 "," is_default ": true}," startup_pages ": [" http://www.st artup.com "]}," default_locale ":" de ", …}

chrome_ui_overrides: Ši plėtinio savybė naudojama kai kuriems „Chrome“ vartotojo sąsajos nustatymams perrašyti. Kaip, pavyzdžiui, žymekliai. Jo konfigūracija yra tokia:

 {"name": "Mano plėtinys",… "chrome_ui_overrides": {"bookmarks_ui": {"remove_button": "true", "remove_bookmark_shortcut": "true"}},…}

Tokiu atveju žvaigždė, kurią naršyklė turi mėgstamiausiems, pašalinama.

chrome_url_overrides: Tai būdas pakeisti HTML failą iš puslapio, kurį paprastai teikia „Google Chrome“ naršyklė, plėtinio. Be to, taip pat galite perrašyti jo CSS ir „JavaScript“ kodą.

Šios konfigūracijos plėtinys gali pakeisti vieną iš šių „Chrome“ puslapių:

Žymių tvarkyklė: Tai puslapis, kuris pasirodo, kai naudotojas pasirenka parinktį iš „Chrome“ meniu esančio žymių tvarkyklės meniu arba „Mac“ - žymių meniu elemento „Žymių tvarkyklė“.

DIDELIS

Istorija (istorija): Tai puslapis, kuris pasirodo, kai naudotojas pasirenka istoriją iš „Chrome“ meniu, o „Mac“ sistemoje elementas rodo visą istoriją iš meniu, esančio istorijos parinktyje.

DIDELIS

Naujas skirtukas (naujas skirtukas): Tai puslapis, kuris pasirodo, kai vartotojas sukuria naują skirtuką ar langą iš naršyklės. Taip pat galite pasiekti šį puslapį adreso juostoje nurodydami šį adresą: chrome: // newtab

DIDELIS

PastabaVienas plėtinys gali perrašyti tik vieną puslapį. Pavyzdžiui, plėtinys negali perrašyti žymių ir savo ruožtu istorijos puslapio.

 {"name": "Mano plėtinys",… "chrome_url_overrides": {"newtab": "mypage.html" // parinktys yra naujas skirtukas, istorija, žymės},…}

komandos: Ši komandų API naudojama norint pridėti sparčiųjų klavišų, kurie suaktyvina veiksmą jūsų plėtinyje. Pavyzdžiui, veiksmas, skirtas atidaryti naršyklės veiksmą arba nusiųsti komandą į plėtinį.

 {"name": "Mano plėtinys",… "komandos": {"toggle-feature-foo": {"siūlomas_raktas": {"numatytasis": "Ctrl + Shift + Y", "mac": "Command + Shift" + Y "}," description ":" Toggle feature foo "}," _execute_browser_action ": {" siūlomas_raktas ": {" windows ":" Ctrl + Shift + Y "," mac ":" Command + Shift + Y ", "chromeos": "Ctrl + Shift + U", "linux": "Ctrl + Shift + J"}}, "_execute_page_action": {"siūlomas_raktas": {"numatytasis": "Ctrl + Shift + E", "windows ":" Alt + Shift + P "," mac ":" Alt + Shift + P "}}},…}

Fono puslapyje galite susieti valdiklį kiekvienai komandai, apibrėžtai manifest.js (išskyrus „_execute_browser_action„Y“_execute_page_action') per onCommand.addListener.

Pavyzdžiui:

 chrome.commands.onCommand.addListener (funkcija (komanda) {console.log ('Komanda paspausta:', komanda);});

turinio_skriptai: Tai yra „JavaScript“ failai, vykdomi tinklalapių kontekste. Naudodami standartinį dokumento objekto modelį (DOM), jie gali perskaityti išsamią informaciją apie apsilankymų naršyklėje tinklalapius arba juos pakeisti.

 {"name": "Mano plėtinys",… "content_scripts": [{"match": ["http://www.google.com/*"], "css": ["mystyles.css"], " js ": [" jquery.js "," myscript.js "]}],…}

turinio_skriptai: Siekiant, kad mūsų plėtiniai būtų saugesni ir išvengtume galimų kelių svetainių scenarijaus problemų, „Chrome“ plėtinių sistema įtraukė bendrą sąvoką Turinio saugumo politika (CSP). Taip įvedama labai griežta politika, pagal kurią plėtiniai pagal numatytuosius nustatymus bus saugesni. Apskritai, CSP veikia kaip juodojo ir baltojo sąrašo mechanizmas ištekliams, įkeltiems ar vykdomiems jo plėtiniais.

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

Tai buvo vieni svarbiausių atributų. Pradinei praktikai savo failą manifest.json apibrėžsime taip:

 {"manifest_version": 2, "name": "Paleidimo pavyzdys", "description": "Šiame plėtinyje rodomas vaizdas iš dabartinio puslapio" Google "vaizdų", "versija": "1.0", "browser_action": {"default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," leidimai ": [" activeTab "," https://www.googleapis.com/ "]}

Kaip matote pavyzdiniame manifeste, paskelbėme „browser_action“, „ActiveTab“ leidimą matyti dabartinio skirtuko URL, o šeimininkui buvo suteiktas leidimas, tokiu būdu galima pasiekti „Google“ API, kad būtų galima atlikti išorinių vaizdų paiešką.

Savo ruožtu, nustatant „browser_action“, randami 2 išteklių failai: icon.png.webp ir popup.html. Abu ištekliai turi būti įtraukti į plėtinio paketą, todėl sukurkime juos dabar:

icon.png.webp Jis bus rodomas šalia daugiafunkcinės dėžutės, laukiant vartotojo sąveikos. Tai tik 19 x 19 pikselių PNG failas.

popup.html bus rodomas iššokančiajame lange, kuris sukurtas reaguojant į vartotojo paspaudimą ant piktogramos. Tai yra standartinis HTML failas, o jo turinys yra toks:

Darbo pradžios plėtinio iššokantis langas

DIDELIS

2. Įsitikinkite, kad viršutiniame dešiniajame kampe pažymėtas kūrėjo režimo žymės langelis.

3. Spustelėkite Įkelti išpakuotą (išpakuotą) plėtinį, kad būtų atidarytas failų pasirinkimo dialogo langas.

DIDELIS

4. Eikite į katalogą, kuriame yra plėtinių failai, ir pasirinkite jį.

Arba galite vilkti katalogą, kuriame yra jūsų projektas, ir nuvesti jį į „Chrome“ plėtinių langą. Tai įkelia plėtinį į jūsų naršyklę.

Tokiu būdu mes sukūrėme paprastą „Google Chrome“ plėtinį. Kitoje dalyje mes gilinsimės į plėtinių kūrimą kartu su tokiais kūrimo pagrindais kaip „jquery“ ir „Bootstrap“, kurie leis mums supaprastinti savo plėtrą.

2. „Chrome“ plėtinių pavyzdys

Šiame skyriuje pateiksime keletą pavyzdžių, kurie leis mums visiškai suprasti daugelį funkcijų, egzistuojančių kuriant „Google Chrome“ plėtinį.

1 praktika - mėlynas fonas
Šiame pavyzdyje mes padarysime paprastą plėtinį, kuriame sužinosime, kaip galime keisti naršyklėje įkeliamų puslapių turinį. Tokiu atveju pakeisime įkelto puslapio fono spalvą ir pakeisime ją į mėlyną.

Kaip paaiškinau pirmoje šios pamokos dalyje, galite naudoti bet kokį kūrimo IDE, mano atveju naudosiu „Chrome Dev Editor“.

DIDELIS

Norėdami pradėti, sukursime naują katalogą su pavadinimu Mėlynas fonas ir sukursime projektą tuo pačiu pavadinimu.

DIDELIS

Viduje sukursime pirmąjį failą manifestas.jsonas kuriame bus mūsų plėtinio apibrėžimai.

DIDELIS

Mūsų archyvas manifestas.jsonas turi būti toks kodas:

 {"manifest_version": 2, "name": "Blue Background", "description": "Šis plėtinys pakeitė dabartinio puslapio fono spalvą", "version": "1.0", "browser_action": {"default_icon": "icon.png.webp", "default_title": "Padarykite šį puslapį mėlyną"}, "leidimai": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": false }}

Kadangi mūsų plėtinys yra paprastas, jame bus tik piktograma, kurią paspaudus bus atliktas veiksmas. Kaip matote byloje manifestas.jsonas mes apibrėžiame pavadinimą ir jo aprašymą browser_action Mes apibrėžiame piktogramą, kuri bus rodoma „Google Chrome“ naršyklės juostoje, ir pavadinimą, kuris bus rodomas, kai pelės žymeklis bus pastatytas virš minėtos piktogramos. Kalbant apie leidimus, nustatysime, kad tai bus daroma tik aktyviame skirtuke. Fonas, kuris veiks fone, bus mūsų failas background.js kuris nebus nuolatinis, nes jis bus vykdomas tik spustelėjus plėtinį.

Mes sukuriame savo piktogramą ir išsaugome ją projekto kataloge, kaip apibrėžta manifestas.jsonas. Šiuo atveju projekto šaknyje.

Tada sukuriame „JavaScript“ failą pavadinimu background.js tame pačiame kataloge su šiuo kodu:

 // iškviečiamas, kai naudotojas spustelėja plėtinį chrome.browserAction.onClicked.addListener (funkcija (skirtukas) {console.log ('Keitimas' + tab.url + 'į mėlyną!'); chrome.tabs.executeScript ({code: ' document.body.style.backgroundColor = "mėlyna" '});});

Palikite visą projektą taip:

DIDELIS

Norėdami paleisti mūsų plėtinį, jums tereikia paspausti paleidimo mygtuką, esantį viršutinėje „Chrome“ kūrėjų redagavimo priemonės juostoje.

DIDELIS

Paspaudus, plėtinys bus automatiškai įkeltas į „Google Chrome“ naršyklę.

Pažiūrėkime, kaip veikia mūsų plėtinys, spustelėję mano sukurtą piktogramą (mėlynas fonas su balta raide A), puslapį, kurį įkėliau dabartiniame skirtuke, o mano atveju - mano vartotojo paskyrą „Solvetic“ (http: // www. .solvetic… .berth-ramncgev /) pakeis foną į mėlyną. Reikėtų pažymėti, kad pasikeis tik BODY elemento spalva, o ne jame esantys DIV, nes taip aš jį apibrėžiau savo background.js.

DIDELIS

2 praktika - „MultipleColor“
Šiame pavyzdyje parodysiu, kaip supaprastinti mūsų darbą iš kūrimo IDE ir kodo. Viduje „Chrome“ kūrėjų redaktorius, paspaudžiame mygtuką +, norėdami sukurti naują projektą, šį kartą pakeisime projekto tipą, pasirinkę parinktį „JavaScript“ „Chrome“ programa.

DIDELIS

Kaip matote, tai automatiškai sukuria visą mūsų projekto struktūrą. Su mūsų byla manifestas.jsonas su labiausiai paplitusiais apibrėžimais.

DIDELIS

Prie šio failo etiketėje pridėsime trumpą aprašymą apibūdinimas įdėti norimą tekstą, mano atveju „Plėtinys, leidžiantis pakeisti fono spalvą“. Šiam projektui sukursime 2 piktogramas, vieną iš 16x16 pikselių ir kitą iš 128x128 pikselių, kaip matote struktūroje, jos bus išsaugotos kataloge turto.

Po žyma pridėsime šį kodą minimum_chrome_version:

 "leidimai": ["skirtukai", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Pakeiskite puslapį į kelias spalvas.", " default_popup ":" popup.html "},

Kaip matote, mes apibrėžiame iššokantįjį langą arba rodinį, kuriame bus visas html, kurį vartotojas matys spustelėjęs mūsų plėtinį. Tada pridėsime šį kodą:

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

turinio_skriptai- Yra „JavaScript“ (js) ir stiliaus lapo (css) failai, kurie bus vykdomi tinklalapio kontekste. Jame gali būti šios savybės:

degtukai: Privaloma. Konkrečiai, kuriam puslapiui bus įterptas scenarijus.

exclude_matches: Neprivaloma. Puslapiai, kurie bus pašalinti, kad scenarijus nebūtų įterptas.

match_about_blank: Neprivaloma. Ši vertė yra loginė ir nurodo, ar scenarijus bus įterptas į tuščią puslapį (apie: tuščias ir apie: srcdoc).

css: Neprivaloma. Tai susitarimas, nurodantis css failų, kurie bus įterpti į puslapį, kurio prašoma naršyklėje, sąrašą.

js: Neprivaloma. Tai susitarimas su „JavaScript“ failų sąrašu, kuris bus įterptas į puslapį, kurio prašoma naršyklėje.

run_at: Neprivaloma. Tai teksto eilutė, valdanti, kada bus įkelti js failai. Jo vertė gali būti:
document_start: Failai įšvirkščiami po bet kurio css failo, bet prieš sukuriant bet kokį DOM ar vykdant bet kurį kitą scenarijų.

document_end: Failai švirkščiami iškart po to, kai DOM baigiamas, bet prieš įkeliant bet kokius išteklius, tokius kaip vaizdai ir rėmeliai.

document_idle: Naršyklė pasirenka laiką, kada įterpti scenarijus tarp „document_end“, ir iškart po „window.onload“ sukelia įvykį. Ši parinktis yra ta, kuri sukonfigūruota pagal numatytuosius nustatymus.

Mūsų failo pabaigoje manifestas.jsonas Jis turėtų būti toks:

DIDELIS

Kaip matote, nuosavybėje pridėjome keletą naujų dalykų css Mes nustatėme „Bootstrap“ sistemą, kuri nepalengvins kūrimo stiliaus lygiu. Stebima nuosavybėje js Mes apibrėžiame „JQUERY JavaScript“ biblioteką, kuri neleis mums greičiau ir lengviau dirbti visko, kas susiję su „JavaScript“. Mūsų index.html failas turėtų atrodyti taip:

 Iššokantis langas „MultipleColor“RaudonaMėlynaŽaliasGeltona

Faile index.html mes tiesiog darome nuorodas į „Bootstrap“, „Jquery“ ir „main.js“ failus. Korpuse mes apibrėžiame įkrovos konteinerį su jo dalimis, kurie bus naudojami įvairių spalvų parinkčių mygtukais.

„Main.js“ faile naudosime paspaudimo įvykį, kuris bus įvykdytas paspaudus pelės mygtuką ant kiekvienos klasės „col-md-12“, paėmus pasirinkto elemento fono spalvą ir priskiriant ją prie puslapis buvo atidarytas. Tada įvykis window.close () bus įvykdytas; kurie uždaro mūsų plėtinio langą. Pagrindinis.js kodas yra toks:

 $ (dokumentas) .ready (funkcija () {$ (". col-md-12"). spustelėkite (funkcija () {var color = $ (this) .css ("background-color"); chrome.tabs). executeScript (null, {kodas: "$ ('body'). css ('background-color', '" + color + "')"}); window.close ();});});

Vykdydami plėtinį, mes galėsime vizualizuoti piktogramą, kurią sukūrėme viršutinėje juostoje.

Spustelėjus mūsų plėtinį, pasirodys šis iššokantis langas:

Ir pasirinkus vieną iš variantų, rezultatas bus toks:

DIDELIS

3 praktika - populiariausia istorija
Šiame pavyzdyje mes pritaikysime viską, kas matyta aukščiau, sukursime plėtinį, kurį spustelėję mes parodysime iššokantįjį langą su dažniausiai lankomų mūsų naršyklės puslapių sąrašu ir suteiksime tiesioginę prieigą prie tų puslapių. Šiame pavyzdyje skiriasi tik tai, kad prašysime leidimo iš vienos iš „Chrome“ programų, kad galėtume pasiekti dažniausiai žiūrimus „Chrome“ puslapius. Šio api pavadinimas yra chrome.topSites.

Norėdami pradėti, mes ketiname „Chrome“ kūrėjų redaktorius ir mes sukūrėme savo projektą pavadinimu „TopHistorial“ o projekto tipe pasirenkame „JavaScript Chrome App“ parinktį.

Tada mūsų failas manifestas.jsonas Jis turėtų būti toks:

 {"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Rodyti žiūrimiausių puslapių sąrašą mūsų naršyklėje", "versija": "0.0.1", " minimum_chrome_version ":" 38 "," leidimai ": [" topSites "]," browser_action ": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," content_scripts ": [{" atitinka ": [" "]," css ": [" asset / bootstrap / css / bootstrap.min.css "]," js ": [" asset / jquery.min.js "," main.js "], "run_at": "document_start"}]}}

Kaip matote, prie aprašo pridedame naują atributą, kad galėtume gauti leidimą „Chrome“ API: Deklaruoti leidimus, yra naudojama daugumoje plėtinio „Chrome“ API, pirmiausia turite tai deklaruoti pateikę lauką leidimus jūsų manifeste. Kiekvienas leidimas gali būti teksto eilutė, priklausanti šiam sąrašui (padalyta į 3 vaizdus):

Kalbant apie mūsų bylą popup.html Jis turėtų būti toks:

 Iššokantis langas „MultipleColor“

Mūsų archyvas main.js kuriame bus API užklausa ir paspaudimo įvykio apdorojimas, jis bus pateiktas taip:

 $ (dokumentas) .ready (function () {function openpage () {chrome.tabs.create ({url: $ (this) .attr ("href")});} function buildPopupDom (mostVisitedURLs) {for (var i = 0; i <mostVisitedURLs.length; i ++) {$ ("# top_list"). Pridėti ('
' + mostVisitedURLs [i] .title +'
'); } $ (". links"). bind ("spustelėkite", atidaromas puslapis); } chrome.topSites.get (buildPopupDom); });

Struktūriniu lygmeniu mūsų projektas turėjo būti toks:

Vykdydami plėtinį, naršyklės viršuje pamatysime piktogramą, kuri mano atveju suprojektuota mėlyna spalva, spustelėjus ją, atidaromas iššokantis langas su puslapių, kuriuos labiausiai pasiekiau iš savo naršyklė užsakyta pagal mano atliktų apsilankymų skaičių.

DIDELIS

Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką