Cum să creezi o extensie Chrome de la zero în 3 pași

de
Tweet
Share
Share
Pin

Extensiile pentru browsere sunt, în esență, programe suplimentare care îmbunătățesc funcționalitatea acestora. Ele adaugă caracteristici și opțiuni noi la funcțiile de bază ale browserului.

Ce face o extensie mai avantajoasă decât o aplicație web? Extensiile au capacitatea de a accesa toate interfețele de programare (API) ale browserului, oferind un control extins asupra acestuia.

Cu ajutorul unei extensii, poți:

  • ✅ Personaliza aspectul vizual al browserului și al taburilor.
  • ✅ Adăuga scurtături noi pentru operațiunile browserului.
  • ✅ Monitoriza îndeaproape activitatea browserului și navigarea pe internet.

Google Chrome oferă un magazin web unde poți distribui extensiile create, astfel încât oricine să le poată folosi. S-ar putea crede că dezvoltarea unei extensii Chrome este un proces complex, dar în realitate, se bazează doar pe HTML, CSS și JavaScript.

Așadar, poți dezvolta o extensie Chrome utilizând tehnologii web familiare, cum ar fi JavaScript, iar tutorialul următor îți va arăta cum!

Dezvoltarea unei extensii Chrome

În acest ghid, vei învăța cum să creezi o extensie Chrome care examinează istoricul de navigare și îl afișează într-o fereastră pop-up.

Fișierele necesare

Singurul fișier obligatoriu pentru o extensie Chrome este `manifest.json`. Restul codului este similar cu cel utilizat în dezvoltarea unei aplicații web.

Crearea fișierului `manifest.json`

Acest fișier specific definește configurarea și funcționalitățile extensiei. Iată un exemplu de cum arată, de obicei, fișierul manifest:

{
  "manifest_version": 3,
  "name": "History",
  "description": "View Browsing History",
  "version": "0.1",
  "action": {
    "default_popup": "index.html"
  }
}

Cea mai recentă versiune a fișierului manifest, în momentul scrierii acestui articol, este v3, care, conform Chrome, aduce îmbunătățiri la nivelul securității, confidențialității și performanței extensiilor. În plus, permite extensiilor să utilizeze tehnologii web deschise, cum ar fi lucrătorii de servicii și promisiunile.

În fișierul manifest vei observa și proprietatea `action`. Aceasta specifică ce fișier HTML se va deschide în pop-up când utilizatorul apasă pe pictograma extensiei. Există și o proprietate `default_icon` care permite setarea pictogramei implicite a extensiei.

Dezvoltarea aplicației

Acum este timpul să construim aplicația, care va fi afișată utilizatorului final sub forma unui pop-up. Această parte nu este specifică extensiilor, ci este o aplicație web obișnuită.

Mai întâi, trebuie creat un fișier de intrare, pe care îl vei lista ca valoare a proprietății `default_popup` din manifest. În acest exemplu, am creat `index.html` ca punct de intrare pentru extensie.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chrome Extension</title>
    <link rel="stylesheet" href="https://wilku.top/how-to-create-a-chrome-extension-from-scratch-in-3-steps/style.css">
</head>
<body>
    <h2>Browsing History</h2>
    <ul class="list"></ul>
    <script src="./app.js"></script>
</body>
</html>

Am adăugat o foaie de stil pentru a stiliza pagina și a o face să arate bine în pop-up. Mai este inclus și un fișier JavaScript pentru gestionarea funcționalității extensiei.

function searchHistory() {
    chrome.history.search({
        text: '',
        startTime: new Date("2023-10-01").getMilliseconds()
    }, (results) => {
        for (const result of results) {
            let liItem = document.createElement("li")
            let link = document.createElement("a")
            link.innerText = result.title
            link.href = result.url
            liItem.appendChild(link)
            document.querySelector(".list").appendChild(liItem)
        }
    })
}

document.addEventListener("DOMContentLoaded", () => {
    searchHistory()
})

Acest fișier folosește API-ul de istoric al Chrome pentru a interoga istoricul browserului și a-l afișa în fereastra pop-up. Când utilizatorul apasă pe pictograma extensiei, se declanșează evenimentul `DOMContentLoaded`, care va apela funcția `searchHistory`, unde se găsește codul propriu-zis.

Metoda `search` din API-ul istoric acceptă un parametru obligatoriu, `text`, care este textul de căutare pe baza căruia se filtrează istoricul. Dacă îl lași ca șir gol, se va returna istoricul complet, nefilitrat.

Un alt parametru util este `startTime`, care filtrează rezultatele istoricului în funcție de timp. De exemplu, dacă oferi o valoare de începere de o săptămână, se va prelua doar istoricul din săptămâna trecută. Acest parametru este opțional și implicit, preia ultimele 24 de ore.

Pentru a returna rezultatele, API-ul oferă o funcție de apel invers, care primește rezultatele sub formă de matrice. Poți parcurge această matrice și crea o listă cu elementele din ea.

for (const result of results) {
    let liItem = document.createElement("li")
    let link = document.createElement("a")
    link.innerText = result.title
    link.href = result.url
    liItem.appendChild(link)
    document.querySelector(".list").appendChild(liItem)
}

API-ul de istoric Chrome necesită permisiunea „history”, care trebuie definită în fișierul `manifest`.

{
    "manifest_version": 3,
    "name": "History",
    "description": "View Browsing History",
    "version": "0.1",
    "action": {
      "default_popup": "index.html"
    },
    "permissions": [
        "history"
    ]
}

Rularea extensiei

Acesta este cel mai simplu pas pentru a rula o extensie Chrome. Apasă pe cele trei puncte din bara de acțiuni a Chrome și navighează la secțiunea „Gestionați extensiile” din meniul „Extensii”. Poți accesa această pagină și direct, prin adresa `chrome://extensions/`.

Activează modul dezvoltator dacă nu este deja activat.

Apoi, apasă „Încarcă neambalată” și selectează folderul de proiect unde ai creat extensia. În acest fel, vei vedea extensia în listă.

Pentru a rula extensia, mergi în bara de acțiuni Chrome și apasă pe pictograma extensiei.

Gata! Ai creat prima ta extensie Chrome. Pentru mai multe exemple, poți consulta Exemplele de extensii Chrome din depozitul oficial Google Chrome.

Dacă dorești să publici extensia ta Chrome în magazinul web Chrome, poți urma acești pași și vei plăti o taxă unică pentru a înregistra extensia în magazin.

Concluzii

Crearea unei extensii Chrome este un proces simplu dacă stăpânești elementele de bază ale aplicațiilor web. Trebuie doar să creezi un fișier manifest, iar aplicația ta se transformă într-o extensie.

Acum că știi cum să creezi o extensie Chrome, poți arunca o privire la cele mai utile extensii Chrome pentru dezvoltatori.