Jak zbudować rozszerzenie do Chrome

Chociaż w dzisiejszych czasach wydaje się, że istnieje rozszerzenie do wszystkiego, nie jest niemożliwe, aby trudno było znaleźć rozszerzenie przeglądarki do określonego celu lub potrzeby. Jak skomplikowane jest zbudowanie takiego? Poniżej znajdziesz przewodnik krok po kroku, jak utworzyć rozszerzenie do Chrome:

Krok 1: Wymagania

Dwie uwagi przed rozpoczęciem:

• Chociaż dla większości może się to wydawać oczywiste, ważne jest, aby utworzyć rozszerzenie w samej przeglądarce Google Chrome.
• Przetestuj swoją pracę, przechodząc przez ten proces. Łatwiej jest naprawić błędy w kodowaniu na bieżąco, niż cofać się po zakończeniu.

Zanim zaczniesz, musisz zdecydować o funkcji rozszerzenia. Jakiemu celowi to służy? Skoncentruj się na zainteresowaniach i problemach odbiorców, aby jasno określić, jakie rozwiązanie możesz zaoferować.

Gdy już to zrobisz, sprawdź projekt. Każde rozszerzenie przesłane do sklepu Google Chrome wymaga ikony. Możesz stworzyć go samodzielnie lub zlecić projekt. Gdy masz już swoją ikonę, możesz rozpocząć tworzenie rozszerzenia.

Krok 2: Bloki konstrukcyjne

Jak każde oprogramowanie, rozszerzenie będzie składało się z kilku plików. Tak więc pierwszą rzeczą, którą musisz zrobić, to utworzyć katalog, w którym będą przechowywane wszystkie twoje pliki rozszerzeń.

Katalog to lokalizacja do przechowywania plików na komputerze. Każdy system operacyjny o hierarchicznej strukturze plików, taki jak MS-DOS, OS/2 lub Linux, ma katalog plików.

Dlaczego potrzebujesz katalogu? Więc kiedy Chrome ładuje twoje rozszerzenie, możesz pobrać pliki z właściwego folderu.

plik manifest.json

Następnie musisz utworzyć plik manifestu swojego rozszerzenia.

Manifest to plik informujący system operacyjny o sposobie uruchamiania programu . Ustawienia w pliku manifestu są zawsze określane przy użyciu języka XML. Manifesty są często używane do zawierania ustawień, takich jak uprawnienia, informowania systemu operacyjnego, której wersji biblioteki DLL będzie używał program.

W przypadku Twojego rozszerzenia plik manifestu przekaże Chrome instrukcje ładowania rozszerzenia.

Tworzę plik manifestu

W Chrome utwórz plik o nazwie manifest.json i dodaj go do swojego katalogu. Dodaj potrzebny kod do pliku manifestu. Następnie dodaj następujący kod:

{

„nazwa”: „Przykład Pierwsze kroki”,

„opis”: „Zbuduj rozszerzenie!”,

„wersja”: „1.0”,

„wersja_manifestu”: 3

}

Uprawnienia rozszerzenia zależą od funkcji rozszerzenia. Listę wszystkich uprawnień i ich znaczenie znajdziesz w dokumentach rozszerzeń Chrome.

Strona wyskakująca

Jeśli Twoja witryna potrzebuje wyskakującego okienka, dodaj go do kodu.

1. Przypisz nazwę pliku z browser_action w pliku manifestu.
2. Zbuduj wyskakującą stronę za pomocą HTML lub CSS. Możesz dodawać obrazy w formacie SVG.
3. Użyj JavaScript, aby dodać funkcjonalność do wyskakującego okienka. Wyznacz plik JavaScript i połącz go w swoim wyskakującym pliku. Na przykład:
4. Możesz tworzyć funkcjonalność i mieć dostęp do wyskakującego DOM. Oto przykład, jak to zrobić.

document.addEventListener(“DOMContentLoaded”, () => {

var button = document.getElementById(„prześlij”)

button.addEventListener(“klik”, (e) => {

konsola.log(e)

})

})

Skrypt treści

Sekcja content_script określa, gdzie rozszerzenie powinno działać. Jeśli chcesz, aby rozszerzenie działało na wszystkich stronach, powinieneś napisać:

„skrypty_treści”: [

{

„dopasowania”: [„<wszystkie_urls>”],

„css”: [„background.css”],

„js”: [„background.js”]

}

],

Jeśli chcesz, aby rozszerzenie działało na jednej witrynie, na przykład na Facebooku, powinieneś dodać [„https://facebook.com/*”]

Strona wydarzeń

Zdarzenie to obiekt, który umożliwia otrzymanie powiadomienia o wydarzeniu się czegoś interesującego. Na przykład możesz użyć zdarzenia chrome.alarms.onAlarm, aby zostać powiadomionym o zbliżającym się alarmie.

chrome.alarms.onAlarm.addListener(function(alarm) {

appendToLog('alarms.onAlarm –'

+ ' nazwa: ' + nazwa.alarmu

+ ' zaplanowanyCzas: ' + alarm.zaplanowanyCzas);

});

Więcej informacji o stronach wydarzeń znajdziesz w dokumentach Chrome

Content.js

Skrypty treści to pliki JavaScript, które są częścią rozszerzeń przeglądarki. Skrypty treści mają więcej uprawnień niż zwykły javascript.

Krok 3: Otwórz wyskakujący plik HTML z wyskakującego okienka rozszerzenia Chrome

Jeśli umieścisz przycisk w swoim natywnym rozszerzeniu Chrome, po kliknięciu tego przycisku możesz utworzyć kolejne wyskakujące okienko HTML w innej treści. Oto przykład na StackOverflow:

Plik manifest.json:

{

„nazwa”: „Ściągawki”,

„opis”: „rozszerzenie ściągawki”,

„wersja”: „1.0”,

„wersja_manifestu”: 3,

"tło": {

„service_worker”: „background.js”

},

„uprawnienia”: [„pamięć”, „aktywna karta”, „skrypty”, „zakładki”],

"akcja": {

„default_popup”: „popup.html”,

„Ikona_domyślna”: {

„16”: „/images/get_started16.png”,

„32”: „/images/get_started32.png”,

„48”: „/images/get_started48.png”,

„128”: „/images/get_started128.png”

}

},

„ikony”: {

„16”: „/images/get_started16.png”,

„32”: „/images/get_started32.png”,

„48”: „/images/get_started48.png”,

„128”: „/images/get_started128.png”

}

}

Plik popup.html:

<!DOCTYPE html>

<html>

<głowa>

<link rel=”stylesheet” href=”style.css”>

</head>

<ciało>

<button id=”git_Sheet”>arkusz git</button>

<script src=”popup.js”></script>

</body>

</html>

Oraz plik popup.js:

let gitSheet = document.getElementById("git_Sheet"); gitSheet.addEventListener(“klik”, async() => { let

= czekaj chrome.tabs.query({ active: true, currentWindow: true }); chrome.scripting.executeScript({ target: { tabId: tab.id }, funkcja: ShowGitSheet, }); }); function ShowGitSheet() { chrome.browserAction.openPopup({ popup: “git_popup.html” }); }

Wskazówka: użyj chrome.windows.create({url: '…', type: 'popup'}) zamiast chrome.browserAction.openPopup, jeśli chcesz, aby inna przeglądarka niż Firefox uruchamiała twoje rozszerzenie.

Krok 4: Sprawdź błędy po zainstalowaniu rozszerzenia w Chrome

Po zakończeniu etapu budowania nadszedł czas, aby przetestować rozszerzenie, aby upewnić się, że Chrome je uruchomi. Aby załadować rozszerzenie i rozpocząć debugowanie, wykonaj następujące kroki:

• Otwórz chrome://extensions w przeglądarce Google Chrome.
• Ustaw tryb programisty, zaznaczając pole Deweloper w prawym górnym rogu.
• Kliknij "Załaduj rozpakowane rozszerzenie", a zobaczysz swój plik z opcją jego wybrania.
• Jeśli Twoje rozszerzenie jest prawidłowe, powinno zostać załadowane natychmiast po jego wybraniu.
• Jeśli jest nieprawidłowy, zobaczysz komunikat o błędzie.

Podczas pisania kodu najczęstszymi błędami są błędy składni. Pierwszą rzeczą jest więc ponowne sprawdzenie, czy wszystkie przecinki i nawiasy są we właściwym miejscu i we właściwym formacie.

Następnie upewnij się, że zaznaczyłeś pole „włączone”, aby zobaczyć, jak działa.

Krok 5: Dodaj logikę do działania.

Dobrą zasadą jest umieszczenie wywołań API w skrypcie w tle i manipulacji DOM w skrypcie treści. Zobaczmy przykład dodawania skryptu w tle:

1. Utwórz plik o nazwie background.js w katalogu rozszerzeń
2. Zarejestruj skrypt w tle w manifeście

{

„nazwa”: „Przykład Pierwsze kroki”,

„opis”: „Zbuduj rozszerzenie!”,

„wersja”: „1.0”,

„wersja_manifestu”: 3,

"tło": {

„service_worker”: „background.js”

}

}

Po ponownym załadowaniu rozszerzenia Chrome może przeskanować plik w poszukiwaniu dodatkowych instrukcji, takich jak zdarzenia.

1. Dodaj skrypt. Będzie się różnić w zależności od celu rozszerzenia.

Aby pomóc rozszerzeniu uzyskać informacje po zainstalowaniu, należy dołączyć zdarzenie nasłuchujące dla runtime.onInstalled w skrypcie w tle. Następnie odbiornik onInstalled otrzymuje wartość za pomocą interfejsu API magazynu, dzięki czemu komponenty rozszerzenia mogą uzyskać dostęp do wartości i ją zaktualizować.

// tło.js

niech kolor = '#3aa757';

chrome.runtime.onInstalled.addListener(() => {

chrome.storage.sync.set({ kolor });

console.log('Domyślny kolor tła ustawiony na %cgreen', `color: ${color}`);

});

Dowiedz się więcej o kolejnych krokach w witrynie dla programistów Google Chrome. Obejmuje to sposób tworzenia interfejsu użytkownika i ikony oraz ustanawiania logiki warstw w celu poprawy interakcji z użytkownikiem.

Jak zwykle, aby rozpocząć projektowanie interfejsu, musisz zarejestrować akcję przeglądarki w swoim pliku manifestu. Na przykład, jeśli używasz wyskakującego okienka, kod może wyglądać tak:

<!DOCTYPE html>

<html>

<głowa>

<link rel=”stylesheet” href=”button.css”>

</head>

<ciało>

<button id=”changeColor”></button>

</body>

</html>

Jakie są wymagania ikony? Dla obrazów 16×16 i 32×32 piksele. Wszystkie ikony powinny być kwadratowe.

Nie zapomnij dodać skryptów logicznych , aby rozszerzenie wiedziało, co robić. Na przykład możesz dodać go na końcu skryptu popup.js.

// Po kliknięciu przycisku wstaw setPageBackgroundColor do bieżącej strony

changeColor.addEventListener(„klik”, asynchroniczny () => {

pozwalać

= czekaj chrome.tabs.query({ active: true, currentWindow: true });

chrome.scripting.executeScript({

cel: { tabId: tab.id },

funkcja: setPageBackgroundColor,

});

});

// Ciało tej funkcji zostanie wykonane jako skrypt zawartości wewnątrz

// bieżąca strona

function setPageTłoKolor() {

chrome.storage.sync.get(„kolor”, ({ kolor }) => {

document.body.style.backgroundColor = kolor;

});

}

function setPageTłoKolor() {

chrome.storage.sync.get(„kolor”, ({ kolor }) => {

document.body.style.backgroundColor = kolor;

});

Krok 6: Wypróbuj rozszerzenie

Następnym krokiem jest logiczne ciągłe testowanie rozszerzenia, dzięki czemu możesz upewnić się, że wszystko działa tak, jak powinno. Jeśli zlecisz testowanie na zewnątrz, skorzystaj z okazji, aby sprawdzić, jak intuicyjny jest interfejs. Zgodnie z wynikami testu dostosuj swoje skrypty, a następnie przetestuj ponownie.

Krok 7: Prześlij swoje rozszerzenie do Chrome Web Store

Gdy będziesz zadowolony z rozszerzenia, możesz udać się do sklepu internetowego Chrome i przesłać je.

W sklepie dla programistów Chrome kliknij Nowy element , a następnie upuść plik projektu do programu do przesyłania.

Chrome zada kilka pytań, aby poprosić o informacje o swoich uprawnieniach i dlaczego są one potrzebne.

Przykłady rozszerzeń Google Chrome

Wydaje się, że wszystko ma rozszerzenie. Oto niektóre z najbardziej przydatnych:

• Zapisz na Dysku
  To rozszerzenie instaluje małą ikonę w górnej części przeglądarki. Wyśle wszystko, co przeglądasz, na swoje konto dysku, dzięki czemu możesz to później sprawdzić. Działa poprzez robienie zrzutów ekranu, zapisywanie obrazów, dźwięku lub wideo.
• Posortowane
  Ta wtyczka umożliwia użytkownikom organizowanie skrzynek odbiorczych i ustalanie priorytetów tego, co jest dla nich najważniejsze. Integruje się z Gmailem i umożliwia przeciąganie i upuszczanie wiadomości do niestandardowych kolumn.
• HTTPS wszędzie
  To rozszerzenie zwiększa bezpieczeństwo przeglądania, zmieniając dowolną witrynę z http na bezpieczny HTTPS, dzięki czemu jest szyfrowana i bezpieczna.
• nie obchodzą mnie ciasteczka
  Z każdą witryną, która prosi o zgodę na pliki cookie, to rozszerzenie jest ratunkiem. Może się wydawać, że to niewiele, ale w wyskakujących okienkach z plikami cookie pojawi się przycisk zgody. Zaoszczędzi to czas i przyspieszy Twoją produktywność.
• Test prędkości
  
  To przydatne rozszerzenie umożliwia sprawdzanie szybkości połączenia w podróży. Dzięki wersji na komputery i urządzenia mobilne możesz upewnić się, że Twoje połączenie jest najlepsze przed pobraniem dużego załącznika lub strumieniowaniem wideo.
  Za pomocą jednego kliknięcia Speedtest wykona szybki test połączenia w używanej sieci.

Co może zrobić Twoje rozszerzenie do Chrome?

Rozszerzenia niestandardowe to programy, które wykonują pojedyncze zadanie. Biorąc to pod uwagę, możesz uwzględnić więcej niż jedną funkcjonalność, ale pamiętaj, że wszystko musi działać, aby osiągnąć ten sam cel.

Rozszerzenie do Chrome działa, korzystając z działań na stronie lub działań przeglądarki:

Akcja na stronie : jest to akcja specyficzna dla określonych stron.

Akcja przeglądarki : ma znaczenie niezależnie od tego, na której stronie się znajdujesz.

Upewnij się, że interfejs użytkownika jest przyjazny i łatwy do zrozumienia. Ostatecznym elementem dostarczanym będzie pakiet, który użytkownik może pobrać i zainstalować.

5 wypróbowanych i przetestowanych sposobów zarabiania pieniędzy na swoim rozszerzeniu

Głównym celem Twojego rozszerzenia jest generowanie przychodów. Po zdefiniowaniu grupy docelowej i sposobu, w jaki będą korzystać z rozszerzenia, możesz ustalić, w jaki sposób możesz na nim zarabiać. Napisaliśmy obszerny przewodnik na temat zarabiania na rozszerzeniach. Oto kilka najważniejszych informacji:

1. Reklamy w aplikacji

Reklama w aplikacji to jeden z najczęstszych sposobów zarabiania na rozszerzeniu. Są to reklamy, które wyświetlają się użytkownikom korzystającym z Twojego rozszerzenia. Gdy zarabiasz na reklamach w aplikacji za pomocą rozwiązania programistycznego, reklamy są rotowane. W przeciwieństwie do reklam statycznych ta technika pomaga zmaksymalizować Twój potencjał. Korzystając z reklam displayowych, możesz mieszać różne rodzaje reklam.

Użytkownicy CodeFuel maksymalizują swoje zyski i upraszczają zarabianie, ponieważ usługa wyświetla reklamy odpowiednie do intencji użytkownika.

2. Reklamy w wyszukiwarce

Jest to strategia, w której reklamy są umieszczane na stronie wyników wyszukiwania. Ponieważ reklamy pojawiają się, gdy osoba czegoś szuka, nie przeszkadza to użytkownikowi. Reklamy w wyszukiwarce można dostosowywać zgodnie z intencjami użytkownika, aby poprawić wrażenia użytkownika.

3. Płatności i zakupy w aplikacji

W tym modelu rozszerzenie jest bezpłatne, ale istnieją funkcje wewnętrzne, za które pobierasz opłaty. Zakupy w aplikacji są powszechne wśród aplikacji i rozszerzeń gier. Użytkownik wybiera, czy chce dodać dodatkowe płatne funkcje.

4. Płatne aktualizacje

Podobnie w tym modelu, podstawowe rozszerzenie oferowane jest za darmo, ale jeśli użytkownik chce wersję premium, musi zapłacić za ulepszoną wersję. Jest to niezwykle powszechny model, używany przez popularne rozszerzenia, takie jak Grammarly.

5. Freemium

To chyba najpopularniejszy model monetyzacji rozszerzeń i aplikacji. Dzięki freemium oferujesz rozszerzenie za darmo. Jak na tym zarabiasz? Masz kilka opcji:

1. Możesz zaoferować bezpłatny okres próbny przez ograniczony czas.
2. Możesz zaoferować bezpłatną, podstawową wersję z ograniczonymi funkcjami.

Jeśli wybierzesz ten model, weź pod uwagę jego ograniczenia, ponieważ Google wycofało płatne rozszerzenia.

Najlepsze rozszerzenia zabezpieczeń Google Chrome:

Większość ludzi używa Chrome do wszystkiego, od zakupów i wyszukiwania po zarządzanie swoimi kontami finansowymi. Wszystkie te wrażliwe dane muszą być chronione. Istnieje kilka rozszerzeń, które mogą zapewnić bezpieczeństwo tych informacji.

1. Avast Bezpieczeństwo online

To rozszerzenie obejmie bezpieczeństwo przeglądania stron internetowych z wieloma funkcjami. Jego ochrona przed atakami typu phishing skanuje elementy dowolnej strony internetowej i wykrywa, czy strona jest fałszywa lub podejrzana . Inne cenne funkcje obejmują używanie systemu oceny społeczności do wykrywania niebezpiecznych witryn.

2. Rozmycie

Dostępnych jest wiele menedżerów haseł, co jest konieczne, aby zapewnić bezpieczeństwo wszystkich twoich danych uwierzytelniających. Rozmycie jest jednym z najbezpieczniejszych ze względu na dodatkowe funkcje bezpieczeństwa.

Blur szyfruje, zapisuje i zarządza Twoimi hasłami . Ukrywa również informacje o Twojej karcie kredytowej przed witrynami zakupów i blokuje wszystkie typy modułów śledzących, w tym te, które nie są plikami cookie.

3. Kliknij i wyczyść

Jest to narzędzie do czyszczenia, które jednym kliknięciem usuwa wszelkie ślady Twojej aktywności online . Przycisk rozszerzenia wyczyści całą historię online, pliki cookie, pamięć podręczną, zapisane adresy URL, internetowe bazy danych SQL, a nawet pliki tymczasowe. Click and Clean ma wbudowane oprogramowanie chroniące przed złośliwym oprogramowaniem, a nawet może zostać dostosowane do usuwania niektórych typów danych.

4. Przycisk paniki

To rozszerzenie pomaga zamknąć wszystko, co masz otwarte, jednym kliknięciem. Jest to pomocne, jeśli pracujesz nad czymś wrażliwym i zbliża się nieupoważniona osoba. Po kliknięciu przycisku paniki wszystkie zakładki natychmiast się zamkną i zostaną zapisane w folderze zakładek.

5. Ghostery

Jeśli chcesz chronić swoją prywatność w Internecie lub uzyskać kontrolę nad trackerami, to rozszerzenie może być rozwiązaniem. Ghostery zapewnia kontrolę nad trackerami, dzięki czemu możesz zdecydować, które z nich chcesz zablokować lub odblokować. Umożliwia również zablokowanie śledzenia określonego typu.

Jak CodeFuel może pomóc Ci zmaksymalizować wydajność Twojego rozszerzenia?

Przenieś zarabianie na rozszerzeniach na wyższy poziom dzięki CodeFuel. Nasza kompletna platforma monetyzacyjna zapewnia monetyzację opartą na intencji dla Twoich usług cyfrowych, w tym rozszerzeń przeglądarki.

Rozwiązanie wykorzystuje uczenie maszynowe, aby wyświetlać użytkownikom bardzo trafne reklamy produktowe i tekstowe, dostosowane zgodnie z intencjami. W przeciwieństwie do innych rozwiązań, CodeFuel zapewnia elastyczność pracy z wieloma sieciami reklamowymi, takimi jak Bing i GoogleAdSense. Już dziś zacznij maksymalizować wydajność rozszerzenia dzięki CodeFuel.

Jak naprawić rozszerzenie Chrome, jeśli się zawiesza?

Pracujesz z rozszerzeniem Chrome i nagle przeglądarka się zawiesza. Jak frustrujące. Nie jest to powszechne, ale się zdarza. Jeśli Chrome się zawiesi lub zawiesi, otrzymasz komunikat o błędzie z informacją o rodzaju błędu, na przykład błąd serwera proxy lub niedostępna strona internetowa.

Pomoc Chrome zawiera szereg wskazówek dotyczących rozwiązywania problemów:

• Zamknij inne karty i aplikacje
• Uruchom ponownie przeglądarkę
• Sprawdź, czy nie ma złośliwego oprogramowania
• Przetestuj sieć pod kątem problemów
• Jeśli Twoje rozszerzenie powoduje konflikt z Chrome , wykonaj te instrukcje:

1. W prawym górnym rogu kliknij Więcej Ustawienia.
2. U dołu kliknij Zaawansowane .
3. Kliknij Resetuj i wyczyść Zaktualizuj lub usuń niekompatybilne aplikacje.
   Jeśli nie widzisz tej opcji, nie ma problemu z aplikacją.
4. Zdecyduj, czy chcesz zaktualizować lub usunąć każdą aplikację z listy.
   Otwórz sklep z aplikacjami na komputerze i sprawdź dostępność aktualizacji.

FAQ