Dacă vă întrebați cum se face o extensie Chrome, extensia Chrome este excelentă pentru implementările de bază. Cu toate acestea, pentru a utiliza mai avansatcaracteristicile necesită o mulțime de Googling și Stack Overflow. Să facem anintermediate Chrome extension care interacționează cu pagina: va găsiprimul link extern pe pagină și deschideți-l într-o filă nouă.

manifest.json

manifestul.fișierul json spune Chrome informații importante despre dvs. extensie, cum ar fi numele și permisiunile de care are nevoie.,

extensia cea mai de bază posibilă este un director cu un fișier manifest.json.Să creați un director și-a pus următoarele JSONinto manifest.json:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1" }

acesta este cel mai de bază, este posibil manifest.json, cu toate câmpurile necesare filledin. manifest_version ar trebui să fie întotdeauna 2, deoarece versiunea 1 isunsupported ca din ianuarie 2014. Până în prezent, extensia noastră nu face absolut nimic, dar să o încărcăm oricum în Chrome.,pentru a încărca extensia în Chrome, deschideți chrome://extensions/ în browserul dvs. și faceți clic pe” Mod Dezvoltator ” în partea dreaptă sus. Acum faceți clic pe” Încărcați despachetatextensie… ” și selectați directorul extensiei. Ar trebui să vă vedeți acumreextensie în listă.când modificați sau adăugați cod în extensia dvs., reveniți la această pagină și încărcați pagina. Chrome va reîncărca extensia.

Scripturi de conținut

un script de conținut este ” un fișier JavaScript care rulează în contextul paginilor web.,”Aceasta înseamnă că un script de conținut poate interacționa cu paginile web pe care browservisits le oferă. Nu orice fișier JavaScript dintr-o extensie Chrome poate face acest lucru; vom vedea de ce mai târziu.

Să adăugați un conținut script numit content.js:

// content.js alert("Hello from your Chrome extension!")

Pentru a injecta script-ul, avem nevoie să ne spunem manifest.json file despre asta.,

mai manifest.json fișier:

"content_scripts": , "js": } ]

Acest lucru spune Chrome pentru a injecta content.js în fiecare pagină vom vizita folosind thespecial <all_urls> model de URL. Dacă vrem să injectăm scriptul numai pe unelepagini, putem folosi modele de potrivire. Iată câteva exemple de valori pentru"matches":

Reîncărcați extensia Chrome. Fiecare pagină pe care o vizitați apare acum o alertă. În schimb, să înregistrăm prima adresă URL pe pagină.,

logare URL-ul

jQuery nu este necesar, dar face totul mai ușor. În primul rând, descărcați aversiunea jQuery din CDN jQuery și puneți-l în folderul extensiei dvs. Idownloaded cea mai recentă versiune minified, jquery-2.1.3.min.js. Să-l încarce, addit să manifest.json înainte "content.js"., Întreaga ta manifest.json ar trebui să privesti ca si cum acest lucru:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1", "content_scripts": , "js": } ] }

Acum, că ne-au jQuery, să-l utilizați pentru a vă conecta la URL-ul de prima externe linkon pagina în content.js:

// content.js var firstHref = $("a").eq(0).attr("href"); console.log(firstHref);

Rețineți că nu avem nevoie pentru a folosi jQuery pentru a verifica dacă documentul a fost încărcat. În mod implicit, Chrome injectează scripturi de conținut după finalizarea DOM.

Încercați – ar trebui să vedeți ieșirea din consola dvs. pe fiecare pagină pe care o vizitați.,

acțiuni Browser

când o extensie adaugă o mică pictogramă lângă bara de adrese, aceasta este o acțiune browser. Extensia dvs. poate asculta clicuri pe acel buton și apoi dosomething.

pune pictograma.png de la Google extensia tutorial în dosarul de extensie șiadd asta manifest.json:

"browser_action": { "default_icon": "icon.png" }

În scopul de a utiliza browser-ul de acțiune, avem nevoie pentru a adăuga mesajul trece.

mesaj care trece

un script de conținut are acces la pagina curentă, dar este limitat în API-urile de acces itcan., De exemplu, nu poate asculta clicuri pe acțiunea browserului. Trebuie să adăugăm un alt tip de script la Extensia noastră, un script de fundal,care are acces la fiecare API Chrome, dar nu poate accesa pagina curentă. AsGoogle pune:

scripturile de conținut au unele limitări. Nu se poate folosi chrome.* APIs, cu excepția extension, i18n, runtime și storage.,

deci scriptul de conținut va putea trage o adresă URL din pagina curentă, darva trebui să predea acea adresă URL scriptului de fundal pentru a face ceva utilcu ea. Pentru a comunica, vom folosi ceea ce Google numește message passing, care permite scripturilor să trimită și să asculte mesaje. Este singura cale pentruscripturi de conținut și scripturi de fundal pentru a interacționa.,

se Adaugă următorul text pentru a spune manifest.json despre fondul script:

"background": { "scripts": }

Acum vom adăuga background.js:

Acesta va trimite un arbitrare JSON utilă a filei curente. Cheile JSONpayload pot fi orice, dar am ales "message" pentru simplitate. Acum avem nevoie de tolisten pentru că mesajul în content.js:

Observați că toate noastre anterioare, codul a fost mutat în ascultător, așa că se execută numai atunci când încărcătura este primit., De fiecare dată când faceți clic pe pictograma browseraction, ar trebui să vedeți o adresă URL înregistrată în consolă. Dacă nu funcționează, încercați să reîncărcați extensia și apoi să reîncărcați pagina.

Deschiderea unui nou tab

putem folosi chrome.tabs API pentru a deschide o filă nouă:

chrome.tabs.create({"url": "http://google.com"});

chrome.tabs poate fi utilizat doar de către background.js, așa că va trebui să adăugați somemore mesajul trece de background.js poate deschide tab-ul, dar nu se poate apuca theURL., Iată ideea:

  1. ascultați un clic pe acțiunea browser-ului în background.js. Când’sclicked, trimite un clicked_browser_action eveniment content.js.
  2. când content.js primește evenimentul, acesta apucă adresa URL a primului link de pepagină. Apoi, trimite open_new_tab înapoi background.js cu URL-ul sădeschide.
  3. background.js ascultă pentru open_new_tab și deschide un nou tab cu givenURL atunci când primește mesajul.,

Click pe browser-ul de acțiune va declanșa background.js, care va trimite un mesaj pentru content.js, care va trimite un URL-ul înapoi la background.js, care willopen un nou tab cu URL-ul dat.

în Primul rând, trebuie să spun content.js pentru a trimite URL-ul la background.js., Schimbacontent.js pentru a folosi acest cod:

Acum, avem nevoie pentru a adăuga unele cod pentru a spune background.js pentru a asculta pentru acest eveniment:

Acum, când faceți clic pe browser-ul de acțiune pictogramă, se deschide un nou tab cu firstexternal URL-ul pe pagina.

Ambalaj-l în sus

Cu content.js și background.js sunt mai sus., Aici e plin manifest.json:

Iar aici e plin structură de directoare:

. ├── background.js ├── content.js ├── icon.png ├── jquery-2.1.3.min.js └── manifest.json

Mai mult pe cum sa faci o extensie Chrome

Pentru mai multe informații, să încerce oficial Chrome extensia de documentare.