de ryanwhocodes

Cum se face o extensie cross-browser folosind JavaScript și API-urile browserului

Cum se face o extensie cross browser folosind JavaScript si API urile

Acest tutorial va acoperi modul de creare a unei extensii web care funcționează pe mai multe browsere. Acesta vă va arăta cum să structurați un proiect și să scrieți cod JavaScript pentru a interacționa cu filele browserului, în funcție de browserul utilizat. Acest lucru înseamnă că puteți codifica și apoi distribui un pachet de extensii în magazinele web ale mai multor browsere.

1611163685 279 Cum se face o extensie cross browser folosind JavaScript si API urile
1611163686 387 Cum se face o extensie cross browser folosind JavaScript si API urile
Magazinul web Chrome și suplimentele Firefox sunt două locuri în care puteți distribui extensia browserului

Această postare se va concentra pe browserele Chrome și Firefox, împreună cu distribuirea extensiilor prin intermediul Magazin web Chrome și Suplimente Firefox site-uri web. Alte browsere și opțiuni de distribuție sunt, de asemenea, disponibile pentru extensiile web.

Începeți cu un șablon – copiați, editați și publicați!

Pentru a vedea un exemplu completat, iată un link către o extensie pe care am făcut-o Link Formatter, cu JavaScript încrucișat în browser popup.js. Același pachet este listat atât în ​​magazinele web Chrome, cât și în Firefox.

1611163686 97 Cum se face o extensie cross browser folosind JavaScript si API urile

Extensii de browser

Extensiile sunt o modalitate fantastică de a extinde funcționalitatea browserului și vă permit să vă îmbunătățiți experiența online. Dacă construiți primul dvs. sau doriți să aflați mai multe despre acestea, vă recomand următoarele tutoriale:

Încărcați extensia dvs. local pe computer

Când dezvoltați extensia, o puteți încărca local fără a fi nevoie să o publicați și să o descărcați de pe un site web extern. Modul în care faceți acest lucru depinde de browserul pe care îl utilizați.

Crom

  • Vizita chrome://extensions/ în browserul dvs. Chrome
  • Clic Load Unpacked
  • Selectați folderul extensiei

Firefox

  • Vizita about:debugging
  • Click pe Load Temporary Add-on
  • Selectează manifest.json în folderul extensiei

Sfat de depanare: pentru a vizualiza consola, (de exemplu pentru a vedea erori), faceți clic dreapta / faceți clic pe pictograma extensiei web sau pe fereastra pop-up și selectați inspect

1611163686 758 Cum se face o extensie cross browser folosind JavaScript si API urile

Scrierea JavaScript pentru extensia de browser

Există multe API-uri JavaScript care pot fi utilizate în extensia browserului dvs. Această postare se va concentra pe filele API.

Pentru mai multe despre API-urile de extensii web, vedea API-uri JavaScript – Mozilla | MDN.

O extensie de browser care include o pagină HTML pop-up atunci când utilizatorul face clic pe pictograma din bara de instrumente a browserului ar putea avea o structură de proiect ca aceasta:

extension├── css│   └── style.css├── js│   └── popup.js├── manifest.json└── popup.html

popup.html pagina va rula apoi js/popup.js script din partea de jos a paginii. Ați adăuga JavaScript aici.

Notă: alte structuri de proiect pot avea un folder pentru codul bibliotecii, precum și fișiere JavaScript care rulează în alte zone ale extensiei. De exemplu, în extensia scripturi de fundal, și în orice alte documente incluse în extensie, inclusiv acțiunea browserului sau acțiune de pagină ferestre pop-up, bare laterale, pagini cu opțiuni, sau pagini cu filă nouă.

API-uri din fila browser

Când scrieți o extensie web, trebuie să utilizați API-ul filelor pentru a interacționa cu filele din browser. De asemenea, trebuie să solicitați permisiunea utilizatorului pentru a face acest lucru.

Solicitarea permisiunilor pentru accesarea filelor

Permisiunile trebuie setate manifest.json. Când un utilizator încearcă să instaleze extensia, acesta îl va solicita să confirme că această acțiune este permisă.

"permissions": [    "tabs"  ]
1611163686 981 Cum se face o extensie cross browser folosind JavaScript si API urile
Firefox este unul dintre browserele care utilizează API-ul browser.tabs

Interogarea filelor cu API-ul browserului

Browsere, cum ar fi Firefox, utilizează browser.tabs API pentru a interacționa cu filele browserului. Pentru a solicita informații despre filele ferestrei, utilizați query , care returnează o promisiune cu o serie de file.

browser.tabs.query(  queryInfo  // object)

Citiți mai multe despre browser.tabs.query la tabs.query () – Mozilla | MDN

Pentru a solicita fila activă pentru fereastra browserului, trebuie să scrieți următorul JavaScript:

browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData)

Pentru a obține fila curentă, preluați prima filă din matricea returnată de file. Urmând această structură, puteți obține datele din fila browserului.

const logCurrentTabData = (tabs) => {  currentTab = tabs[0]  console.log(currentTab.title);  console.log(currentTab.url);}

Cu toate acestea, când încercați să deschideți extensia în Chrome …

1611163687 521 Cum se face o extensie cross browser folosind JavaScript si API urile
Încercarea de a utiliza API-ul browserului în Chrome generează o eroare
1611163687 730 Cum se face o extensie cross browser folosind JavaScript si API urile
Browserul Chrome utilizează API-ul chrome.tabs

Interogarea filelor cu API-ul Chrome

Chrome are propriul API pentru interogări cu file. Aceasta urmează sintaxa chrome.tabs → interogarea dvs.

chrome.tabs.query(object queryInfo, function callback)

Citiți mai multe despre API-urile Chrome aici: chrome.tabs – Google Chrome.

Deci, pentru a utiliza această metodă de apelare, ați scrie următoarele în extensia browserului:

chrome.tabs.query(   {active: true, currentWindow: true},   (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) });

Combinarea interogărilor de filă

Detectați ce API să utilizați

Apoi, puteți include ambele tipuri de interogări de browser în extensia dvs. utilizând o declarație condițională pentru a determina pe care să o utilizați.

if(chrome) {  chrome.tabs.query(    {active: true, currentWindow: true},    (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) }  );} else {  browser.tabs.query({active: true, currentWindow: true})    .then(logCurrentTabData)}

Adăugarea mai multor coduri pentru fiecare tip de browser

În fiecare parte a condiției, puteți adăuga apoi alte bucăți de cod care depind de diferitele API-uri, de exemplu pentru a crea file noi.

chrome.tabs.create()browser.tabs.create()

Iată codul cu metodele suplimentare adăugate, care deschide un link într-o filă nouă.

if(chrome) {  chrome.tabs.query(    {active: true, currentWindow: true},    (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) }    );  $('a').click( (event) => { chrome.tabs.create({url:event.target.href}) } )} else {  browser.tabs.query({active: true, currentWindow: true})    .then(logCurrentTabData)  $('a').click( (event) => { browser.tabs.create({url:event.target.href}) } )}

Publicarea extensiei dvs.

Cu acest cod, puteți interacționa acum cu browserul curent fără a fi nevoie să scrieți două sau mai multe proiecte de extensii web diferite. Acum puteți să vă împachetați extensia și să publicați în mai multe magazine web cu același fișier!

Citiți mai multe din Medium

Citiți mai multe din ryanwhocodes