✅ Programmējiet un izveidojiet paplašinājumus pārlūkam Chrome

Satura rādītājs

1. Kā izveidot un programmēt Chrome paplašinājumu
2. Chrome paplašinājumu piemērs

Šī apmācība tiks sadalīta 3 sadaļās: pirmā sadaļa, kurā mēs izskaidrosim dažādus jēdzienus par paplašinājumiem pārlūkā Chrome, to struktūru un paplašinājuma pamata izveidi. Otrajā sadaļā mēs pievērsīsimies paplašinājumu izveidei šai lieliskajai pārlūkprogrammai, piemēram, Google Chrome, veicot vairākus praktiskus piemērus. Visbeidzot, trešajā sadaļā mēs izskaidrosim papildu iespējas, veidojot paplašinājumus, un to publicēšanu Google Chrome interneta veikalā, lai tas būtu pieejams plašai sabiedrībai.

Kas ir paplašinājumi pārlūkā Google Chrome?Paplašinājumi ir nelielas programmas, kas var mainīt un uzlabot pārlūkprogrammas, šajā gadījumā pārlūka Chrome, funkcionalitāti. Tie ir izstrādāti, izmantojot tīmekļa tehnoloģijas, piemēram, HTML, Javascript un CSS.

Paplašinājumiem ir maz vai nav lietotāja interfeisa. Piemēram, zemāk redzamajā attēlā ir redzama piekaramās atslēgas ikona, uz kuras noklikšķinot tiek atvērta neliela saskarne.

Šo konkrēto paplašinājumu izmanto, lai šifrētu un atšifrētu jūsu e -pastus ar PGP atslēgu. Paplašinājumi ir faili, kas ir iepakoti vienā, ko lietotājs lejupielādē un instalē. Šim iepakojumam, atšķirībā no parastajām tīmekļa lietojumprogrammām, nav jābūt atkarīgam no tīmekļa satura.

Kā minēts iepriekš, paplašinājumi ļauj pārlūkam Chrome pievienot funkcionalitāti, neiedziļinoties vietējā kodā. Jaunus paplašinājumus var izveidot, izmantojot pamata tehnoloģijas, ar kurām strādā lielākā daļa tīmekļa izstrādes programmētāju: HTML, CSS un Javascript.

1. Kā izveidot un programmēt Chrome paplašinājumu

Lai sāktu, mēs izveidosim vienkāršu paplašinājumu, kas izgūst attēlu no Google, kā meklēšanas vienumu izmantojot pašreizējās lapas URL. Mēs to darīsim, ieviešot lietotāja interfeisa elementu, ko mēs saucam chrome.browserAction, kas ļauj mums novietot ikonu tieši blakus hroma izvēlnei, uz kuras varat noklikšķināt, lai ātri piekļūtu. Noklikšķinot uz šīs ikonas, tiks atvērts uznirstošais logs ar attēlu, kas iegūts no pašreizējās lapas, un tas izskatīsies šādi:

Lai sāktu mūsu praksi, mēs izveidosim direktoriju ar nosaukumu Image_Viewer, tajā mēs iekļausim visus failus, ar kuriem mēs strādāsim. Kā izstrādes redaktors jūs varat izmantot vienu no savām vēlmēm, manā gadījumā es izmantošu Chrome izstrādātāju redaktoru, kuru varat lejupielādēt no šādas adreses:

Chrome izstrādātāju redaktors

Pirmā lieta, kas mums būs nepieciešama, ir izveidot manifesta failu ar nosaukumu manifest.json. Šis manifests ir nekas cits kā metadatu fails JSON formātā, kurā ir tādi rekvizīti kā nosaukums, apraksts, tā paplašinājuma versijas numurs un tā tālāk. Izvērstā līmenī mēs to izmantosim, lai paziņotu pārlūkam Chrome, ko paplašinājums darīs, un atļaujas, kas nepieciešamas noteiktu darbību veikšanai.

Manifesta faila formāts ir šāds:

 {// Obligāts "manifest_version": 2, "name": "Mans paplašinājums", "version": "versionString", // Ieteicamais "default_locale": "es", "description": "Vienkārša teksta apraksts", " ikonas ": {…}, // Atlasiet vienu (vai nevienu)" browser_action ": {…}," page_action ": {…}, // Neobligāts" autors ":…," automatizācija ":…," fons ": {// Ieteicamais "persistent": false}, "background_page":…, "chrome_settings_overrides": {…}, "chrome_ui_overrides": {"bookmarks_ui": {"remove_bookmark_shortcut": true, "remove_button": true}}, " chrome_url_overrides ": {…}," komandas ": {…}," content_capbility ":…," content_scripts ": [{…}]," content_security_policy ":" policyString "," convert_from_user_script ":…," copresence ":… , "current_locale":…, "devtools_page": "devtools.html", "event_rules": [{…}], "externally_connectable": {"atbilst": ["*: //*.example.com/*" ]}, "file_browser_handlers": […], "file_system_provider_capbility": {"configurable": true, "multiple_mounts": true, "source": "network"}, " homepage_url ":" http: // ceļš / uz / sākumlapu "," importēšana ": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa "}]," inkognito ":" aptverošs vai sadalīts "," input_components ":…," key " : "publicKey", "minimum_chrome_version": "versionString", "nacl_modules": […], "oauth2":…, "offline_enabled": true, "universālais lodziņš": {"keyword": "aString"}, "izvēles_atļaujas" : ["tabs"], "options_page": "options.html", "options_ui": {"chrome_style": true, "page": "options.html"}, "atļaujas": ["tabs"], " platformas ":…," spraudņi ": […]," prasības ": {…}," smilšu kaste ": […]," īss_nosaukums ":" Īss vārds "," paraksts ":…," pareizrakstības pārbaude ":…, "storage": {"managed_schema": "schema.json"}, "system_indicator":…, "tts_engine": {…}, "update_url": "http: //path/to/updateInfo.xml", "version_name" ":" aString "," web_accessible_resources ": […]}

Tālāk es aprakstīšu funkciju, kas atbilst vissvarīgākajām etiķetēm:

Nepieciešams:

manifest_version: Tā ir manifesta versija, to attēlo vesels skaitlis, kas norāda faila formāta versiju. Sākot ar pārlūkprogrammu Chrome 18, izstrādātājiem ir jānorāda numurs 2.

jams: Šis ir jūsu paplašinājuma nosaukums. Tajā jābūt ne vairāk kā 45 rakstzīmēm, nosaukums ir paplašinājuma galvenais definīcijas elements, un tas ir obligāts lauks. Tas tiek parādīts šādās vietās:

a) Instalācijas kastē.
b) Lietotāja saskarnē, kurā tiek ievadīts paplašinājums.
c) Chrome virtuālajā veikalā.

versija: Tam jāsastāv no viena līdz četriem veseliem skaitļiem, kas atdalīti ar punktiem, kas identificē paplašinājuma versiju. Šeit ir daži derīgu versiju piemēri:

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

Ieteicams:

default_locale: Norāda _locales (valodas) apakšdirektoriju, kurā ir šī paplašinājuma noklusējuma virknes. Visas lietotājam redzamās virknes jāievieto failā, ko sauc par messages.json. Katru reizi, kad iekļaujat jaunu valodu, jāpievieno jauns fails messages.json zem kataloga _locales / localecode, kur localecode ir valodas kods, tāpat kā en ir angļu valoda un spāņu valoda.

Internacionalizēta paplašinājuma piemērs, kas atbalsta angļu (en), spāņu (es) un korejiešu (ko), būtu šāds:

apraksts: Tas ietver virkni vienkāršā tekstā (bez HTML vai cita formāta) ar ne vairāk kā 132 rakstzīmēm, kas raksturo paplašinājuma funkcionalitāti.

Ikonas: Ļauj pievienot vienu vai vairākas paplašinājuma ikonas. Vienmēr jānodrošina 128x128 pikseļu ikona. Tas tiks izmantots instalēšanas laikā un Chrome interneta veikalā. Paplašinājumiem ir jānodrošina arī ikona 48x48, kas tiek izmantota Chrome paplašinājumu pārvaldības lapā (chrome: // extensions). Varat arī norādīt ikonu 16x16, kas tiks izmantota kā paplašinājuma lapu iecienītā ikona.

Ikonām parasti jābūt PNG formātā, jo tās vislabāk nodrošina pārredzamību. Tomēr tie var būt jebkurā WebKit atbalstītā formātā, ieskaitot BMP.webp, GIF.webp, ICO un JPEG.webp. Šeit ir ikonu specifikācijas piemērs:

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

Piemērs

Izvēlieties vienu (vai nevienu):

browser_action: Izmantojiet pārlūkprogrammu_darbība, lai ievietotu ikonas galvenajā rīkjoslā pārlūka Google Chrome augšdaļā pa labi no adreses joslas. Turklāt varat pievienot rīka padomu (peldošs ziņojums), emblēmu (peldošs teksts uz ikonas) un uznirstošo logu (peldošais logs).

Lietošanas piemērs browser_action:

 {"name": "Mans paplašinājums",… "browser_action": {"default_icon": {// pēc izvēles "19": "images / icon19.png.webp", // pēc izvēles "38": "images / icon38.png.webp" // pēc izvēles}, "default_title": "Google pasts", // pēc izvēles; tiek parādīts rīka padoms "default_popup": "popup.html" // pēc izvēles}, …}

page_action: Izmantojiet šo API, lai ievietotu savu ikonu adreses joslā.

Lietošanas piemērs:

 {"name": "Mans paplašinājums",… "page_action": {"default_icon": {// pēc izvēles "19": "images / icon19.png.webp", // pēc izvēles "38": "images / icon38. png" // pēc izvēles}, "default_title": "Google pasts", // pēc izvēles; parādīt aprakstā "default_popup": "popup.html" // pēc izvēles},…}

Piem

Neobligāti:

Fons: Paplašinājumos bieži ir jābūt vienai lapai garu secību izpildei, lai pārvaldītu kādu uzdevumu vai statusu. Šī ir HTML lapa, kas darbojas kopā ar paplašinājumu. Tas sākas, kad paplašinājums sāk darboties, un vienlaikus aktivizē tikai vienu tā gadījumu. Fona izmantošanas vietā ieteicams izmantot notikuma lapu.

Tipiskā paplašinājumā ar lapu fonā lietotāja saskarne, piemēram, pārlūkprogrammas darbība vai lapas darbība, un dažas lapas opcijas darbojas kā paplašinājuma skats. Kad skatam ir jāzina kāds stāvoklis (aizvēra logu, atjaunināja lapu …), tas pieprasa stāvokli uz lapu, kas atrodama kā fons. Kad fona lapa paziņo, ka ir notikušas izmaiņas, tā informē, ka skats jāatjaunina vai jāveic kāda darbība.

Tās formāts ir šāds:

 {"name": "Mans paplašinājums",… "background": {"scripts": ["background.js"]},…}

Formāts

Pasākumu lapas: Pirms noteikt šo atribūtu, ir jāpaskaidro, kas ir notikumu lapas. Parasti lietojumprogrammām un paplašinājumiem ir jābūt vienam, ilgstošam skriptam, lai apstrādātu kādu uzdevumu vai stāvokli. Tas ir notikumu lapu mērķis. Pasākumu lapas tiek ielādētas tikai tad, kad tas ir nepieciešams. Kad tas kaut ko aktīvi nedara, tas tiek izkrauts no kešatmiņas, atbrīvojot atmiņu un citus sistēmas resursus.

Veiktspējas priekšrocības ir ievērojamas, īpaši mazjaudas ierīcēs. Tāpēc ieteicams izmantot vairāk notikumu lapu nekā fona.

Pasākuma lapas deklarācija manifesta failā būtu šāda:

 {"name": "Mans paplašinājums", … "background": {"scripts": ["eventPage.js"], "persistent": false}, …}

Kā redzat, atšķirība no fona ir noturīgs atribūts, kuram būs nepatiess statuss.

chrome_settings_overrides: To izmanto, lai pārrakstītu dažas atlasītās konfigurācijas pārlūkā Chrome. Šī API ir pieejama tikai operētājsistēmai Windows.

Dažas no šīm konfigurācijām var būt sākumlapa (pārlūkprogrammas mājas lapa, meklēšanas pakalpojumu sniedzējs (meklēšanas nodrošinātājs) utt.).

Konfigurācijas piemērs:

 {"name": "Mans paplašinājums",… "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", "atslēgvārds ":" atslēgvārds .__ MSG_url_domain__ "," search_url ":" http: //www.foo.__MSG_url_domain__/s? q = {searchTerms} "," favicon_url ":" http: //www.foo.__MSG_url_domain__/favicon. ico "," ieteiktu_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__", "ieteiktu_url_post_params": "ieteiktu_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" .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: Šis paplašinājuma rekvizīts tiek izmantots, lai pārrakstītu dažus Chrome lietotāja interfeisa iestatījumus. Tāpat kā, piemēram, marķieri. Tās konfigurācija ir šāda:

 {"name": "Mans paplašinājums",… "chrome_ui_overrides": {"bookmarks_ui": {"remove_button": "true", "remove_bookmark_shortcut": "true"}},…}

Šajā gadījumā zvaigzne, kas pārlūkprogrammā ir iecienītajiem, tiek likvidēta.

chrome_url_overrides: Tas ir veids, kā aizstāt HTML failu no lapas paplašinājuma, ko parasti nodrošina pārlūks Google Chrome. Turklāt varat arī pārrakstīt tā CSS un JavaScript kodu.

Paplašinājums ar šādu konfigurāciju var aizstāt vienu no šīm Chrome lapām:

Grāmatzīmju pārvaldnieks: Tā ir lapa, kas tiek parādīta, kad lietotājs izvēlas opciju Chrome izvēlnes grāmatzīmju pārvaldnieka izvēlnē vai Mac datorā - grāmatzīmju pārvaldnieka vienumu grāmatzīmju izvēlnē.

PALIELINĀT

Vēsture (vēsture): Tā ir lapa, kas tiek parādīta, kad lietotājs izvēlas vēsturi no Chrome izvēlnes vai, ja izmantojat operētājsistēmu Mac, vienums parāda visu vēsturi no izvēlnes, kas atrodama vēstures opcijā.

PALIELINĀT

Jauna cilne (jauna cilne): Tā ir lapa, kas parādās, kad lietotājs no pārlūka izveido jaunu cilni vai logu. Varat arī piekļūt šai lapai, adreses joslā ievietojot šādu adresi: chrome: // newtab

PALIELINĀT

PiezīmeViens paplašinājums var pārrakstīt tikai vienu lapu. Piemēram, paplašinājums nevar pārrakstīt grāmatzīmes un savukārt vēstures lapu.

 {"name": "Mans paplašinājums",… "chrome_url_overrides": {"newtab": "mypage.html" // opcijas ir newtab, history, bookmarks},…}

komandas: Šo komandu API izmanto, lai pievienotu īsinājumtaustiņus, kas aktivizē darbību jūsu paplašinājumā. Piemēram, darbība, lai atvērtu pārlūka darbību vai nosūtītu komandu paplašinājumam.

 {"name": "Mans paplašinājums",… "commands": {"toggle-feature-foo": {"ieteicamais_taustiņš": {"noklusējums": "Ctrl + Shift + Y", "mac": "Command + Shift + Y "}," description ":" Pārslēgt funkciju foo "}," _execute_browser_action ": {" ieteicamais_taustiņš ": {" windows ":" Ctrl + Shift + Y "," mac ":" Command + Shift + Y ", "chromeos": "Ctrl + Shift + U", "linux": "Ctrl + Shift + J"}}, "_execute_page_action": {"ieteicamais taustiņš": {"noklusējums": "Ctrl + Shift + E", "windows ":" Alt + Shift + P "," mac ":" Alt + Shift + P "}}},…}

Lapā Fons varat saistīt kontrolieri katrai komandai, kas definēta manifest.js (izņemot '_execute_browser_action"Y"_execute_page_action') caur onCommand.addListener.

Piemēram:

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

content_scripts: Tie ir javascript faili, kas tiek izpildīti tīmekļa lapu kontekstā. Izmantojot standarta dokumenta objekta modeli (DOM), viņi var lasīt informāciju par pārlūkprogrammas apmeklējumu tīmekļa lapām vai veikt tajās izmaiņas.

 {"name": "Mans paplašinājums",… "content_scripts": [{"atbilst": ["http://www.google.com/*"], "css": ["mystyles.css"], " js ": [" jquery.js "," myscript.js "]}],…}

content_scripts: Lai padarītu mūsu paplašinājumus drošākus un izvairītos no iespējamām vietņu skriptu radīšanas problēmām, Chrome paplašinājumu sistēma ir iekļāvusi vispārīgo jēdzienu Satura drošības politika (CSP). Tādējādi tiek ieviestas ļoti stingras politikas, kas paplašinājumus pēc noklusējuma padarīs drošākus. Kopumā CSP darbojas kā melnā un baltā saraksta mehānisms resursiem, kurus ielādējuši vai izpildījuši tā paplašinājumi.

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

Tie bija daži no vissvarīgākajiem atribūtiem. Sākotnējai praksei mēs definēsim savu manifest.json failu šādi:

 {"manifest_version": 2, "name": "Startēšanas piemērs", "description": "Šis paplašinājums parāda attēlu no pašreizējās lapas Google attēliem", "version": "1.0", "browser_action": {"default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," atļaujas ": [" activeTab "," https://www.googleapis.com/ "]}

Kā redzams manifesta paraugā, mēs deklarējām pārlūkprogrammas_darbību, aktīvās cilnes atļauju redzēt pašreizējās cilnes URL, un saimniekdatoram tika dota atļauja, tādā veidā var piekļūt Google API, lai veiktu ārējo attēlu meklēšanu.

Savukārt, definējot pārlūka_darbību, tiek atrasti 2 resursu faili: icon.png.webp un popup.html. Abiem resursiem ir jābūt paplašinājumu pakotnē, tāpēc izveidosim tos tūlīt:

icon.png.webp Tas tiks parādīts blakus daudzfunkciju lodziņam, gaidot lietotāja mijiedarbību. Tas ir tikai 19 x 19 pikseļu PNG fails.

popup.html tiks parādīts uznirstošajā logā, kas tiek izveidots, reaģējot uz lietotāja klikšķi uz ikonas. Tas ir standarta HTML fails, un tā saturs ir šāds:

Darba sākšana Paplašinājuma uznirstošais logs

PALIELINĀT

2. Pārliecinieties, vai ir atzīmēta izvēles rūtiņa izstrādātāja režīms augšējā labajā stūrī.

3. Noklikšķiniet uz Augšupielādēt paplašinātu (izpakotu) paplašinājumu, lai atvērtu failu izvēles dialogu.

PALIELINĀT

4. Dodieties uz direktoriju, kurā atrodas paplašinājuma faili, un atlasiet to.

Varat arī vilkt direktoriju, kurā atrodas jūsu projekts, un nomest to Chrome paplašinājumu logā. Tādējādi pārlūkprogrammā tiks ielādēts paplašinājums.

Tādā veidā mēs būsim izveidojuši vienkāršu Google Chrome paplašinājumu. Nākamajā daļā mēs iedziļināsimies paplašinājumu izveidē kopā ar tādiem izstrādes ietvariem kā jquery un Bootstrap, kas ļaus mums racionalizēt mūsu attīstību.

2. Chrome paplašinājumu piemērs

Šajā sadaļā mēs sniegsim vairākus piemērus, kas ļaus mums pilnībā izprast daudzas funkcijas, kas pastāv, veidojot Google Chrome paplašinājumu.

1. prakse - zils fons
Šajā piemērā mēs izveidosim vienkāršu paplašinājumu, kurā uzzināsim, kā mēs varam mainīt pārlūkprogrammā ielādēto lapu saturu. Šajā gadījumā mēs mainīsim ielādētās lapas fona krāsu un mainīsim to uz zilu.

Kā es paskaidroju šīs apmācības pirmajā daļā, jūs varat izmantot jebkuru izstrādes IDE, manā gadījumā es izmantošu Chrome Dev Editor.

PALIELINĀT

Lai sāktu, mēs izveidosim jaunu direktoriju ar nosaukumu Zils fons un mēs izveidosim projektu ar tādu pašu nosaukumu.

PALIELINĀT

Iekšpusē mēs izveidosim savu pirmo failu manifest.json kas saturēs mūsu paplašinājuma definīcijas.

PALIELINĀT

Mūsu arhīvs manifest.json jāiekļauj šāds kods:

 {"manifest_version": 2, "name": "Blue Background", "description": "Šis paplašinājums mainīja pašreizējās lapas fona krāsu", "version": "1.0", "browser_action": {"default_icon": "icon.png.webp", "default_title": "Padarīt šo lapu zilu"}, "atļaujas": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": false }}

Tā kā mūsu paplašinājums ir vienkāršs, tajā būs tikai ikona, kas, nospiežot, veiks darbību. Kā redzams failā manifest.json sadaļā mēs definējam nosaukumu un tā aprakstu browser_action Mēs definējam ikonu, kas tiks parādīta mūsu Google Chrome pārlūka joslā, un nosaukumu, kas tiks parādīts, kad peles rādītājs tiks novietots virs minētās ikonas. Attiecībā uz atļaujām mēs definēsim, ka tas tiks darīts tikai aktīvajā cilnē. Fons, kas darbosies fonā, būs mūsu fails background.js kas nebūs noturīgs, jo tas tiks izpildīts tikai tad, kad mēs noklikšķināsim uz paplašinājuma.

Mēs izveidojam savu ikonu un saglabājam to projekta direktorijā, kā noteikts manifest.json. Šajā gadījumā projekta saknē.

Tad mēs izveidojam JavaScript failu ar nosaukumu background.js tajā pašā direktorijā ar šādu kodu:

 // tiek izsaukts, kad lietotājs noklikšķina uz paplašinājuma chrome.browserAction.onClicked.addListener (funkcija (cilne) {console.log ('Mainīšana' + tab.url + 'uz zilu!'); chrome.tabs.executeScript ({code: ' document.body.style.backgroundColor = "zils" '});});

Atstājot visu projektu šādi:

PALIELINĀT

Lai palaistu mūsu paplašinājumu, viss, kas jums jādara, ir nospiest atskaņošanas pogu, kas atrodas Chrome izstrādātāju redaktora augšējā joslā.

PALIELINĀT

Nospiežot to, paplašinājums tiks automātiski ielādēts pārlūkā Google Chrome.

Apskatīsim mūsu paplašinājumu darbībā, noklikšķinot uz manis izveidotās ikonas (zils fons ar burtu A baltā krāsā), lapu, kuru esmu ielādējis pašreizējā cilnē, manā gadījumā - manu lietotāja kontu Solvetic (http: // www. .solvetic… .berth-ramncgev /) mainīs fonu uz zilu. Jāatzīmē, ka mainīsies tikai BODY elementa krāsa, nevis tajā esošie DIV, jo šādi es to definēju savā background.js.

PALIELINĀT

2. prakse - MultipleColor
Šajā piemērā es parādīšu, kā racionalizēt mūsu darbu no izstrādes IDE un koda. Iekš Chrome izstrādātāju redaktors, mēs noklikšķinām uz pogas +, lai izveidotu jaunu projektu, šoreiz mēs mainīsim projekta veidu, izvēloties opciju JavaScript Chrome lietotne.

PALIELINĀT

Kā redzat, tas automātiski ģenerē visu mūsu projekta struktūru. Ar mūsu failu manifest.json ar visizplatītākajām definīcijām.

PALIELINĀT

Šim failam mēs pievienosim īsu aprakstu uz etiķetes apraksts ievietojot vēlamo tekstu, manā gadījumā "Paplašinājums, kas ļauj mainīt fona krāsu". Šim projektam mēs izveidosim 2 ikonas, vienu no 16x16 pikseļiem un otru no 128x128 pikseļiem, kā redzat struktūrā, tās tiks saglabātas direktorijā aktīvus.

Zem atzīmes mēs pievienosim šādu kodu minimum_chrome_version:

 "atļaujas": ["cilnes", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Mainīt lapu uz vairākām krāsām.", " default_popup ":" popup.html "},

Kā redzat, mēs definējam uznirstošo logu vai skatu, kurā būs viss html, ko lietotājs redzēs, noklikšķinot uz mūsu paplašinājuma. Tad mēs pievienosim šādu kodu:

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

content_scripts- Satur JavaScript (js) un stila lapu (css) failus, kas tiks izpildīti tīmekļa lapas kontekstā. Tajā var būt šādas īpašības:

sērkociņi: Obligāts. Konkrēti, kurā lapā skripts tiks ievadīts.

exclude_matches: Neobligāti. Lapas, kas tiks izslēgtas, lai skripts netiktu ievadīts.

match_about_blank: Neobligāti. Šī vērtība ir Būla vērtība un norāda, vai skripts tiks ievietots tukšajā lapā (par: tukšs un par: srcdoc).

css: Neobligāti. Tā ir vienošanās, kas norāda css failu sarakstu, kas tiks ievietots pārlūkprogrammā pieprasītajā lapā.

js: Neobligāti. Tā ir vienošanās ar JavaScript failu sarakstu, kas tiks ievietots pārlūkprogrammā pieprasītajā lapā.

run_at: Neobligāti. Tā ir teksta virkne, kas kontrolē, kad js faili tiks ielādēti. Tās vērtība var būt:
document_start: Faili tiek ievadīti pēc jebkura css faila, bet pirms jebkura DOM izveidošanas vai jebkura cita skripta izpildes.

document_end: Faili tiek ievadīti tūlīt pēc DOM pabeigšanas, bet pirms jebkādu resursu, piemēram, attēlu un rāmju, ielādes.

document_idle: Pārlūkprogramma izvēlas skriptu ievadīšanas laiku starp dokumentu_end un tūlīt pēc loga.onload aktivizē notikumu. Šī opcija ir tā, kas ir konfigurēta pēc noklusējuma.

Mūsu faila beigās manifest.json Tam vajadzētu būt šādam:

PALIELINĀT

Kā redzat, īpašumā esam pievienojuši pāris jaunas lietas css Mēs esam definējuši Bootstrap ietvaru, kas atvieglos attīstību stila līmenī. Seko īpašumam js Mēs definējam JQUERY JavaScript bibliotēku, kas neļaus mums ātrāk un vienkāršāk strādāt ar JavaScript. Mūsu index.html failam vajadzētu izskatīties šādi:

 Uznirstošais logs MultipleColorsarkansZilsZaļšDzeltens

Failā index.html mēs vienkārši izdarām atsauces uz mūsu Bootstrap, Jquery un main.js failiem. Pamattekstā mēs definējam bootstrap konteineru ar tā daļām, kas kalpos kā pogas dažādām krāsu opcijām.

Failam main.js mēs izmantosim klikšķa notikumu, kas tiks izpildīts, nospiežot peles pogu uz katras klases "col-md-12", ņemot atlasītā elementa fona krāsu un piešķirot to pamattekstam lapa ir atvērta. Tad tiks izpildīts notikums window.close (); kas aizver mūsu paplašinājuma logu. Main.js kods ir šāds:

 $ (dokuments) .ready (funkcija () {$ (". col-md-12"). noklikšķiniet uz (function () {var color = $ (this) .css ("background-color"); chrome.tabs). executeScript (null, {kods: "$ ('body'). css ('fona krāsa', '" + krāsa + "')"}); window.close ();});});

Veicot mūsu paplašinājumu, mēs varēsim vizualizēt ikonu, ko tam esam izveidojuši augšējā joslā.

Noklikšķinot uz mūsu paplašinājuma, tiks parādīts šāds uznirstošais logs:

Un, izvēloties vienu no iespējām, rezultāts būs šāds:

PALIELINĀT

3. prakse - populārākā vēsture
Šajā piemērā mēs izmantosim visu iepriekš redzamo, mēs izveidosim paplašinājumu, uz kura, noklikšķinot uz tā, tiks parādīts uznirstošais logs ar mūsu pārlūkprogrammas visbiežāk apmeklēto lapu sarakstu, nodrošinot tiešu piekļuvi šīm lapām. Vienīgais, kas šajā piemērā atšķiras, ir tas, ka mēs lūgsim atļauju kādam no Chrome apiem piekļūt visvairāk skatītajām lapām pārlūkā Chrome. Šī api nosaukums ir chrome.topSites.

Lai sāktu, mēs ejam uz Chrome izstrādātāju redaktors un mēs izveidojām savu projektu ar nosaukumu TopHistorial un projekta tipā mēs izvēlamies JavaScript Chrome lietotnes opciju.

Tad mūsu fails manifest.json Tam vajadzētu būt šādam:

 {"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Parādīt mūsu pārlūkprogrammā visvairāk skatīto lapu sarakstu", "version": "0.0.1", " minimum_chrome_version ":" 38 "," atļaujas ": [" topSites "]," browser_action ": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," content_scripts ": [{" atbilst ": [" "]," css ": [" asset / bootstrap / css / bootstrap.min.css "]," js ": [" asset / jquery.min.js "," main.js "], "run_at": "document_start"}]}

Kā redzat, manifestam pievienojam jaunu atribūtu, lai varētu iegūt atļauju Chrome API: Deklarēt atļaujas, tiek izmantota lielākajā daļā jūsu paplašinājuma Chrome API, vispirms tas ir jādeklarē, ievietojot lauku atļaujas savā manifestā. Katra atļauja var būt teksta virkne, kas pieder šādam sarakstam (sadalīts 3 attēlos):

Attiecībā uz mūsu failu popup.html Tam vajadzētu būt šādam:

 Uznirstošais logs MultipleColor

Mūsu arhīvs main.js kas saturēs API vaicājumu un klikšķa notikuma apstrādi, tas tiks attēlots šādi:

 $ (document) .ready (function () {function openpage () {chrome.tabs.create ({url: $ (this) .attr ("href")});} function buildPopupDom (mostVisitedURLs) {for (var i = 0; i <mostVisitedURLs.length; i ++) {$ ("# top_list"). Pievienot ('
' + mostVisitedURLs [i] .title +'
'); } $ (". saites"). bind ("klikšķis", atvēršanas lapa); } chrome.topSites.get (buildPopupDom); });

Strukturālā līmenī mūsu projektam bija jābūt šādam:

Izpildot mūsu paplašinājumu, pārlūkprogrammas augšdaļā varēsim redzēt ikonu, kas manā gadījumā to veido zilā krāsā, noklikšķinot uz tās, tiek atvērts uznirstošais logs ar lapu sarakstu, kurām esmu visvairāk piekļuvis pārlūkprogramma sakārtota pēc apmeklējumu skaita.

PALIELINĀT

Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu