Jak zrobić proste rozszerzenie do Chrome

Tworzenie rozszerzenia Chrome jest dość prostym procesem. Gdy skończysz, będziesz mógł używać go na swoim komputerze, aby usprawnić działanie przeglądarki.

Przeglądarka wymaga pewnych podstawowych składników, aby rozszerzenie mogło w pełni działać. Omówimy to wszystko poniżej, w tym sposób, w jaki niestandardowe rozszerzenie działa w Chrome bez konieczności przesyłania go lub udostępniania innym osobom.

Tworzenie złożonego rozszerzenia Chrome to proces o wiele bardziej szczegółowy niż to, co zobaczysz poniżej, ale ogólny proces jest taki sam. Czytaj dalej, aby dowiedzieć się, jak stworzyć rozszerzenie do Chrome , którego możesz zacząć używać już dziś.

Wskazówka(Tip) : aby zobaczyć, jak niesamowite może być Twoje własne rozszerzenie, wypróbuj te niesamowite rozszerzenia do Chrome(these amazing Chrome extensions) .

Jak zrobić rozszerzenie Chrome

Korzystając z tego przewodnika, utworzysz proste rozszerzenie do Chrome , które zawiera listę niektórych Twoich ulubionych witryn. (Chrome)Jest w pełni konfigurowalny i naprawdę łatwy do aktualizacji.

Oto, co należy zrobić:

  • Utwórz folder, w którym będą przechowywane wszystkie pliki składające się na rozszerzenie.
  • Utwórz pliki podstawowe wymagane przez to rozszerzenie: manifest.json , popup.html , background.html , styles.css .
  • Otwórz popup.html w edytorze tekstu, a następnie wklej tam wszystkie poniższe elementy, pamiętając o zapisaniu go po zakończeniu.
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

Możesz(Feel) edytować linki i tekst linków, a jeśli chcesz, aby rozszerzenie Chrome było dokładnie takie, jak my, po prostu zachowaj wszystko bez zmian.

  • Otwórz manifest.json w edytorze tekstu i skopiuj/wklej:

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

„manifest_version”: 2,
„name”: „Ulubione witryny”, ( “name”: “Favorite Sites”,)
„description”: „Wszystkie moje ulubione strony internetowe.”, ( “description”: “All my favorite websites.”,)
„version”: „1.0”,
„icons”: {
„16”: „icon.png”,
„32”: „icon.png”,
„48”: „icon.png”,
„128”: „icon.png”
},

   „tło”: {  (   “background”: { )
        „strona”:”tło.html” (        “page”:”background.html”)
},

    “browser_action” : {
        “default_icon” : “icon.png”,
        “default_title” : “Ulubione witryny”, (        “default_title” : “Favorite Sites”,)
        “default_popup”: “popup.html”
    }
}

Jadalne obszary tego kodu to name , description i default_title .

  • Otwórz styles.css i wklej następujący kod. To ozdabia menu podręczne, aby było bardziej atrakcyjne dla oka i jeszcze łatwiejsze w użyciu.

#myUL {
typ-listy: brak; (list-style-type: none;)
   dopełnienie: 0; (   padding: 0;)
   margines: 0; (   margin: 0;)
   szerokość: 300px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  górny margines: -1px; (  margin-top: -1px;)
  background-color: #f6f6f6;
  wypełnienie: 12px; (  padding: 12px;)
  dekoracja tekstu: brak; (  text-decoration: none;)
  rozmiar czcionki: 18px; (  font-size: 18px;)
  kolor czarny; (  color: black;)
  Blok wyświetlacza; (  display: block;)
  rodzina czcionek: „Noto Sans”, bezszeryfowa; (  font-family: ‘Noto Sans’, sans-serif;)
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

W pliku CSS można wiele zmienić. (CSS)Baw się tymi opcjami po utworzeniu rozszerzenia do Chrome , aby dostosować je do swoich upodobań.

  • Utwórz(Create) ikonę dla rozszerzenia i nazwij ją icon.png . Umieść go w folderze rozszerzenia Chrome . Jak widać w powyższym kodzie, możesz stworzyć osobną ikonę dla tych rozmiarów: 16×16 pikseli, 32×32 i tak dalej.

Wskazówka: (Tip: )Google ma więcej informacji(Google has more information) na temat tworzenia rozszerzeń Chrome . Istnieją inne przykłady i zaawansowane opcje, które wykraczają poza proste kroki, które tutaj pokazaliśmy.

Jak dodać niestandardowe rozszerzenie(Custom Extension) do Chrome

Po utworzeniu rozszerzenia Chrome nadszedł czas, aby dodać je do przeglądarki, aby móc korzystać ze wszystkich właśnie utworzonych plików. Instalacja niestandardowego rozszerzenia wymaga innej procedury niż ta , w której instalujesz zwykłe rozszerzenie do Chrome(how you’d install a normal Chrome extension) .

  • Z menu Chrome przejdź do Więcej narzędzi(More tools ) > Rozszerzenia(Extensions) . Możesz też wpisać chrome://extensions/ w pasku adresu.
  • Wybierz przycisk obok opcji Tryb programisty,(Developer mode) jeśli nie jest jeszcze wybrany. Spowoduje to włączenie specjalnego trybu, który umożliwia importowanie własnych rozszerzeń Chrome .

  • Użyj przycisku Załaduj rozpakowane(Load unpacked ) u góry tej strony, aby wybrać folder utworzony w kroku 1(Step 1) powyżej.

  • Zaakceptuj(Accept) wszelkie monity, jeśli je widzisz. W przeciwnym razie Twoje niestandardowe rozszerzenie Chrome pojawi się wraz z innymi, które masz w prawym górnym rogu przeglądarki.

Edytowanie rozszerzenia do Chrome

Teraz, gdy Twoje rozszerzenie do Chrome działa, możesz wprowadzić zmiany, aby dostosować je do swoich potrzeb. 

Plik styles.css kontroluje wygląd rozszerzenia, dzięki czemu można dostosować ogólny styl listy i zmienić kolor lub typ czcionki. W3Schools to jedno z najlepszych źródeł informacji o różnych rzeczach, które można zrobić z CSS .

Aby zmienić kolejność wyświetlania witryn internetowych lub dodać lub więcej witryn albo usunąć istniejące, edytuj plik popup.html. Tylko pamiętaj, aby zachować zmiany tylko w adresie URL(URL) i nazwie. Wszystkie pozostałe znaki, takie jak <li> i <html> , są wymagane i nie należy ich zmieniać. Samouczek HTML w W3Schools(HTML Tutorial on W3Schools) to dobre miejsce, aby dowiedzieć się więcej o tym języku.



Ksawery Tomaszewski

About the author

inżynier audiofilski i specjalista ds. produktów audio z ponad 10-letnim doświadczeniem. Specjalizuję się w tworzeniu wysokiej jakości głośników muzycznych i słuchawek od początku do końca. Jestem ekspertem w rozwiązywaniu problemów z dźwiękiem oraz projektowaniu nowych głośników i systemów słuchawkowych. Moje doświadczenie wykracza poza samo tworzenie dobrych produktów; Mam również pasję pomagania innym w byciu jak najlepszymi, czy to poprzez edukację, czy pracę społeczną.


Related posts