Czy kiedykolwiek byłeś niezadowolony z funkcji Twojej przeglądarki internetowej? Nawet po wielu godzinach przeszukiwania Google Web Store za pasem nie zawsze wystarczy kliknąć „pobierz”, aby poprawić wrażenia z surfowania po Internecie.

Tutaj wkraczają rozszerzenia przeglądarki. W tym artykule przyjrzymy się procesowi tworzenia od podstaw własnego rozszerzenia do przeglądarki Google Chrome.

Co to jest rozszerzenie Google Chrome?

Nowoczesny przeglądarki internetowe, takie jak Google Chrome są wyposażone w szereg funkcji, które sprawiają, że są łatwe w użyciu i spełniają potrzeby większości użytkowników. Rozszerzenie tych funkcji może jednak przynieść wiele różnych korzyści. Dlatego twórcy przeglądarek zwykle umożliwiają tworzenie dla nich rozszerzeń, dodatków i wtyczek.

Google Chrome oferuje tę funkcję, ułatwiając każdemu, kto ma doświadczenie w tworzeniu stron internetowych, tworzenie własnych rozszerzeń Chrome. Możesz utworzyć rozszerzenie za pomocą HTML, JavaScript i CSS, tak jak wiele innych witryn.

instagram viewer

W przeciwieństwie do strony internetowej rozszerzenia mogą działać w tle podczas przeglądania, czasami nawet wchodząc w interakcję z odwiedzanymi witrynami.

Co zrobi nasze rozszerzenie Google Chrome?

Zamierzamy zbudować proste rozszerzenie do Chrome, które pozwoli Ci odwiedzić witrynę Make Use Of i przeprowadzić losowe wyszukiwanie na podstawie kategorii artykułów znalezionych w witrynie. To szybki i łatwy projekt, ale i tak wiele się nauczysz.

Nauczysz się, jak to zrobić

  • Utwórz rozszerzenie Google Chrome
  • Wstaw niestandardowy kod na stronach internetowych za pomocą rozszerzenia Chrome
  • Twórz detektory zdarzeń i symuluj kliknięcia
  • Generuj liczby losowe
  • Praca z tablicami i zmiennymi

Tworzenie własnego rozszerzenia DIY do Chrome

Google sprawiło, że tworzenie własnego jest zaskakująco łatwe Rozszerzenia Chrome, więc nie potrwa długo, zanim coś będzie działać. Wykonanie poniższych kroków zajmie tylko 10 do 15 minut, ale zachęcamy do eksperymentowania również z własnym kodem.

Krok 1: Tworzenie plików

Możesz przechowywać swoje rozszerzenie na własnym komputerze lokalnym, gdy nie planujesz go rozpowszechniać. Musimy tylko stworzyć cztery różne pliki, aby stworzyć nasze rozszerzenie; plik HTML, plik CSS, plik JavaScript i plik JSON.

Nasze pliki nazwaliśmy index.html, style.css, script.js i manifest.json. Plik manifestu musi mieć tę nazwę, aby działał poprawnie, ale możesz nadać innym dowolne nazwy, o ile odpowiednio zmienisz swój kod.

Powinieneś umieścić te pliki w tym samym folderze głównym.

Krok 2: Tworzenie pliku manifestu

Plik manifestu jest dostarczany z każdym rozszerzeniem Google Chrome. Dostarcza informacji o rozszerzeniu do Chrome, jednocześnie wprowadzając kilka podstawowych ustawień. Ten plik musi zawierać nazwę, numer wersji, opis i wersję manifestu. Zawarliśmy również uprawnienia i akcję, która się ładuje index.html jako wyskakujące okienko, które pojawia się dla rozszerzenia.

{
"nazwać": "Zautomatyzowane wyszukiwanie MakeUseOf.com",
"wersja": "1.0.0",
"opis": "Wyszukiwarka do znajdowania interesujących artykułów",
"wersja_manifestu": 3,
"autor": "Samuel Garbett",
"uprawnienia": ["składowanie", "deklaratywnaTreść", "aktywna karta", "skrypty"],
"host_permissions": [""],
"akcja":{
"default_popup": "index.html",
"domyślny_tytuł": "Automatyczne wyszukiwanie MUO"
 }
}

Krok 3: Budowanie HTML i CSS

Zanim zaczniemy pisać nasz skrypt, musimy stworzyć podstawowy interfejs użytkownika za pomocą HTML i CSS. Możesz użyć Biblioteka CSS, taka jak Bootstrap aby uniknąć tworzenia własnych, ale potrzebujemy tylko kilku zasad dla naszego rozszerzenia.

Nasz plik index.html zawiera tagi html, head i body. Tag head zawiera tytuł strony i link do naszego arkusza stylów, podczas gdy w treści znajduje się tag h1, a przycisk, który przeniesie Cię do MakeUseOf.com i inny przycisk, którego będziemy używać jako wyzwalacza dla scenariusz. Znacznik skryptu na końcu dokumentu zawiera skrypt.js plik.

<html>
<głowa>
<tytuł>Automatyczne wyszukiwanie MUO</title>
<zestaw znaków meta="utf-8">
<link rel="arkusz stylów" href="styl.css">
</head>
<ciało>
<h1>Automatyczne wyszukiwanie MUO</h1>
<a href="https://www.makeuseof.com/" cel="_pusty"><identyfikator przycisku="buttonOne">Przejdź do MakeUseOf.com</button></a>
<identyfikator przycisku="przycisk dwa">Rozpocznij wyszukiwanie losowe</button>
</body>
<źródło skryptu="skrypt.js"></script>
</html>

Nasz plik CSS jest jeszcze prostszy niż nasz HTML, zmieniając styl zaledwie pięciu elementów. Mamy reguły dla naszych tagów html i body, a także dla tagów h1 i obu naszych przycisków.

html {
 szerokość: 400px;
}
ciało {
 rodzina czcionek: Helvetica, bezszeryfowa;
}
h1 {
 wyrównanie tekstu: środek;
}
#przyciskJeden {
 promień obramowania: 0px;
 szerokość: 100%;
 dopełnienie: 10px 0px;
}
#przyciskDwa {
 promień obramowania: 0px;
 szerokość: 100%;
 dopełnienie: 10px 0px;
 margines górny: 10px;
}

Krok 4: Budowanie JavaScript

Ostatnim krokiem w tym procesie jest zbudowanie naszego pliku script.js.

Pierwsza funkcja w tym pliku, zwana wstaw skrypt(), jest w miejscu, aby wstawić inną funkcję (Wyszukiwanie automatyczne()) na bieżącą stronę. Pozwala nam to manipulować stroną i korzystać z funkcji wyszukiwania, które są już obecne w witrynie MakeUseOf.com.

Po tym następuje detektor zdarzeń, który czeka na kliknięcie przycisku Rozpocznij wyszukiwanie losowe przed wywołaniem funkcji, którą zbadaliśmy powyżej.

ten Wyszukiwanie automatyczne() funkcja jest trochę bardziej skomplikowana. Zaczyna się od tablicy zawierającej 20 kategorii na stronie MUO, co daje nam dobrą próbkę, z której możemy czerpać losowe wyszukiwania. Następnie używamy Matematyka.losowy() funkcja generująca losową liczbę od 0 do 19 w celu wybrania wpisu z naszej tablicy.

Mając w ręku nasze wyszukiwane hasło, musimy teraz zasymulować kliknięcie przycisku, aby otworzyć pasek wyszukiwania MUO. Najpierw używamy konsoli programisty Chrome, aby znaleźć identyfikator przycisku wyszukiwania, a następnie dodajemy go do naszego kodu JavaScript za pomocą Kliknij() funkcjonować.

Podobnie jak przycisk wyszukiwania, musimy również znaleźć identyfikator wyświetlonego paska wyszukiwania, co umożliwi nam wstawienie wybranego przez nas losowego hasła wyszukiwania. Po zakończeniu wystarczy przesłać formularz, aby rozpocząć wyszukiwanie.

// Ta funkcja wstawia naszą funkcję automatycznego wyszukiwania do kodu strony
funkcjonowaćwstaw skrypt() {
// To wybiera wybraną kartę dla operacji i przekazuje funkcję automatycznego wyszukiwania
 chrome.tabs.query({aktywny: PRAWDA, obecne okno: PRAWDA}, tabulatory => {
chrom.skrypty.executeScript({cel: {tabId: tabulatory[0].ID}, funkcjonować: Wyszukiwanie automatyczne})
 })
// To zamyka wyskakujące okienko rozszerzenia, aby wybrać pasek wyszukiwania witryny
okno.blisko();
}


// To jest detektor zdarzeń, który wykrywa kliknięcia naszego „Początek Losowy Szukaj" przycisk
document.getElementById('przycisk dwa').addEventListener('Kliknij', wstaw skrypt)


// Ta funkcja wybiera losowy temat z tablicy i 
funkcjonowaćWyszukiwanie automatyczne() {
// To jest tablica do przechowywania naszych wyszukiwanych haseł
 const searchTerms = ["Komputery PC i urządzenia mobilne", "Styl życia", "Sprzęt komputerowy", "Okna", "Prochowiec",
"Linux", "Android", "Jabłko", "Internet", "Bezpieczeństwo",
"Programowanie", "Zabawa", "Wydajność", "Kariera", "Twórczy",
"Hazard", "Media społecznościowe", "Inteligentny dom", "majsterkowanie", "Recenzja"];


// To generuje losową liczbę od 0 do 19
pozwalać SelectorNumber = Matematyka.piętro(Matematyka.losowy() * 20);


// Używa losowej liczby do wybrania wpisu z tablicy
pozwalać zaznaczenie = searchTerms[numerWyboru];


// Symuluje to kliknięcie ikony wyszukiwania w witrynie MUO
 document.getElementById("js-search").Kliknij();


// To ustawia pasek wyszukiwania witryny MUO jako zmienną
var SearchBar = dokument.getElementById("js-search-input");


// To wstawia nasz losowy termin wyszukiwania do paska wyszukiwania
 searchBar.value = searchBar.value + zaznaczenie;
// To kończy proces poprzez aktywację formularza na stronie
 document.getElementById("formularz wyszukiwania2").Zatwierdź();
}

Krok 5: dodawanie plików do Chrome://rozszerzenia

Następnie nadszedł czas, aby dodać właśnie utworzone pliki do strony rozszerzeń Chrome. Gdy to zrobisz, rozszerzenie będzie dostępne w Chrome i będzie aktualizować się za każdym razem, gdy wprowadzisz zmiany w plikach.

Otwórz Google Chrome, przejdź do chrome://extensions i upewnij się, że suwak trybu programisty w prawym górnym rogu jest w pozycji włączonej.

Kliknij Załaduj rozpakowany w lewym górnym rogu, a następnie wybierz folder, w którym zapisałeś pliki rozszerzeń i kliknij Wybierz katalog.

Po załadowaniu rozszerzenia możesz kliknąć ikonę puzzli w prawym górnym rogu i przypiąć rozszerzenie do głównego paska zadań, aby uzyskać łatwiejszy dostęp.

Powinieneś teraz mieć dostęp do ukończonego rozszerzenia w przeglądarce. Warto pamiętać, że to rozszerzenie będzie działać tylko w witrynie MUO lub witrynach z tym samym identyfikatorem przycisku wyszukiwania i paska.

Tworzenie rozszerzenia Google Chrome

Ten artykuł tylko zarysowuje powierzchnię możliwych funkcji, które możesz wbudować we własne rozszerzenie Google Chrome. Po zapoznaniu się z podstawami warto zbadać własne pomysły.

Rozszerzenia do Chrome mogą pomóc Ci zwiększyć poziom przeglądania, ale staraj się trzymać z dala od niektórych znanych podejrzanych rozszerzeń Chrome, aby zapewnić bezpieczne przeglądanie.

6 podejrzanych rozszerzeń Google Chrome, które należy odinstalować jak najszybciej

Czytaj dalej

UdziałĆwierkaćUdziałE-mail

Powiązane tematy

  • Programowanie
  • Rozszerzenia przeglądarki
  • Tworzenie stron internetowych
  • JavaScript

O autorze

Samuel L. Garbett (44 opublikowane artykuły)

Samuel jest pisarzem technologicznym z Wielkiej Brytanii z pasją do wszystkiego, co DIY. Rozpoczynając działalność w dziedzinie tworzenia stron internetowych i druku 3D, a także pracując przez wiele lat jako pisarz, Samuel oferuje wyjątkowy wgląd w świat technologii. Koncentrując się głównie na projektach DIY technologicznych, uwielbia dzielić się zabawnymi i ekscytującymi pomysłami, które możesz wypróbować w domu. Poza pracą Samuela można zwykle spotkać na rowerze, grając w gry komputerowe lub desperacko próbując komunikować się ze swoim krabem.

Więcej od Samuela L. Garbett

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować