Cum să vă creați propria extensie Google Chrome

Te-ai trezit vreodată nemulțumit de funcțiile care vin cu browserul tău web? Chiar și cu ore în care ați căutat în Magazinul web Google, nu este întotdeauna o chestiune simplă să apăsați pe „descărcare” pentru a vă îmbunătăți experiența de navigare pe web.

Aici intervin extensiile de browser. În acest articol, vom explora procesul de construire a propriei extensii DIY Google Chrome de la zero.

Ce este o extensie Google Chrome?

Modern browsere web precum Google Chrome vin cu o serie de caracteristici care le fac ușor de utilizat și capabile să răspundă nevoilor majorității utilizatorilor. Extinderea acestor funcții de stoc poate veni cu o mulțime de beneficii diferite, totuși. Acesta este motivul pentru care dezvoltatorii de browser fac de obicei posibilă crearea de extensii, suplimente și pluginuri pentru ei.

Google Chrome oferă această funcție, făcându-i ușor pentru oricine cu experiență în dezvoltare web să-și creeze propriile extensii Chrome. Puteți crea o extensie folosind HTML, JavaScript și CSS, la fel ca multe site-uri web.

Spre deosebire de un site web, extensiile pot rula în fundal în timp ce navigați, uneori chiar interacționând cu site-urile pe care le vizitați.

Ce va face extensia noastră Google Chrome?

Vom construi o extensie Chrome simplă care vă va permite să vizitați site-ul Make Use Of și să faceți o căutare aleatorie pe baza categoriilor de articole găsite pe site. Acesta este un proiect rapid și ușor, dar veți învăța încă multe.

Vei învăța cum

• Creați o extensie Google Chrome
• Inserați cod personalizat în paginile web folosind o extensie Chrome
• Creați ascultători de evenimente și simulați clicuri
• Generați numere aleatorii
• Lucrați cu matrice și variabile

Construiește-ți propria extensie Chrome DIY

Google a făcut surprinzător de ușor să creați propria dvs Extensii Chrome, așa că nu va dura mult până când ceva funcționează. Urmând pașii de mai jos va dura doar 10 până la 15 minute, dar vă încurajăm să experimentați și cu propriul cod.

Pasul 1: Crearea fișierelor

Vă puteți stoca extensia pe propria mașină locală atunci când nu intenționați să o distribuiți. Trebuie doar să creăm patru fișiere diferite pentru a ne crea extensia; un fișier HTML, un fișier CSS, un fișier JavaScript și un fișier JSON.

Am numit fișierele noastre index.html, style.css, script.js și manifest.json. Fișierul manifest trebuie să aibă acest nume pentru a funcționa corect, dar le puteți da celorlalți orice nume doriți, atâta timp cât vă modificați codul în consecință.

Ar trebui să plasați aceste fișiere în același folder rădăcină.

Pasul 2: Construirea fișierului manifest

Fișierul manifest vine cu fiecare extensie Google Chrome. Oferă informații despre extensia pentru Chrome, în timp ce pune în aplicare unele setări de bază. Acest fișier trebuie să conțină un nume, un număr de versiune, o descriere și o versiune manifest. Am inclus, de asemenea, permisiuni și o acțiune care se încarcă index.html ca pop-up care apare pentru extensie.

{
"Nume": "Căutare automată MakeUseOf.com",
"versiune": "1.0.0",
"Descriere": "Un instrument de căutare pentru a găsi articole interesante",
"manifest_version": 3,
"autor": "Samuel Garbett",
"permisiuni": ["depozitare", "Conținut declarativ", "activeTab", "scripting"],
"host_permissions": [""],
"acțiune":{
"default_popup": "index.html",
"titlu_default": "Căutare automată MUO"
 }
}

Pasul 3: Construirea HTML și CSS

Înainte de a începe să scriem scriptul, trebuie să creăm o interfață de utilizare de bază folosind HTML și CSS. Puteți folosi a Bibliotecă CSS precum Bootstrap pentru a evita crearea propriei dvs., dar avem nevoie doar de câteva reguli pentru extensia noastră.

Fișierul nostru index.html conține etichete html, head și body. Eticheta head conține un titlu de pagină și un link către foaia noastră de stil, în timp ce corpul găzduiește o etichetă h1, a butonul care vă duce la MakeUseOf.com și un alt buton pe care îl vom folosi ca declanșator pentru a scenariu. O etichetă de script chiar la sfârșitul documentului include script.js fişier.

<html>
<cap>
<titlu>Căutare automată MUO</title>
<meta charset="utf-8">
<link rel="foaia de stil" href="stil.css">
</head>
<corp>
<h1>Căutare automată MUO</h1>
<a href="https://www.makeuseof.com/" tinta="_gol"><butonul id="butonul Unu">Accesați MakeUseOf.com</button></A>
<butonul id="butonul Doi">Începeți căutarea aleatorie</button>
</body>
<script src="script.js"></script>
</html>

Fișierul nostru CSS este chiar mai simplu decât HTML, schimbând stilul a doar cinci elemente. Avem reguli pentru etichetele noastre html și body, precum și pentru etichetele h1 și ambele butoane.

html {
 latime: 400px;
}
corp {
 familie de fonturi: Helvetica, sans-serif;
}
h1 {
 text-align: centru;
}
#buttonOne {
 chenar-rază: 0px;
 latime: 100%;
 umplutură: 10px 0px;
}
#buttonTwo {
 chenar-rază: 0px;
 latime: 100%;
 umplutură: 10px 0px;
 margine-sus: 10px;
}

Pasul 4: Crearea JavaScript

Ca ultim pas al acestui proces, este timpul să construim fișierul script.js.

Prima funcție din acest fișier, numită insertScript(), este la locul lui pentru a introduce cealaltă funcție (căutare automată()) în pagina curentă. Acest lucru ne permite să manipulăm pagina și să folosim funcțiile de căutare care sunt deja prezente pe site-ul MakeUseOf.com.

Acesta este urmat de un ascultător de evenimente care așteaptă până când se face clic pe butonul Start Random Search înainte de a apela funcția pe care am explorat-o mai sus.

The căutare automată() funcția este puțin mai complicată. Începe cu o matrice care conține 20 dintre categoriile de pe site-ul web MUO, oferindu-ne un eșantion bun din care să extragem atunci când facem căutări aleatorii. În continuare, folosim Math.random() funcția de a genera un număr aleator între 0 și 19 pentru a selecta o intrare din tabloul nostru.

Cu termenul nostru de căutare în mână, acum trebuie să simulăm un clic pe buton pentru a deschide bara de căutare MUO. Mai întâi folosim consola pentru dezvoltatori Chrome pentru a găsi ID-ul butonului de căutare, apoi îl adăugăm la codul nostru JavaScript cu clic() funcţie.

La fel ca butonul de căutare, trebuie să găsim și ID-ul barei de căutare care apare, permițându-ne să inserăm termenul de căutare aleatoriu pe care l-am selectat. Cu acest lucru complet, este o simplă chestiune de a trimite formularul pentru a face căutarea noastră.

// Această funcție inserează funcția noastră de căutare automată în codul paginii
funcţieinsertScript() {
// Aceasta selectează fila focalizată pentru operație și trece funcția de căutare automată
 chrome.tabs.query({activ: Adevărat, fereastră curentă: Adevărat}, file => {
crom.scriptare.executeScript({ţintă: {tabId: file[0].id}, funcţie: căutare automată})
 })
// Aceasta închide fereastra de tip pop-up cu extensia pentru a selecta bara de căutare a site-ului web
fereastră.închide();
}
// Acesta este un ascultător de evenimente care detectează clicuri pe "start Aleatoriu Căutarebutonul "
document.getElementById('butonul Doi').addEventListener('clic', insertScript)
// Această funcție selectează un subiect aleatoriu dintr-o matrice și 
funcţiecăutare automată() {
// Aceasta este o matrice pentru a stoca termenii noștri de căutare
 const searchTerms = ["PC și mobil", "Stil de viata", "Hardware", "Windows", "Mac",
"Linux", "Android", "Măr", "Internet", "Securitate",
"Programare", "Divertisment", "Productivitate", "Carieră", "Creativ",
"Jocuri", "Social Media", "Casă inteligentă", "bricolaj", "Revizuire"];
// Aceasta generează un număr aleatoriu între 0 și 19
lăsa selectorNumber = Matematică.podea(Matematică.Aleatoriu() * 20);
// Acesta folosește numărul aleatoriu pentru a selecta o intrare din matrice
lăsa selectie = searchTerms[selectorNumber];
// Aceasta simulează un clic pe pictograma de căutare a site-ului MUO
 document.getElementById("js-search").clic();
// Aceasta setează bara de căutare a site-ului MUO ca variabilă
var searchBar = document.getElementById("js-search-input");
// Aceasta inserează termenul nostru de căutare aleatoriu în bara de căutare
 searchBar.value = searchBar.value + selectie;
// Acest lucru finalizează procesul prin activarea formularului site-ului web
 document.getElementById("formular de căutare2").Trimite();
}

Pasul 5: Adăugarea fișierelor pe Chrome://extensions

Apoi, este timpul să adăugați fișierele pe care tocmai le-ați creat pe pagina cu extensii Chrome. Odată ce ați făcut acest lucru, extensia va fi accesibilă în Chrome și se va actualiza singură ori de câte ori modificați fișierele dvs.

Deschideți Google Chrome, accesați chrome://extensions și asigurați-vă că glisorul Mod dezvoltator din colțul din dreapta sus este în poziția pornit.

Clic Încărcați despachetat în colțul din stânga sus, apoi alegeți folderul în care ați salvat fișierele de extensie și faceți clic Selectați Folder.

Acum că extensia dvs. este încărcată, puteți face clic pe pictograma piesei puzzle din colțul din dreapta sus și puteți fixa extensia în bara de activități principală pentru un acces mai ușor.

Acum ar trebui să puteți accesa extensia finalizată în browser. Merită să rețineți că această extensie va funcționa numai pe site-ul web MUO sau pe site-urile web cu același ID pentru butonul și bara de căutare.

Crearea unei extensii Google Chrome

Acest articol doar zgârie suprafața posibilelor funcții pe care le-ați putea integra în propria extensie Google Chrome. Merită să vă explorați propriile idei odată ce ați învățat elementele de bază.

Extensiile Chrome vă pot ajuta să vă creșteți nivelul de navigare, dar încercați să stați departe de unele dintre extensiile Chrome umbrite cunoscute pentru o navigare sigură și securizată.

6 extensii umbroase Google Chrome pe care ar trebui să le dezinstalați cât mai curând posibil

Citiți în continuare

Despre autor