Spisu treści:
2025 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2025-01-13 06:58
Rozszerzenia Chrome to małe programy stworzone w celu zwiększenia komfortu przeglądania użytkowników. Więcej informacji o rozszerzeniach do Chrome znajdziesz na
Aby utworzyć rozszerzenie przeglądarki Chrome, wymagane jest kodowanie, dlatego bardzo przydatne jest przejrzenie kodu HTML, JavaScript i CSS w poniższej witrynie:
www.w3schools.com/default.asp (szkoły w3 to dobra strona internetowa z zasobami dotyczącymi kodowania)
Nie wiesz jak kodować? Nie martw się, ten samouczek pomoże Ci poprowadzić drogę.
Najlepszą rzeczą w rozszerzeniach Chrome jest to, że można je dostosować. To nie jest tylko jedna konkretna rzecz, którą można zrobić, więc bądź kreatywny.
Kieszonkowe dzieci
Potrzebne materiały eksploatacyjne znajdują się poniżej:
- Komputer z edytorem tekstu (używam Notatnika)
- Google Chrome
I to wszystko!
Krok 1: Utwórz katalog
Najpierw utwórz folder do przechowywania wszystkich plików i nazwij go „rozszerzeniem”. W razie potrzeby nazwę można później zmienić.
Krok 2: Utwórz plik manifestu i zakoduj go
Plik manifestu jest bardzo ważną częścią rozszerzenia. Mówi rozszerzeniu dokładnie, co robić i czym być. Pliki manifestu są sformatowane w formacie JSON. Pierwszym krokiem jest otwarcie edytora tekstu i zapisanie nowego pliku jako „manifest.json”.
Następnie wpisz poniższy skrypt:
{
"name": "Pierwsze rozszerzenie", "version": "1.0", "description": "Mogę zakodować rozszerzenie", "manifest_version": 2, "browser_action": { "default_title": "Pierwsze rozszerzenie" } }
Zapamiętaj przecinki po wartościach!
Po wpisaniu zapisz plik manifestu i przejdź do chrome://extensions (do tego celu należy użyć przeglądarki Chrome). Na chrome://extensions włącz tryb programisty. Następnie naciśnij przycisk „Załaduj rozpakowany” i wybierz folder „rozszerzenie”.
proszę o werble…
Tak! To rozszerzenie, z wyjątkiem… że jest nudne. Na razie dosłownie nic nie robi, ale wkrótce będzie super.
Krok 3: Utwórz ikony i zaktualizuj manifest
Jedną z witryn, która dobrze sprawdza się w przypadku rysowania ikon, jest https://www.piskelapp.com/. Dostępne są również inne programy do rysowania. Ikony powinny być kwadratowe. Ten projekt będzie używał ikon 16x16, 32x32, 48x48 i 128x128. Po utworzeniu ikony utwórz folder o nazwie „images” w folderze rozszerzenia i umieść ikonę w tym folderze. Dobrym pomysłem może być nazwanie obrazu zgodnie z jego rozmiarem. Na przykład „icon32.png”. Nowy kod znajduje się poniżej:
{
"name": "Pierwsze rozszerzenie", "version": "1.0", "description": "Mogę zakodować rozszerzenie", "manifest_version": 2, "browser_action": { "default_title": "Pierwsze rozszerzenie", " default_icon": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128-p.webp
Aby zapoznać się z kodem manifestu, wejdź na
Krok 4: Dodaj wyskakujące okienko
To rozszerzenie będzie miało wyskakujące okienko. Wyskakujące okienko jest plikiem HTML (Hypertext Markup Language), więc dobrze jest najpierw nauczyć się podstaw HTML, CSS i JavaScript.
Najpierw zapisz dokument jako plik „popup.html” w folderze rozszerzenia.
Następnie edytuj plik manifestu, aby po kliknięciu wyświetlał „popup.html”. Nowy kod znajduje się poniżej:
{
"name": "Pierwsze rozszerzenie", "version": "1.0", "description": "Mogę zakodować rozszerzenie", "manifest_version": 2, "browser_action": { "default_title": "Pierwsze rozszerzenie", " default_icon": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128-p.webp
Nie zapomnij o przecinku!
Teraz, jeśli następujący kod HTML zostanie dodany do popup.html, po kliknięciu wyświetli się „Hello World”.
Witaj świecie
Krok 5: Spraw, aby wyglądał dobrze i był interaktywny
Jeśli wpisana zostanie podstawowa linia HTML, to wykona absolutne minimum. Jeśli zostanie dodany CSS (Cascading Style Sheets), będzie wyglądał fajniej, a jeśli zostanie dodany JavaScript, może być bardziej interaktywny. Ten samouczek nie będzie szczegółowo wyjaśniał HTML, JavaScript i CSS, ale w Internecie jest mnóstwo zasobów. Poniżej kod dla prostego programu „Hello World”, a następnie odpowiednio bardziej kolorowego programu:
Witaj świecie
Witaj świecie
#hello{ kolor tła: #000000; kolor: #ff0000; obramowanie: początek 8px #86a3b2; promień obramowania: 50px; przekształć: obróć (57 stopni); wypełnienie: 10px; wybór użytkownika: brak; kursor: celownik; przejście: transformacja 2s; } #hello:hover { transform: rotate(-417deg); }
Ten drugi przykład może być bardzo mylący dla początkującego. Ale miało to pokazać, jak ważny jest CSS dla programu/rozszerzenia. Teraz jest dobry moment na zrobienie sobie przerwy i nauczenie się kodowania HTML5 i skorzystanie z developer.chrome.com jako odniesienia. Może to zająć trochę czasu, ale można zrobić świetne rozszerzenie.
Krok 6: Opublikuj go w Chrome Web Store
Jeśli ktoś zrobił naprawdę świetne rozszerzenie i chce się nim podzielić ze światem, to może je opublikować. To jest przecież sens przedłużenia. Ten samouczek próbował tylko wyjaśnić plik manifestu i sposób jego użycia, a po prostu miał program „Hello World”.
Pierwszą rzeczą, którą należy zrobić, aby upublicznić rozszerzenie, jest przekształcenie folderu rozszerzenia w plik zip. Drugą rzeczą do zrobienia jest wejście na https://chrome.google.com/webstore/category/extensions i zalogowanie się na konto Google. Następnie kliknij przycisk ustawień, a następnie kliknij „pulpit programisty”. Naciśnij przycisk „Nowa pozycja”, aby przesłać plik zip. Tam należy edytować informacje o sklepie, prywatność i ceny. Rozszerzenie można łatwo opublikować, jeśli zostanie przesłane do sprawdzenia.
Teraz, gdy rozszerzenie jest zakończone, kontynuuj kodowanie!