Zawsze chciałeś, żeby przeglądarka działała dokładnie tak, jak tego potrzebujesz? Blokowała konkretne elementy na stronach, automatyzowała powtarzalne zadania, dodawała funkcje, których nie ma nigdzie indziej? Rozszerzenia Chrome dają ci tę moc – i są zaskakująco proste w budowie.
Czym jest rozszerzenie Chrome i z czego się składa?
Rozszerzenie do Chrome to w gruncie rzeczy mała aplikacja webowa zbudowana ze znajomych technologii – HTML, CSS i JavaScript. Nie ma tu żadnego egzotycznego języka ani specjalnego frameworka. Jeśli potrafisz budować strony internetowe, masz już większość umiejętności potrzebnych do napisania własnego rozszerzenia.
Każde rozszerzenie składa się z kilku elementów, których obecność zależy od tego, co rozszerzenie ma robić.
Manifest (manifest.json) to obowiązkowy plik konfiguracyjny – serce każdego rozszerzenia. Definiuje jego nazwę, wersję, uprawnienia do których potrzebuje dostępu, jakie skrypty uruchamiać i kiedy. Chrome czyta manifest jako pierwszy i na jego podstawie decyduje, jak załadować całe rozszerzenie.
Content Scripts to skrypty JavaScript wstrzykiwane bezpośrednio do odwiedzanych stron. Mają dostęp do DOM strony – mogą zmieniać jej treść, dodawać elementy, reagować na zdarzenia. To właśnie przez content scripts rozszerzenia blokują reklamy, podświetlają tekst czy modyfikują wygląd stron.
Background Service Worker to skrypt działający w tle, niezależnie od otwartych zakładek. Obsługuje zdarzenia przeglądarki, zarządza stanem rozszerzenia i komunikuje się z content scripts oraz popup’em.
Popup to interfejs użytkownika wyświetlany po kliknięciu ikony rozszerzenia na pasku narzędzi. Zwykły plik HTML z CSS i JavaScript – może pokazywać ustawienia, statystyki, przyciski akcji.
Options Page to strona ustawień rozszerzenia – bardziej rozbudowana niż popup, otwierana przez prawy klik na ikonie i „Opcje”.
Manifest V3 – nowy standard, który musisz znać
Jeśli zaczynasz tworzyć rozszerzenia w 2025 roku, pracujesz z Manifest V3 – aktualnym standardem Chrome Web Store, który zastąpił Manifest V2. Różnice są istotne i warto je znać od początku, żeby nie uczyć się na przestarzałych przykładach.
Najważniejsza zmiana to zastąpienie trwałych Background Pages przez Service Workers. W MV2 background script działał przez cały czas życia przeglądarki. W MV3 service worker jest uruchamiany na żądanie i zamykany, gdy nie ma nic do zrobienia. Ma to konsekwencje – nie możesz trzymać stanu w zmiennych globalnych, bo service worker może zostać w każdej chwili uśpiony. Persystentny stan wymaga chrome.storage.
Druga kluczowa zmiana dotyczy wykonywania kodu – MV3 zabrania dynamicznego wykonywania kodu pobranego z zewnętrznych źródeł. Cały JavaScript musi być zawarty w paczce rozszerzenia. To ogranicza pewne wzorce, ale zwiększa bezpieczeństwo.
Minimalny plik manifest.json dla MV3 wygląda tak:
{
"manifest_version": 3,
"name": "Moje Rozszerzenie",
"version": "1.0",
"description": "Opis tego, co robi rozszerzenie",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"action": {
"default_popup": "popup.html",
"default_icon": "icons/icon48.png"
},
"permissions": ["storage", "activeTab"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}Klucz permissions to lista uprawnień, o które rozszerzenie prosi użytkownika przy instalacji. Chrome Web Store analizuje uprawnienia i rozszerzenia żądające nadmiarowych uprawnień są odrzucane lub oznaczane jako podejrzane. Zasada minimalizmu – proś tylko o to, czego naprawdę potrzebujesz.
Budowa pierwszego rozszerzenia krok po kroku
Zbudujmy coś konkretnego – rozszerzenie, które zlicza słowa na aktualnie otwartej stronie i wyświetla wynik w popup’ie. Prosty, ale kompletny przykład pokazujący komunikację między wszystkimi częściami rozszerzenia.
Struktura plików:
moje-rozszerzenie/
├── manifest.json
├── popup.html
├── popup.js
└── content.jsmanifest.json:
json
{
"manifest_version": 3,
"name": "Licznik Słów",
"version": "1.0",
"description": "Zlicza słowa na aktualnej stronie",
"action": {
"default_popup": "popup.html"
},
"permissions": ["activeTab", "scripting"]
}popup.html:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body { width: 200px; padding: 16px; font-family: sans-serif; }
#count { font-size: 2rem; font-weight: bold; color: #2563eb; }
</style>
</head>
<body>
<p>Liczba słów na stronie:</p>
<div id="count">...</div>
<script src="popup.js"></script>
</body>
</html>popup.js:
document.addEventListener('DOMContentLoaded', async () => {
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
const results = await chrome.scripting.executeScript({
target: { tabId: tab.id },
func: () => document.body.innerText.split(/\s+/).filter(Boolean).length
})
document.getElementById('count').textContent = results[0].result
})To wszystko. Popup pobiera aktywną zakładkę, wstrzykuje funkcję zliczającą słowa w kontekście strony i wyświetla wynik. chrome.scripting.executeScript to MV3-owy sposób na uruchamianie kodu w kontekście strony bez osobnego content script – wygodne przy prostych, jednorazowych operacjach.
Żeby przetestować rozszerzenie lokalnie, wejdź na chrome://extensions, włącz „Tryb dewelopera” w prawym górnym rogu i kliknij „Załaduj rozpakowane”. Wskazujesz folder z rozszerzeniem i pojawia się ono natychmiast na pasku narzędzi – bez publikowania, bez czekania.
Komunikacja między częściami rozszerzenia
W bardziej rozbudowanych rozszerzeniach content script, background service worker i popup muszą się ze sobą komunikować. Chrome dostarcza do tego celu system wiadomości.
Wysyłanie wiadomości z popup do content script:
// popup.js
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
const response = await chrome.tabs.sendMessage(tab.id, { action: 'getPageData' })
console.log(response.data)Odbieranie wiadomości w content script:
// content.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === 'getPageData') {
const data = extractDataFromPage()
sendResponse({ data })
}
return true // Ważne: pozwala na asynchroniczną odpowiedź
})Persystentny stan między sesjami przechowujesz przez chrome.storage.local lub chrome.storage.sync (synchronizowany między urządzeniami użytkownika przez konto Google):
// Zapis
await chrome.storage.local.set({ userSettings: { darkMode: true, fontSize: 16 } })
// Odczyt
const result = await chrome.storage.local.get('userSettings')
console.log(result.userSettings)chrome.storage jest asynchroniczne i działa zarówno w service workerze, content scripts jak i popup – to naturalny sposób na współdzielenie stanu między wszystkimi częściami rozszerzenia.
Publikacja w Chrome Web Store i dobre praktyki
Gdy rozszerzenie jest gotowe, możesz opublikować je w Chrome Web Store – dostępne dla każdego użytkownika Chrome na świecie. Wymaga to jednorazowej opłaty rejestracyjnej ($5) za konto dewelopera.
Przed submisją warto zadbać o kilka rzeczy. Polityka prywatności jest wymagana, jeśli rozszerzenie zbiera jakiekolwiek dane użytkownika – nawet anonimowe statystyki. Ikony we wszystkich wymaganych rozmiarach (16, 48, 128 px) powinny być czytelne i profesjonalne. Zrzuty ekranu i opis w Chrome Web Store mają bezpośredni wpływ na to, czy użytkownicy zdecydują się zainstalować rozszerzenie.
Proces review trwa zazwyczaj od kilku dni do tygodnia. Chrome Web Store automatycznie skanuje rozszerzenia pod kątem złośliwego kodu i nadmiarowych uprawnień – to jeden z powodów, dla których minimalizm w uprawnieniach jest ważny nie tylko etycznie, ale i praktycznie.
Kilka dobrych praktyk, które warto stosować od początku. Nigdy nie przechowuj danych wrażliwych (haseł, tokenów API) w chrome.storage bez szyfrowania – storage rozszerzenia nie jest chroniony. Używaj Content Security Policy w manifest.json, żeby ograniczyć potencjalne wektory XSS. Testuj rozszerzenie na różnych stronach, bo content scripts działają w środowisku, którego nie kontrolujesz – strona może mieć własne skrypty, które interferują z twoim kodem.
Budowanie rozszerzeń Chrome to świetny sposób na rozwiązywanie własnych problemów z przeglądarką i – jeśli trafisz w potrzebę innych użytkowników – na dotarcie do szerokiej publiczności bez kosztownej dystrybucji. Jeśli masz pomysł na rozszerzenie i chcesz omówić jego architekturę lub natknąłeś się na problem przy implementacji – napisz przez formularz kontaktowy.
