Cum să-ți creezi propria extensie Chrome

Ce se întâmplă dacă ai putea profita la maximum de navigarea ta? Aflați cum să vă creați propriile extensii Google Chrome.

Ați fost vreodată nemulțumit de funcțiile oferite de browserul dvs. web? Chiar dacă ați petrecut ore întregi explorând Magazinul online Google, nu este întotdeauna la fel de simplu ca să apăsați „descărcați” pentru a vă îmbunătăți experiența de navigare pe web.

Aici intră în joc suplimentele de browser. În acest tutorial, vom vedea cum să vă creați propria extensie Google Chrome DIY de la zero.

Ce este o extensie Google Chrome?

Browserele moderne, cum ar fi Google Chrome, includ o multitudine de capabilități care le fac simplu de utilizat și capabile să răspundă cerințelor majorității utilizatorilor. Cu toate acestea, extinderea acestor caracteristici de bază poate avea o varietate de avantaje. Acesta este motivul pentru care producătorii de browsere permit în mod normal crearea de extensii, suplimente și pluginuri pentru ele.

Această capacitate este disponibilă în Google Chrome, permițând oricui cu cunoștințe de programare web să-și construiască cu ușurință propriile extensii Chrome. La fel ca multe site-uri web, puteți crea o extensie cu HTML, JavaScript și CSS.

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

Ce funcții va oferi extensia noastră Google Chrome?

Vom crea o extensie Chrome de bază care vă va permite să vizitați site-ul web Make Use Of și să efectuați o căutare aleatorie pe baza categoriilor de articole disponibile acolo. Deși acesta este un proiect simplu, veți învăța multe.

Veți descoperi cum se face

• Dezvoltați o extensie Google Chrome
• Folosind o extensie Chrome, inserați cod personalizat în paginile web.
• Simulați clicurile creând ascultători de evenimente.
• Produceți numere aleatorii
• Utilizați tablouri și variabile.

Creați-vă propria extensie pentru Chrome DIY

Google a făcut uimitor de simplu să vă dezvoltați propriile extensii Chrome, astfel încât veți fi în funcțiune în cel mai scurt timp. Instrucțiunile de mai jos vor dura doar 10 până la 15 minute, dar vă invităm să experimentați și cu propriul cod.

Pasul 1: Creați fișierele

Când nu doriți să partajați extensia dvs., o puteți păstra în sistemul local. Pentru a construi extensia noastră, avem nevoie pur și simplu de patru fișiere: o pagină HTML, un fișier CSS, un fișier JavaScript și un fișier JSON.

Index.html, style.css, script.js și manifest.json au fost numele pe care le-am dat fișierelor noastre. Fișierul manifest trebuie să aibă acest nume pentru a funcționa corect, dar celelalte pot avea orice nume alegeți, atâta timp cât vă modificați codul în consecință.

Aceste fișiere ar trebui să fie plasate în același folder rădăcină.

Pasul 2: Creați fișierul manifest

Fiecare extensie Google Chrome include un fișier manifest. Acesta informează Chrome despre extensie, implementând și unele setări de bază. Un nume, un număr de versiune, o descriere și o versiune a manifestului trebuie incluse în acest fișier. Am oferit, de asemenea, permisiuni și o acțiune care încarcă index.html ca fereastră pop-up a extensiei.

 { "name": "MakeUseOf.com Automated Search", "version": "1.0.0", "description": "A search tool to find interesting articles", "manifest_version": 3, "author": "Samuel Garbett", "permissions": ["storage", "declarativeContent", "activeTab", "scripting"], "host_permissions": [""], "action":{ "default_popup": "index.html", "default_title": "MUO Auto Search" } }

Pasul 3: Creați HTML și CSS

Înainte de a începe să ne codăm scriptul, trebuie mai întâi să proiectăm o interfață de utilizator simplă (UI) folosind HTML și CSS. Puteți folosi o bibliotecă CSS precum Bootstrap pentru a evita să scrieți propria dvs., dar suplimentul nostru necesită doar câteva reguli.

Etichetele HTML, head și body sunt toate prezente în fișierul nostru index.html. Eticheta head are titlul paginii și un link către foaia noastră de stil, în timp ce corpul conține o etichetă h1, un link către MakeUseOf.com și un alt buton care va fi folosit ca declanșator pentru un script. Fișierul script.js este inclus într-o etichetă de script la sfârșitul documentului.

 <html> <head> <title>MUO Auto Search</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>MUO Auto Search</h1> <a href="https://www.makeuseof.com/" target="_blank"><button>Go to MakeUseOf.com</button></a> <button>Start Random Search</button> </body> <script src="script.js"></script> </html>

Fișierul nostru CSS este chiar mai simplu decât fișierul nostru HTML, deoarece schimbă doar stilul a cinci componente. Avem instrucțiuni pentru etichetele html și body, precum și pentru etichetele h1 și ambele butoane.

 html { width: 400px; } body { font-family: Helvetica, sans-serif; } h1 { text-align: center; } #buttonOne { border-radius: 0px; width: 100%; padding: 10px 0px; } #buttonTwo { border-radius: 0px; width: 100%; padding: 10px 0px; margin-top: 10px; }

Pasul 4: Creați JavaScript

Pasul final al acestei proceduri este crearea fișierului nostru script.js.

Funcția insertScript() din acest fișier este folosită pentru a insera cealaltă funcție ( autoSearch() ) în pagina curentă. Acest lucru ne permite să edităm pagina și să folosim opțiunile de căutare disponibile în prezent pe site-ul MakeUseOf.com.

Acesta este urmat de un ascultător de evenimente care așteaptă până când butonul Start Random Search este apăsat înainte de a rula funcția discutată anterior.

Metoda autoSearch() este puțin mai complicată. Începe cu o matrice care conține 20 dintre categoriile site-ului web MUO, oferindu-ne un eșantion decent de care să extragem pentru a efectua căutări aleatorii. După aceea, folosim funcția Math.random() pentru a produce un număr întreg aleatoriu între 0 și 19 pentru a alege un element din tabloul nostru.

Acum trebuie să imităm un clic pe buton pentru a deschide caseta de căutare MUO cu cuvântul nostru de căutare în mână. Mai întâi folosim consola pentru dezvoltatori Chrome pentru a obține ID-ul butonului de căutare, pe care apoi îl adăugăm la codul nostru JavaScript folosind metoda click() .

 // This method incorporates our autoSearch functionality into the page's code function insertScript() { // This chooses the operation's focused tab and invokes the autoSearch function chrome.tabs.query({active: true, currentWindow: true}, tabs => { chrome.scripting.executeScript({target: {tabId: tabs[0].id}, function: autoSearch}) }) // This closes the extension pop-up window that allows you to pick the website search bar window.close(); } // This is an event listener that detects when our "Start Random Search" button is clicked document.getElementById('buttonTwo').addEventListener('click', insertScript) // This code chooses a topic at random from an array and function autoSearch() { // This is an array in which we will store our search keywords const searchTerms = ["PC and Mobile", "Lifestyle", "Hardware", "Windows", "Mac", "Linux", "Android", "Apple", "Internet", "Security", "Programming", "Entertainment", "Productivity", "Career", "Creative", "Gaming", "Social Media", "Smart Home", "DIY", "Review"]; // This creates a number between 0 and 19 at random let selectorNumber = Math.floor(Math.random() * 20); // The random number is used to choose an element from the array let selection = searchTerms[selectorNumber]; // This mimics clicking on the MUO website search button document.getElementById("js-search").click(); // This variables the MUO website search bar var searchBar = document.getElementById("js-search-input"); // This enters our arbitrary search query into the search field searchBar.value = searchBar.value + selection; // The process is completed by activating the online form document.getElementById("searchform2").submit(); }

Pasul 5: Încărcarea fișierelor în Chrome:/extensii

Fișierele pe care tocmai le-ați produs ar trebui să fie acum adăugate la pagina cu extensii Chrome. După aceea, extensia va fi disponibilă în Chrome și se va actualiza automat oricând modificați fișierele.

Deschideți Google Chrome, navigați la chrome:/extensions și asigurați-vă că glisorul Mod dezvoltator din colțul din dreapta sus este activat.

Faceți clic pe Încărcare dezambalată în colțul din stânga sus, apoi selectați folderul care conține fișierele de extensie și faceți clic pe Selectați folderul .

Odată ce extensia dvs. a fost încărcată, faceți clic pe pictograma piesei puzzle din colțul din dreapta sus pentru a o fixa în bara de activități principală pentru un acces mai rapid.

Acum ar trebui să puteți vedea extensia finalizată în browser. Este important de reținut că această extensie va funcționa numai pe site-ul web MUO sau pe site-urile web care folosesc același ID pentru butonul și bara de căutare.

Crearea unei extensii Google Chrome

Această postare atinge doar suprafața funcționalităților pe care le puteți încorpora în propria extensie Google Chrome. Odată ce ați stăpânit elementele fundamentale, merită cu siguranță timpul pentru a experimenta propriile idei.

Extensiile Chrome vă pot ajuta să vă îmbunătățiți experiența de navigare, dar evitați unele dintre cunoscutele extensii Chrome incomplete pentru o experiență online sigură și securizată.