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

de
Tweet
Share
Share
Pin

Extensiile de browser nu sunt altceva decât pluginuri care îmbunătățesc funcționalitatea browserului. Cu alte cuvinte, adaugă mai multe funcții la funcționalitatea de bază a browserului.

Dar cum este o extensie mai utilă decât o aplicație web? Ei bine, pentru că o extensie poate accesa toate API-urile browserului, ceea ce vă oferă mai mult control asupra browserului.

Cu ajutorul unei extensii, puteți:

✅ Personalizați interfața de utilizator a browserului și a filelor.

✅ Adăugați noi comenzi rapide pentru acțiunile browserului.

✅ Monitorizați îndeaproape browser-ul și web-ul.

Google Chrome are, de asemenea, un magazin web pe care vă puteți găzdui extensiile Chrome pe care să le folosească oricine. Ai putea crede că construirea unei extensii Chrome este o sarcină descurajantă, dar, în realitate, este doar HTML, CSS și JavaScript.

Da, puteți crea o extensie Chrome folosind tehnologii web simple, cum ar fi JavaScript, și iată un tutorial despre aceeași!

Crearea unei extensii Chrome

În acest tutorial, veți învăța cum să creați o extensie Chrome care analizează istoricul browserului și vi-l prezintă printr-o fereastră pop-up.

Fișiere obligatorii

Singurul fișier necesar pentru construirea unei extensii Chrome este fișierul manifest.json. Rest tot ceea ce codificați este identic cu construirea unei aplicații web.

Crearea fișierului Manifest.json

Acest fișier specific definește configurația și funcționalitățile extensiei. Iată un exemplu despre 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 la momentul scrierii este v3, care, conform Chromeintroduce îmbunătățiri pentru securitatea, confidențialitatea și performanța extensiilor și permite extensiilor să utilizeze tehnologii web deschise, cum ar fi lucrătorii de servicii și promisiunile.

  Cache Killer vă șterge memoria cache de fiecare dată înainte de a încărca o pagină web [Chrome]

De asemenea, puteți vedea o proprietate de acțiune în fișierul manifest. Acesta definește ce fișier HTML doriți să deschideți în fereastra pop-up atunci când utilizatorul face clic pe pictograma extensiei. Există, de asemenea, o proprietate default_icon care vă permite să definiți pictograma implicită de extensie care va fi afișată.

Construirea aplicației

Este timpul să construiți aplicația, care va fi afișată utilizatorului final ca un pop-up. Nu are nimic de-a face cu extensiile. Mai degrabă, este o aplicație web normală.

Mai întâi, trebuie să creați un fișier de intrare pe care îl puteți lista în proprietatea default_popup a manifestului. Am creat index.html ca punct de intrare pentru această 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 legat o foaie de stil pentru a stila pagina pentru a arăta bine într-o fereastră pop-up. În afară de asta, există și un fișier javascript legat pentru a gestiona funcționalitatea 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()
})

Ceea ce face acest fișier este că folosește API-ul istoric al Chrome pentru a interoga istoricul browserului și pentru a-l afișa în fereastra pop-up. Când utilizatorul face clic pe pictograma extensiei, evenimentul DOMContentLoaded va fi declanșat și va apela funcția searchHistory, care conține codul real.

Metoda de căutare din API-ul istoric acceptă un text de parametru obligatoriu, care este textul de căutare pe baza căruia doriți să filtrați istoricul. Dacă îl lăsați ca șir gol, atunci istoricul va fi returnat fără filtre.

  Cum să verificați dacă Chromecastul dvs. încă primește actualizări

Un alt parametru util este parametrul startTime. Filtrează rezultatele istoricului în funcție de timpul scurs de la ora de începere. De exemplu, dacă dați o oră de începere de o săptămână, atunci va prelua doar istoricul săptămânii trecute. Este un parametru opțional și este implicit pentru ultimele 24 de ore.

Pentru a prelua rezultatele, API-ul oferă o funcție de apel invers care conține rezultatele într-o matrice. Puteți trece peste matrice și puteți face o listă 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)
}

Acum, API-ul istoric din Chrome necesită permisiunea „istoric”, care trebuie definită în fișierul nostru 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 crea și a executa o extensie Chrome. Faceți clic pe punctele de suspensie din bara de acțiuni a Chrome și accesați Gestionați extensiile sub Extensii. De asemenea, puteți accesa acest link chrome://extensions/ direct.

Activați modul dezvoltator dacă nu este activat.

Apoi, faceți clic pe Încărcare dezambalată și apoi selectați folderul de proiect în care tocmai ați creat extensia. Procedând astfel, veți putea vedea extensia în listă.

Pentru a executa extensia, accesați bara de acțiuni Chrome și faceți clic pe extensia dvs. pentru listă.

Asta este; tocmai ai creat o extensie Chrome simplă. Dacă doriți mai multe exemple, puteți verifica mai multe Exemple de extensii Chrome în depozitul oficial Google Chrome.

Dacă doriți să publicați extensia dvs. Chrome în magazinul web Chrome, puteți urmați acești pași și plătiți o taxă unică pentru a vă înregistra extensia în magazin.

  Cum să creezi fișierul HAR din Google Chrome, Firefox și să îl analizezi?

Cuvinte finale

Crearea unei extensii Chrome este foarte ușoară dacă cunoașteți elementele de bază ale oricărei aplicații web. Este doar o chestiune de a crea un fișier manifest, iar aplicația dvs. este convertită într-o extensie.

Acum că știți cum să creați o extensie Chrome, consultați cele mai bune extensii Chrome pentru a ajuta dezvoltatorii.