W tym poście krótko opiszę proces tworzenia własnej wtyczki do chrome
Krok 1: Utwórz pusty folder
Najpierw musisz utworzyć folder, w którym będziesz przechowywać pliki twojej wtyczki. Możesz nazwać ten folder dowolnie ale ja polecam użyć nazwy wtyczki.
Krok 2: Utwórz plik manifestu ( manifest.json )
Manifest jest plikiem konfiguracyjnym, który zawiera informacje o twojej wtyczce, takie jak nazwa, opis, wersja i zależności. Aby utworzyć plik manifestu, utwórz plik o nazwie "manifest.json" i umieść go w folderze twojej wtyczki.
Przykład pliku manifestu:
{
"name": "Nazwa wtyczki",
"version": "1.0.0",
"description": "Opis wtyczki",
"manifest_version": 3,
"action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
Krok 3: Dodaj ikonę
Aby dodać ikonę do twojej wtyczki, umieść plik obrazu o nazwie "icon.png" w folderze twojej wtyczki.
standardowe wymiary ikon
- 16 x 16 pikseli (dla paska narzędzi i menu)
- 19 x 19 pikseli (dla przeglądarki mobilnej)
- 48 x 48 pikseli (dla menu)
- 128 x 128 pikseli (dla sklepu Chrome i strony ustawień)
Krok 4: Utwórz plik HTML
Plik HTML będzie wyświetlany, gdy użytkownik kliknie na ikonę twojej wtyczki. Aby utworzyć plik HTML, utwórz plik o nazwie "popup.html" i umieść go w folderze twojej wtyczki.
Oto przykładowy plik HTML:
<!DOCTYPE html>
<html>
<head>
<title>Wtyczka do Chrome</title>
<script src="popup.js"></script>
</head>
<body>
<h1>HELLO extension!</h1>
</body>
</html>
Krok 5: Dodaj skrypt JavaScript
Możesz dodać skrypt JavaScript do swojej wtyczki, aby wykonywać różne funkcje. Aby utworzyć plik JavaScript, utwórz plik o nazwie "popup.js" i umieść go w folderze twojej wtyczki.
Poniżej przykładowy plik JavaScript:
document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('button');
button.addEventListener('click', function () {
chrome.tabs.executeScript({
code: 'alert("Hello extension")'
});
});
});
Krok 6: Zainstaluj wtyczkę
Aby zainstalować wtyczkę, otwórz przeglądarkę Chrome i przejdź do menu "More Tools" -> "Extensions". Następnie kliknij przycisk "Load unpacked" i wybierz folder twojej wtyczki.
Po wszystkim powinniśmy miec ją w dostępną w naszych wtyczkach i to w sumie tyle.
Nasza wtyczka jest gotowa do uzycia.