W tym artykule dowiesz się, jak samodzielnie stworzyć własne rozszerzenie do przeglądarki Chrome. Rozszerzenia są niesamowicie pomocne, zwłaszcza jeśli mamy określone zadanie podczas przeglądania stron. Załóżmy, że potrzebujemy zrobić wtyczkę, która zlicza nam wszystkie nagłówki H1, H2, H3, zdjęcia, paragrafy itp. w celu analizy SEO.
Dzisiaj opiszę tworzenie zwykłej, najprostszej wtyczki do Chrome, która jedynie ma wyświetlać popup, jednak dla bardziej ciekawskich przygotowałem gotową wtyczkę do zliczania nagłówków, paragrafów i zdjęć, zachęcam do pobrania i przeglądnięcia plików rozszerzenia (na końcu artykułu). Wtedy wystarczy włączyć rozszerzenie w przeglądarce i już! Tak więc, zapraszam do lektury.
Właściwie, aby utworzyć rozszerzenie do chrome, musimy mieć tylko wiedzę na temat tworzenia frontendu – HTML, CSS i Javascript. W zależności, co rozszerzenie będzie musiało wykonywać. No i oczywiście dobrze zainstalować jakiś edytor, np. Visual Studio Code, który jest bardzo prosty i intuicyjny.
Pliki możemy odpowiednio posegregować według działania. Są pliki działające w witrynie (content), działające w tle przeglądarki (background) oraz te działające po kliknięciu w ikonę rozszerzenia (popup).
Na tym obrazku możemy zobaczyć jak działa komunikacja między poszczególnymi elementami – popup, content i background.
Pliki, które będziemy potrzebowali do stworzenia zwykłej wtyczki, są uzależnione od funkcjonalności, jakie chcemy wdrożyć w rozszerzeniu. W tym artykule będę opisywał uproszczone tworzenie wtyczki, która będzie wyświetlała jedynie popup, a na końcu artykułu będzie wspomniany .zip z wtyczką do zliczania nagłówków.
Do stworzenia wtyczki, potrzebujemy utworzyć folder, a w nim takie pliki jak manifest.json, content.js oraz popup.html – opiszę je w następnych rozdziałach. Aby dodać rozszerzenie do przeglądarki, przechodzimy pod adres chrome://extensions
Pojawi nam się okienko z rozszerzeniami:
Aby dodać rozszerzenie, musimy włączyć Tryb dewelopera. Zrobimy to klikając w przełącznik u góry po prawej stronie. Pojawią nam się dodatkowe opcje, dla nas ważna jest „Załaduj rozpakowane”. Klikając w ten przycisk, zaznaczamy folder z rozszerzeniem. Wtedy pojawi nam się nasze okienko z rozszerzeniem:
Należy pamiętać, że za każdym razem, gdy wprowadzimy zmianę w plikach wtyczki, musimy kliknąć przycisk odświeżenia, aby ponownie załadować je przeglądarki. Znajduje się on tuż obok przycisku włączania/wyłączania rozszerzenia (obrazek wyżej).
A więc zaczynamy tworzyć rozszerzenie – przejdźmy do pierwszego pliku – manifest.json
Tak mniej więcej będzie wyglądać Twój kod manifest.json:
{
"manifest_version": 2,
"name": "Moja pierwsza wtyczka",
"description":"To jest moje pierwsze rozszerzenie do przeglądarki Google Chrome.",
"version": "1.0",
"browser_action": {
"default_popup": "popup.html",
"default_title": "Example"
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content.js"]
}]
}Spokojnie, już tłumaczę co, za co odpowiada. Na samym początku wersja manifestu – zalecana jak na razie wersja druga, choć w styczniu 2023 roku mają być prowadzone poważne testy wersji BETA w wersji trzeciej (co przy okazji przekłada się na zmianę w działaniu wtyczki typu adblock), a w czerwcu już wprowadzona ma być do działania. Ale i tak możemy używać tej wersji. Jednak zalecam pozostanie jak na razie przy wersji 2.
Name odpowiada oczywiście nazwie naszego rozszerzenia.
Description, to opis, który nie jest obowiązkowy.
Version, jak łatwo się domyśleć odpowiada za wersję wtyczki.
Browser action dodaje nam możliwość załadowania popupu po kliknięciu w przycisk ikony naszego rozszerzenia. To znaczy, że gdy na jakiejś stronie WWW klikniemy w ikonę rozszerzenia, wtedy ukaże nam się właśnie popup.html
Teraz przechodzimy to istotniejszych elementów: content_scripts – ważnym jest, aby dobrze zapisać go w manifescie, ma to być tablica, a w środku obiekt. Tak jak na wzór wyżej. Możemy tam dodać również style. W pozycji „js” dodajemy nasz plik content.js z kodem skryptowym dotyczącym strony bieżącej.
W content.js w zasadzie na razie nic nie dajemy, prócz console.log, gdyż nie będziemy ingerować w działanie wyświetlanej strony. Za to w pliku .zip do pobrania jest więcej kodu, który możesz przejrzeć i przeanalizować.
Tutaj znajdziemy prosty kod HTML, który będzie tak jakby „iframem” na stronie, gdzie włączamy wtyczkę. Możemy tam umieścić co chcemy, każdy kod HTML, nawet stronę WWW. W tym poradniku damy zwykły kod w postaci lokalizacji Stadionu Narodowego.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1219008.2877412555!2d18.66752209389687!3d53.363381905882974!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471ecc53aadd5a5b%3A0x6243befa18b5188b!2sPGE%20Narodowy!5e0!3m2!1spl!2spl!4v1664911358253!5m2!1spl!2spl" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</body>
</html>Oczywiście możemy dodać w nim wszystko inne, np. formularz, czy tekst statyczny.
Mamy to! Pierwsze rozszerzenie do Google Chrome gotowe! Tak właśnie prezentuje nam się nasze rozszerzenie w Google Chrome:
Dodatkowo po włączeniu konsoli, możemy zobaczyć frazę „hello world”, czyli kod z pliku content.js (w nim znajdował się fragment console.log(’hello world’) co zostało wykonane na stronie.
Chrome API to potężne rozszerzenie, dzięki któremu możemy komunikować się między stopniami background, content i popup. Warto przejrzeć chociaż część dokumentacji na temat Chrome API do rozszerzeń. W prosty sposób możemy manipulować zawartością strony za pomocą np. popup.
Zachęcam do przejrzenia kodu „Szperacza” – jest to bardzo proste rozszerzenie, które ma na celu pomóc w zrozumieniu Chrome API i komunikacji między tymi stopniami. Do pobrania pod tym linkiem.
Sprawdź nasze inne wpisy
Spis treści Ile kosztuje strona internetowa w agencji interaktywnej / marketingowej w 2024 roku? Widełki cenowe w przybliżeniu na rok 2024: Krótki wstęp o stronach WWW Uświadom sobie, co tak […]
Spis treści Wyzwania Rozwiązania Aktualizacja – Generatory Podsumowanie i wyniki EternalCrystals.pl to ekskluzywny sklep internetowy, który oferuje szeroki wybór kamieni ezoterycznych, w tym ametystu, kwarcu różowego, cytrynu i wielu innych. […]
Spis treści Dobre prowadzenie Social Mediów – Facebook i Instagram Reklama w Social Mediach – sposób na zapchany kalendarz Strona Internetowa Dobre prowadzenie marki Wizytówka w Google Maps Ogłaszanie się […]