Rozszerzenie przeglądarki Chrome - nie wymaga wcześniejszego doświadczenia w kodowaniu: 6 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:27

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!