✅ Programați și creați extensii pentru Chrome

Cuprins

1. Cum se creează și se programează extensia Chrome
2. Exemplu de extensii pentru Chrome

Acest tutorial va fi împărțit în 3 secțiuni: o primă secțiune în care vom explica diverse concepte referitoare la extensiile din Chrome, structura acestora și crearea de bază a unei extensii. În a doua secțiune, ne vom concentra pe crearea de extensii pentru acest browser excelent, cum ar fi Google Chrome, făcând câteva exemple practice. În cele din urmă, în a treia secțiune vom explica opțiunile avansate atunci când creați extensii și cum să le publicați în magazinul web Google Chrome, astfel încât să fie disponibile publicului larg.

Ce sunt extensiile în Google Chrome?Extensiile sunt programe mici care pot modifica și îmbunătăți funcționalitatea browserului, în acest caz Chrome. Acestea sunt dezvoltate folosind tehnologii web precum HTML, Javascript și CSS.

Extensiile au puțin sau deloc interfață cu utilizatorul. De exemplu, imaginea de mai jos arată o pictogramă a unui lacăt care, atunci când faceți clic pe acesta, deschide o interfață mică.

Această extensie specială este utilizată pentru a cripta și decripta e-mailurile dvs. cu o cheie PGP. Extensiile sunt fișiere care sunt ambalate într-unul, pe care utilizatorul îl descarcă și le instalează. Acest ambalaj, spre deosebire de aplicațiile web normale, nu trebuie să depindă de conținutul web.

Așa cum s-a discutat mai sus, extensiile vă permit să adăugați funcționalități la Chrome fără a vă adânci în codul nativ. Pot fi create noi extensii cu tehnologii de bază cu care lucrează majoritatea programatorilor de dezvoltare web: HTML, CSS și Javascript.

1. Cum se creează și se programează extensia Chrome

Pentru început, vom face o extensie simplă care preia o imagine de pe Google utilizând adresa URL a paginii curente ca termen de căutare. Vom face acest lucru prin implementarea unui element de interfață utilizator pe care îl numim chrome.browserAction, care ne permite să plasăm o pictogramă chiar lângă meniul crom, pe care puteți face clic pentru acces rapid. Dacă faceți clic pe pictograma respectivă, se va deschide o fereastră pop-up care conține o imagine obținută din pagina curentă, care va arăta astfel:

Pentru a începe practica noastră, vom crea un director numit Image_Viewer, în cadrul acesta vom include toate fișierele cu care urmează să lucrăm. În calitate de editor de dezvoltare îl puteți folosi pe cel preferat de dvs., în cazul meu voi folosi Chrome Dev Editor, pe care îl puteți descărca la următoarea adresă:

Editor Chrome Dev

Primul lucru de care vom avea nevoie este să creăm un fișier manifest numit manifest.json. Acest manifest nu este altceva decât un fișier de metadate în format JSON care conține proprietăți precum numele, descrierea, numărul versiunii extensiei sale și așa mai departe. La un nivel avansat, îl vom folosi pentru a declara către Chrome ce va face extensia și permisiunile necesare pentru a face anumite lucruri.

Formatul fișierului manifest este după cum urmează:

 {// Obligatoriu "manifest_version": 2, "name": "Extensia mea", "version": "versionString", // Recomandat "default_locale": "es", "description": "O descriere cu text simplu", " pictograme ": {…}, // Selectați una (sau niciuna)" browser_action ": {…}," page_action ": {…}, // Opțional„ author ”:…,„ automatizare ”:…,„ background ”: {// Recomandat „persistent”: false}, „background_page”:…, „chrome_settings_overrides”: {…}, „chrome_ui_overrides”: {„bookmarks_ui”: {„remove_bookmark_shortcut”: adevărat, „remove_button”: adevărat}}, „ chrome_url_overrides ": {…}," comenzi ": {…}," content_capabilities ":…," content_scripts ": [{…}]," content_security_policy ":" policyString "," convertit_de_utilizator_script ": …," copresență ": … , "current_locale":…, "devtools_page": "devtools.html", "event_rules": [{…}], "externally_connectable": {"matches": ["*: //*.example.com/*" ]}, "file_browser_handlers": […], "file_system_provider_capabilities": {"configurable": true, "multiple_mounts": true, "source": "network"}, " homepage_url ":" http: // cale / către / homepage "," import ": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa "}]," incognito ":" spanning sau split "," input_components ": …," key " : "publicKey", "minimum_chrome_version": "versionString", "nacl_modules": […], "oauth2":…, "offline_enabled": adevărat, "omnibox": {"keyword": "aString"}, "optional_permissions" : ["tabs"], "options_page": "options.html", "options_ui": {"chrome_style": adevărat, "page": "options.html"}, "permissions": ["tabs"], " platforme ":…,„ pluginuri ": […],„ cerințe ”: {…},„ sandbox ”: […],„ short_name ”:„ Nume scurt ”,„ semnătură ”:…,„ verificare ortografică ”:…, "storage": {"managed_schema": "schema.json"}, "system_indicator": …, "tts_engine": {…}, "update_url": "http: //path/to/updateInfo.xml", "version_name ":" aString "," web_accessible_resources ": […]}

În continuare voi descrie funcția care îndeplinește cele mai importante etichete:

În necesar:

manifest_version: Este versiunea manifest, este reprezentată de un număr întreg care specifică versiunea formatului de fișier. Începând cu Chrome 18, dezvoltatorii trebuie să specifice numărul 2.

Yam: Este numele pe care îl va avea extensia dvs. Acesta trebuie să fie format din maximum 45 de caractere, numele este elementul principal de definiție al extensiei și este un câmp obligatoriu. Este afișat în următoarele locuri:

a) În caseta de instalare.
b) În interfața cu utilizatorul unde este administrată extensia.
c) În magazinul virtual Chrome.

versiune: Acesta trebuie să fie format din unu până la patru numere întregi separate prin puncte care identifică versiunea extensiei. Iată câteva exemple de versiuni valide:

„Versiunea 1”
„Versiune”: „1.0”
„Versiune”: „2.10.2”
„Versiune”: „3.1.2.4567”

Recomandat:

default_locale: Specifică subdirectorul _locales (limbi) care conține șirurile implicite pentru această extensie. Trebuie să puneți toate șirurile vizibile utilizatorului într-un fișier numit messages.json. De fiecare dată când includeți o nouă limbă, trebuie să adăugați un fișier nou mesaje.json în directorul _locales / localecode unde localecode este codul limbii, la fel ca en este engleză și este pentru limba spaniolă.

Un exemplu de extensie internaționalizată cu suport pentru engleză (en), spaniolă (e) și coreeană (ko), ar fi următorul:

Descriere: Acesta cuprinde un șir în text simplu (fără HTML sau alt format) cu maximum 132 de caractere care descrie funcționalitatea extensiei.

Icoane: Vă permite să adăugați una sau mai multe pictograme care reprezintă extensia. Ar trebui furnizată întotdeauna o pictogramă de 128x128px. Acesta va fi utilizat în timpul instalării și în Magazinul web Chrome. Extensiile trebuie să furnizeze, de asemenea, o pictogramă 48x48, care este utilizată în pagina de gestionare a extensiilor Chrome (chrome: // extensions). De asemenea, puteți specifica o pictogramă 16x16 pentru a fi utilizată ca favicon pentru paginile unei extensii.

Pictogramele ar trebui să fie, în general, în format PNG, deoarece are cel mai bun suport pentru transparență. Cu toate acestea, pot fi în orice format acceptat de WebKit, inclusiv BMP.webp, GIF.webp, ICO și JPEG.webp. Iată un exemplu de specificație a pictogramelor:

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

Exemplu

Selectați unul (sau nici unul):

browser_action: Utilizați browser_action pentru a pune pictograme pe bara principală de instrumente din partea de sus a browserului Google Chrome, în dreapta barei de adrese. În plus, puteți adăuga tooltip (mesaj flotant), insignă (text flotant pe pictogramă) și popup (fereastră flotantă).

Exemplu de utilizare browser_action:

 {"name": "Extensia mea", … "browser_action": {"default_icon": {// optional "19": "images / icon19.png.webp", // optional "38": "images / icon38.png.webp" // optional}, "default_title": "Google Mail", // optional; afișează un sfat „default_popup”: „popup.html” // opțional}, …}

action_pagină: Utilizați acest API pentru a plasa pictograma în bara de adrese.

Exemplu de utilizare:

 {"name": "Extensia mea", … "page_action": {"default_icon": {// optional "19": "images / icon19.png.webp", // optional "38": "images / icon38. png" // optional}, "default_title": "Google mail", // optional; arată în descriere "default_popup": "popup.html" // opțional}, …}

Opțional:

Fundal: O nevoie obișnuită în extensii este de a avea o singură pagină pentru executarea unor secvențe lungi pentru a gestiona o anumită activitate sau stare. Aceasta este o pagină HTML care rulează împreună cu extensia. Începe când extensia începe să ruleze și activează o singură instanță a acesteia la un moment dat. În loc să folosiți Background, este recomandat să utilizați o pagină de eveniment.

Într-o extensie tipică cu o pagină în fundal, interfața cu utilizatorul, de exemplu, browser_action sau page_action și unele opțiuni de pagină acționează ca vizualizarea extensiei. Atunci când vizualizarea trebuie să cunoască o anumită stare (a închis fereastra, a actualizat pagina …), face cererea de stare către pagina care se găsește ca fundal. Când pagina de fundal anunță că a existat o modificare a stării, aceasta informează vizualizarea să fie actualizată sau să ia măsuri.

Formatul său este după cum urmează:

 {"name": "Extensia mea", … "background": {"scripts": ["background.js"]}, …}

Format

Pagini Evenimente: Înainte de a defini următorul atribut, este necesar să explicați despre ce sunt paginile eveniment. O nevoie obișnuită pentru aplicații și extensii este să aveți un singur script de lungă durată pentru a gestiona anumite sarcini sau stări. Acesta este scopul paginilor evenimentului. Paginile evenimentului se încarcă numai atunci când este necesar. Când nu face ceva în mod activ, este descărcat din cache, eliberând memorie și alte resurse de sistem.

Beneficiile de performanță sunt semnificative, în special pe dispozitivele cu consum redus de energie. Acesta este motivul pentru care se recomandă utilizarea mai multor pagini de evenimente decât Background.

Declarația unei pagini de eveniment din fișierul manifest ar fi următoarea:

 {"name": "Extensia mea", … "background": {"scripts": ["eventPage.js"], "persistent": false}, …}

După cum puteți vedea, diferența pe care o are cu Background este atributul persistent, care va avea o stare falsă.

chrome_settings_overrides: Este folosit pentru a suprascrie unele configurații selectate în Chrome. Acest API este disponibil numai pentru Windows.

Unele dintre aceste configurații pot fi Pagina principală (pagina de pornire a browserului, Furnizorul de căutare (furnizorul de căutare) etc.

Exemplu de configurare:

 {"name": "Extensia mea", … "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", "keyword ":" cuvânt cheie .__ MSG_url_domain__ "," search_url ":" http: //www.foo.__MSG_url_domain__/s? q = {searchTerms} "," favicon_url ":" http: //www.foo.__MSG_url_domain__/favicon. ico "," suggest_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__", "suggest_url_post_params": "suggest_lang = __ MSG_url: __ 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_domain? .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: Această proprietate a extensiei este utilizată pentru a suprascrie unele setări din interfața utilizatorului Chrome. Ca de exemplu markerii. Configurarea sa este după cum urmează:

 {"name": "Extensia mea", … "chrome_ui_overrides": {"bookmarks_ui": {"remove_button": "true", "remove_bookmark_shortcut": "true"}}, …}

În acest caz, steaua pe care browserul o are pentru favorite este eliminată.

chrome_url_overrides: Acesta este un mod de a înlocui fișierul HTML din extensia unei pagini pe care browserul Google Chrome o oferă în mod normal. În plus, puteți suprascrie codul CSS și JavaScript.

O extensie cu această configurație poate înlocui una dintre următoarele pagini Chrome:

Manager marcaje: Este pagina care apare atunci când utilizatorul alege opțiunea din meniul Manager marcaje din meniul Chrome sau pentru Mac, elementul Manager marcaje din meniul Marcaje.

MARI

Istorie (istorie): Este pagina care apare atunci când utilizatorul alege istoricul din meniul Chrome sau, pe Mac, elementul afișează istoricul complet din meniul din opțiunea istoric.

MARI

Fila nouă (fila nouă): Este pagina care apare atunci când utilizatorul creează o nouă filă sau fereastră din browser. De asemenea, puteți accesa această pagină plasând următoarea adresă în bara de adrese: chrome: // newtab

MARI

NotăO singură extensie poate suprascrie o singură pagină. De exemplu, o extensie nu poate suprascrie marcajele și, la rândul său, pagina de istoric.

 {"name": "Extensia mea", … "chrome_url_overrides": {"newtab": "mypage.html" // opțiunile sunt newtab, istoric, marcaje}, …}

comenzi: Această comandă API este utilizată pentru a adăuga comenzile rapide de la tastatură care declanșează o acțiune în extensia dvs. De exemplu, o acțiune pentru deschiderea acțiunii browserului sau trimiterea unei comenzi către extensie.

 {"name": "Extensia mea", … "comenzi": {"toggle-feature-foo": {"suggest_key": {"default": "Ctrl + Shift + Y", "mac": "Command + Shift + Y "}," description ":" Comută funcția foo "}," _execute_browser_action ": {" suggest_key ": {" windows ":" Ctrl + Shift + Y "," mac ":" Comandă + Shift + Y ", "chromeos": "Ctrl + Shift + U", "linux": "Ctrl + Shift + J"}}, "_execute_page_action": {"suggest_key": {"default": "Ctrl + Shift + E", "windows ":" Alt + Shift + P "," mac ":" Alt + Shift + P "}}}, …}

În pagina dvs. de fundal, puteți lega un controler pentru fiecare dintre comenzile definite în manifest.js (cu excepția „_execute_browser_action„Y”_execute_page_action') prin intermediul onCommand.addListener.

De exemplu:

 chrome.commands.onCommand.addListener (funcție (comandă) {console.log ('Comandă apăsată:', comandă);});

content_scripts: Sunt fișiere javascript care sunt executate în contextul paginilor web. Folosind modelul standard de obiecte document (DOM), aceștia pot citi detaliile paginilor web ale vizitelor browserului sau le pot face modificări.

 {"name": "Extensia mea", … "content_scripts": [{"matches": ["http://www.google.com/*"], "css": ["mystyles.css"], " js ": [" jquery.js "," myscript.js "]}], …}

content_scripts: Pentru a face extensiile noastre mai sigure și pentru a evita potențialele probleme de scriptare între site-uri, sistemul de extensii Chrome a încorporat conceptul general de Politica de securitate a conținutului (CSP). Aceasta introduce politici foarte stricte care vor face extensiile mai sigure în mod prestabilit. În general, CSP funcționează ca un mecanism de listă alb-negru pentru resursele încărcate sau executate de extensiile sale.

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

Acestea au fost unele dintre cele mai importante atribute. Pentru practica noastră inițială, vom defini fișierul manifest.json după cum urmează:

 {"manifest_version": 2, "name": "Exemplu de pornire", "description": "Această extensie afișează o imagine din imagini Google a paginii curente", "version": "1.0", "browser_action": {"default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," permissions ": [" activeTab "," https://www.googleapis.com/ "]}

După cum puteți vedea în exemplul nostru de manifest, am declarat browser_action, permisiunea activeTab pentru a vedea adresa URL a filei curente, iar gazda a primit permisiunea, în acest fel se poate accesa API-ul Google pentru a efectua căutarea imaginilor externe.

La rândul lor, se găsesc 2 fișiere de resurse la definirea browser_action: icon.png.webp și popup.html. Ambele resurse trebuie să existe în pachetul de extensii, deci să le creăm acum:

icon.png.webp Acesta va fi afișat lângă caseta multifuncțională, în așteptarea interacțiunii utilizatorului. Este doar un fișier PNG de 19 px x 19 px.

popup.html va fi afișat în fereastra pop-up care este creată ca răspuns la clicul utilizatorului pe pictogramă. Este un fișier HTML standard și conținutul său este după cum urmează:

Introducere Pop-up-ul extensiei

MARI

2. Asigurați-vă că este bifată caseta de selectare pentru modul dezvoltator din colțul din dreapta sus.

3. Faceți clic pe Încărcare extensie dezarhivată (despachetată) pentru a afișa un dialog de selectare a fișierelor.

MARI

4. Navigați la directorul în care se află fișierele dvs. de extensie și selectați-l.

Alternativ, puteți trage directorul care conține proiectul dvs. și îl puteți plasa în fereastra extensiilor Chrome. Aceasta va încărca extensia în browserul dvs.

În acest fel vom fi creat o extensie simplă pentru Google Chrome. În următoarea noastră tranșă, vom aprofunda construcția de extensii împreună cu cadre de dezvoltare precum jquery și Bootstrap, care ne vor permite să ne eficientizăm dezvoltarea.

2. Exemplu de extensii pentru Chrome

În această secțiune vom realiza mai multe exemple care ne vor permite să înțelegem pe deplin multe dintre funcționalitățile care există atunci când construim o extensie pentru Google Chrome.

Practica 1 - Fundal albastru
În acest exemplu, vom face o extensie simplă, unde vom afla cum putem modifica conținutul paginilor pe care le încărcăm în browserul nostru. În acest caz, vom modifica culoarea de fundal a paginii încărcate și o vom schimba în albastru.

După cum am explicat în prima parte a acestui tutorial, puteți utiliza orice IDE de dezvoltare, în cazul meu voi folosi Chrome Dev Editor.

MARI

Pentru început, vom crea un nou director cu numele Fundal albastru și vom crea un proiect cu același nume.

MARI

În interior vom crea primul nostru fișier manifest.json care va conține definițiile extensiei noastre.

MARI

Arhiva noastră manifest.json trebuie să conțină următorul cod:

 {"manifest_version": 2, "name": "Fundal albastru", "description": "Această extensie a schimbat culoarea de fundal a paginii curente", "version": "1.0", "browser_action": {"default_icon": "icon.png.webp", "default_title": "Faceți această pagină albastră"}, "permissions": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": false }}

Deoarece extensia noastră este simplă, va conține doar o pictogramă care, atunci când este apăsată, va executa o acțiune. După cum puteți vedea în fișier manifest.json definim un nume și descrierea acestuia, în browser_action Definim pictograma care va fi afișată în bara browserului Google Chrome și un titlu care va fi afișat atunci când indicatorul mouse-ului este poziționat peste pictograma menționată. În ceea ce privește permisiunile, vom defini că se va face numai în fila activă. Fișierul care va rula în fundal va fi fișierul nostru background.js care nu va fi persistent, deoarece va fi executat numai atunci când facem clic pe extensie.

Ne creăm pictograma și o salvăm în directorul proiectului așa cum este definit în manifest.json. În acest caz, în rădăcina proiectului.

Apoi creăm un fișier JavaScript numit background.js în același director cu următorul cod:

 // sunat atunci când utilizatorul face clic pe extensia chrome.browserAction.onClicked.addListener (funcție (filă) {console.log ('Schimbarea' + tab.url + 'în albastru!'); chrome.tabs.executeScript ({cod: ' document.body.style.backgroundColor = "albastru" '});});

Părăsirea întregului proiect după cum urmează:

MARI

Pentru a rula extensia noastră, tot ce trebuie să faceți este să apăsați butonul de redare din bara de sus a Editorului de dispozitive Chrome.

MARI

Prin apăsarea ei extensia va fi încărcată automat în browserul Google Chrome.

Să vedem extensia noastră în acțiune, făcând clic pe pictograma pe care am realizat-o (fundal albastru cu litera A în alb), pagina pe care am încărcat-o în fila curentă, în cazul meu contul meu de utilizator în Solvetic (http: // www .solvetic … .berth-ramncgev /) își va schimba fundalul în albastru. Trebuie remarcat faptul că doar culoarea elementului BODY se va schimba și nu DIV-urile pe care le conține, deoarece așa l-am definit în background.js.

MARI

Practica 2 - MultipleColor
Pentru acest exemplu, voi arăta cum să ne simplificăm activitatea din IDE-ul de dezvoltare și din cod. În Editor Chrome Dev, facem clic pe butonul +, pentru a crea un proiect nou, de data aceasta vom schimba tipul de proiect, selectând opțiunea Aplicația JavaScript JavaScript.

MARI

După cum puteți vedea, generează automat întreaga structură a proiectului nostru. Cu dosarul nostru manifest.json cu cele mai comune definiții.

MARI

La acest fișier vom adăuga o scurtă descriere pe etichetă Descriere plasând textul dorit, în cazul meu „Extensie care permite schimbarea culorii de fundal”. Pentru acest proiect vom crea 2 pictograme, una de 16x16 pixeli și cealaltă de 128x128 pixeli, după cum puteți vedea în structură, acestea vor fi salvate în director active.

Vom adăuga următorul cod sub etichetă minimum_chrome_version:

 "permissions": ["tabs", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Schimbați pagina cu mai multe culori.", " default_popup ":" popup.html "},

După cum puteți vedea, definim un popup sau o vizualizare care va conține toate html-urile pe care le va vedea utilizatorul atunci când face clic pe extensia noastră. Apoi vom adăuga următorul cod:

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

content_scripts- Conține fișierele JavaScript (js) și foaia de stil (css) care vor fi executate în contextul paginii web. Poate conține următoarele proprietăți:

chibrituri: Obligatoriu. Specific pentru ce pagină va fi injectat scriptul.

exclude_matches: Opțional. Pagini care vor fi excluse pentru ca scriptul să nu fie injectat.

match_about_blank: Opțional. Această valoare este booleană și indică dacă scriptul va fi inserat în pagina goală (aproximativ: gol și aproximativ: srcdoc).

css: Opțional. Este un aranjament care indică lista fișierelor css care vor fi inserate în pagina care este solicitată în browser.

js: Opțional. Este un aranjament cu lista de fișiere JavaScript care vor fi inserate în pagina care este solicitată în browser.

fugi la: Opțional. Este un șir de text care controlează când vor fi încărcate fișierele js. Valoarea sa poate fi:
document_start: Fișierele sunt injectate după orice fișier CSS, dar înainte de a construi orice DOM sau de a executa orice alt script.

document_end: Fișierele sunt injectate imediat după finalizarea DOM, dar înainte de a fi încărcate orice resurse, cum ar fi imagini și cadre.

document_idle: Browserul alege ora pentru a injecta scripturi între document_end și imediat după window.onload declanșează evenimentul. Această opțiune este cea care este configurată implicit.

La sfârșitul dosarului nostru manifest.json Ar trebui să fie după cum urmează:

MARI

După cum puteți vedea, am adăugat câteva lucruri noi în proprietate css Am definit cadrul Bootstrap care nu va facilita dezvoltarea la nivel de stil. Urmărit pe proprietate js Definim biblioteca JQUERY JavaScript, care nu ne va permite să lucrăm într-un mod mai rapid și mai ușor tot ceea ce are legătură cu JavaScript. Fișierul index.html ar trebui să arate astfel:

 Popup MultipleColorroșuAlbastruVerdeGalben

În fișierul index.html facem pur și simplu referințe la fișierele noastre Bootstrap, Jquery și main.js. În corp definim un container bootstrap cu divs-urile sale care vor servi drept butoane pentru diferitele opțiuni de culoare.

Pentru fișierul main.js vom folosi evenimentul de clic care va fi executat la apăsarea butonului mouse-ului pe fiecare clasă "col-md-12", luând culoarea de fundal a elementului selectat și atribuindu-l corpului pagina a fost deschisă. Apoi evenimentul window.close () va fi executat; care închid fereastra extensiei noastre. Codul definit pentru main.js este după cum urmează:

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

Rezultatul atunci când executăm extensia noastră vom putea vizualiza pictograma pe care am creat-o pentru ea în bara superioară.

Dacă faceți clic pe extensia noastră, va apărea următorul popup:

Și când selectați una dintre opțiuni, rezultatul va fi următorul:

MARI

Practica 3 - Istorie de top
În acest exemplu vom aplica tot ce se vede mai sus, vom crea o extensie care, atunci când facem clic pe ea, ne va afișa un popup cu lista celor mai vizitate pagini din browserul nostru, oferind acces direct la aceste pagini. Singurul lucru diferit din acest exemplu este că vom solicita permisiunea unuia dintre API-urile Chrome pentru a accesa cele mai vizualizate pagini din Chrome. Numele acestui API este chrome.topSites.

Pentru a începe vom merge Editor Chrome Dev și ne-am creat proiectul cu numele TopHistorial iar în tipul de proiect selectăm opțiunea JavaScript Chrome App.

Apoi dosarul nostru manifest.json Ar trebui să fie după cum urmează:

 {"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Afișează lista celor mai vizualizate pagini din browserul nostru", "version": "0.0.1", " minimum_chrome_version ":" 38 "," permissions ": [" topSites "]," browser_action ": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," content_scripts ": [{" potriviri ": [" "]," css ": [" assets / bootstrap / css / bootstrap.min.css "]," js ": [" assets / jquery.min.js "," main.js "], "run_at": "document_start"}]}

După cum puteți vedea, adăugăm un nou atribut la manifest pentru a putea obține permisiunea în API-ul Chrome: Declarați permisiunile, este utilizat în majoritatea API-urilor Chrome din extensia dvs., trebuie mai întâi să o declarați plasând câmpul permisiuni în manifestul tău. Fiecare permisiune poate fi un șir de text aparținând listei următoare (împărțit în 3 imagini):

În ceea ce privește dosarul nostru popup.html Ar trebui să fie după cum urmează:

 Popup MultipleColor

Arhiva noastră main.js care va conține interogarea API și gestionarea evenimentului de clic, va fi reprezentată după cum urmează:

 $ (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"). Append ('
'+ mostVisitedURLs [i] .title +'
'); } $ (". links"). bind ("click", openpage); } chrome.topSites.get (buildPopupDom); });

La nivel structural, proiectul nostru ar fi trebuit să fie după cum urmează:

Când executăm extensia noastră, vom putea vedea o pictogramă în partea de sus a browserului, care, în cazul meu, o proiectează în albastru, când fac clic pe ea, deschide un popup cu lista de pagini pe care le-am accesat cel mai mult din browser ordonat după numărul de vizite pe care le-am făcut.

MARI

V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv