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.

blog

Front End Development

Prefetch vs Preload

Prefetch vs Preload

Jak stworzyć wtyczkę do przeglądarki Chrome

Jak stworzyć wtyczkę do przeglądarki Chrome