Rozszerzenia składają się z różnych, ale spójnych elementów. Komponenty mogą obejmować skrypty działające w tle, skrypty treści, stronę opcji, elementy interfejsu i różne pliki logiczne. Komponenty rozszerzeń tworzy się przy użyciu technologii tworzenia stron internetowych: HTML, CSS i JavaScript. Komponenty rozszerzenia zależą od jego funkcjonalności i mogą nie wymagać każdej opcji.
W tym samouczku utworzysz rozszerzenie, które pozwoli użytkownikowi zmienić kolor tła dowolnej strony w witrynie developer.chrome.com. Będzie zawierać wiele podstawowych komponentów, które wstępnie zademonstrują ich zależności.
Na początek utwórz nowy katalog, w którym będą przechowywane pliki rozszerzenia.
Gotowe rozszerzenie znajdziesz tutaj.
Tworzenie pliku manifestu
Rozszerzenia zaczynają się od pliku manifestu. Utwórz plik o nazwie manifest.json i umieść w nim ten kod.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2
}
Katalog zawierający plik manifestu można dodać jako rozszerzenie w trybie programisty w obecnym stanie.
- Wejdź na
chrome://extensions, aby otworzyć stronę Zarządzanie rozszerzeniami.- Stronę Zarządzanie rozszerzeniami możesz też otworzyć, klikając menu Chrome, najeżdżając kursorem na Więcej narzędzi i wybierając Rozszerzenia.
- Włącz tryb programisty, klikając przełącznik obok Trybu programisty.
- Kliknij przycisk WCZYTAJ NIEPOKONANE i wybierz katalog rozszerzenia.
Gotowe! Rozszerzenie zostało zainstalowane. Ponieważ w pliku manifestu nie ma żadnych ikon, zostanie utworzona ogólna ikona na pasku narzędzi dla rozszerzenia.
Dodaj instrukcję
Rozszerzenie zostało zainstalowane, ale nie ma instrukcji. Wprowadź skrypt działający w tle, tworząc plik o nazwie background.js i umieszczając go w katalogu rozszerzeń.
Skrypty działające w tle i wiele innych ważnych komponentów muszą być zarejestrowane w pliku manifestu. Zarejestrowanie skryptu w tle w pliku manifestu informuje rozszerzenie, do którego pliku ma się odwołać i jak powinien działać.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
Rozszerzenie wie, że zawiera nietrwały skrypt w tle, i przeskanuje zarejestrowany plik pod kątem ważnych zdarzeń, na które musi nasłuchiwać.
To rozszerzenie będzie potrzebować informacji o stałej zmiennej zaraz po zainstalowaniu. Zacznij od dodania zdarzenia odsłuchania runtime.onInstalled w skrypcie działającym w tle. W detektorze onInstalled rozszerzenie ustawi wartość za pomocą interfejsu storage API. Dzięki temu wiele komponentów rozszerzeń będzie mieć dostęp do tej wartości i ją aktualizować.
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log("The color is green.");
});
});
Większość interfejsów API, w tym interfejs storage, musi być zarejestrowana w polu "permissions" w pliku manifestu, aby rozszerzenie mogło z nich korzystać.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
Wróć na stronę zarządzania rozszerzeniami i kliknij link Załaduj ponownie. Nowe pole Zbadaj widoki staje się dostępne z niebieskim linkiem strona w tle.
Kliknij link, aby wyświetlić dziennik konsoli skryptu działającego w tle „The color is green.”
Przedstaw interfejs użytkownika
Rozszerzenia mogą mieć różne formy interfejsu, ale w tym przypadku używa się wyskakującego okienka.
Utwórz plik o nazwie popup.html i dodaj go do katalogu. To rozszerzenie używa przycisku do zmiany koloru tła.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
}
</style>
</head>
<body>
<button id="changeColor"></button>
</body>
</html>
Podobnie jak skrypt działający w tle, ten plik musi być oznaczony jako wyskakujące okienko w pliku manifestu w sekcji page_action.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
Oznaczenie ikon na pasku narzędzi znajduje się też w polu page_action w polu default_icons.
Pobierz folder obrazów tutaj, rozpakuj go i umieść w katalogu rozszerzenia. Zaktualizuj plik manifestu, aby rozszerzenie wiedziało, jak używać obrazów.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"manifest_version": 2
}
Rozszerzenia wyświetlają też obrazy na stronie zarządzania rozszerzeniami, w ostrzeżeniu o uprawnieniach i favikonie. Te obrazy są oznaczone w pliku manifestu w sekcji icons.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
Jeśli rozszerzenie zostanie ponownie załadowane na tym etapie, zobaczy ikonę w skali szarości, ale nie będzie żadnych różnic w funkcjach. Ponieważ w pliku manifestu jest zadeklarowana zasada page_action, to rozszerzenie informuje przeglądarkę, kiedy użytkownik może wejść w interakcję z elementem popup.html.
Dodaj zadeklarowane reguły do skryptu działającego w tle za pomocą interfejsu API declarativeContent w zdarzeniu odbiornika runtime.onInstalled.
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
Rozszerzenie będzie potrzebować uprawnień dostępu do interfejsu API declarativeContent w swoim pliku manifestu.
{
"name": "Getting Started Example",
...
"permissions": ["declarativeContent", "storage"],
...
}
Gdy użytkownicy wejdą na adres URL, który zawiera "developer.chrome.com", na pasku narzędzi przeglądarki będzie teraz wyświetlać pełnokolorowa ikona działania na stronie. Gdy ikona jest pełnokolorowa, użytkownicy mogą ją kliknąć,
aby wyświetlić stronę popup.html.
Ostatni krok interfejsu wyskakującego okienka to dodanie koloru do przycisku. Utwórz plik o nazwie popup.js z poniższym kodem i dodaj go do katalogu rozszerzeń.
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
Ten kod pobiera przycisk z urządzenia popup.html i wysyła do pamięci masowej żądanie wartości koloru. Następnie stosuje kolor jako tło przycisku. Dodaj tag skryptu do popup.js w popup.html.
<!DOCTYPE html>
<html>
...
<body>
<button id="changeColor"></button>
<script src="popup.js"></script>
</body>
</html>
Aby zobaczyć zielony przycisk, załaduj ponownie rozszerzenie.
Logika warstwy
Rozszerzenie wie, że wyskakujące okienko powinno być dostępne dla użytkowników na stronie developer.chrome.com i wyświetla kolorowy przycisk, ale do dalszej interakcji z użytkownikiem wymagane jest wprowadzenie logiki. Zaktualizuj popup.js, aby zawierał poniższy kod.
let changeColor = document.getElementById('changeColor');
...
changeColor.onclick = function(element) {
let color = element.target.value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.body.style.backgroundColor = "' + color + '";'});
});
};
Zaktualizowany kod dodaje do przycisku zdarzenie onclick, które uruchamia automatycznie wstrzykiwany skrypt treści. Spowoduje to ustawienie tego samego koloru tła na stronie co przycisk. Stosowanie funkcji wstrzykiwania automatycznego umożliwia stosowanie skryptów treści wywoływanych przez użytkownika zamiast automatycznego wstawiania niechcianego kodu na stronach internetowych.
Plik manifestu musi mieć uprawnienie activeTab, aby zezwolić rozszerzeniu na tymczasowy dostęp do interfejsu API tabs. Umożliwi to rozszerzeniu wywoływanie metody tabs.executeScript.
{
"name": "Getting Started Example",
...
"permissions": ["activeTab", "declarativeContent", "storage"],
...
}
Rozszerzenie jest już w pełni funkcjonalne. Załaduj ponownie rozszerzenie, odśwież tę stronę, otwórz wyskakujące okienko i kliknij przycisk, aby zmienić kolor na zielony. Niektórzy użytkownicy mogą jednak chcieć zmienić kolor tła.
Daj użytkownikom różne możliwości
Obecnie to rozszerzenie umożliwia użytkownikom zmianę koloru tła na zielone. Dołączenie strony opcji zapewnia użytkownikom większą kontrolę nad funkcjami rozszerzenia i pozwala jeszcze bardziej dostosować ich przeglądanie.
Zacznij od utworzenia pliku w katalogu o nazwie options.html i dołącz do niego poniższy kod.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
}
</style>
</head>
<body>
<div id="buttonDiv">
</div>
<div>
<p>Choose a different background color!</p>
</div>
</body>
<script src="options.js"></script>
</html>
Następnie zarejestruj stronę opcji w pliku manifestu
{
"name": "Getting Started Example",
...
"options_page": "options.html",
...
"manifest_version": 2
}
Załaduj ponownie rozszerzenie i kliknij SZCZEGÓŁY.
Przewiń w dół stronę z informacjami i wybierz Opcje rozszerzeń, aby wyświetlić stronę opcji, choć obecnie będzie ona pusta.
Ostatni krok to dodanie funkcji logicznych opcji. Utwórz w katalogu rozszerzeń plik o nazwie options.js z poniższym kodem.
let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
function constructOptions(kButtonColors) {
for (let item of kButtonColors) {
let button = document.createElement('button');
button.style.backgroundColor = item;
button.addEventListener('click', function() {
chrome.storage.sync.set({color: item}, function() {
console.log('color is ' + item);
})
});
page.appendChild(button);
}
}
constructOptions(kButtonColors);
Dostępne są 4 opcje kolorów, a następnie generowane jako przyciski na stronie opcji z detektorami zdarzeń „onclick”. Gdy użytkownik kliknie przycisk, spowoduje to zaktualizowanie wartości koloru w globalnej pamięci rozszerzenia. Wszystkie pliki rozszerzenia pobierają informacje o kolorach z pamięci globalnej, więc nie trzeba aktualizować żadnych innych wartości.
Kolejny krok
Gratulacje! Katalog zawiera teraz w pełni funkcjonalne, choć proste rozszerzenie do Chrome.
Co dalej?
- Artykuł Omówienie rozszerzeń do Chrome zawiera sporo szczegółów na temat ogólnej architektury rozszerzeń oraz niektórych konkretnych pojęć, które powinni znać programiści.
- Więcej informacji o dostępnych opcjach debugowania znajdziesz w samouczku debugowania.
- Rozszerzenia do Chrome mają dostęp do zaawansowanych interfejsów API, które wykraczają poza możliwości oferowane w otwartej sieci. Chrome.* Dokumentacja interfejsów API zawiera informacje o poszczególnych interfejsach API.
- Przewodnik dla programistów zawiera dziesiątki dodatkowych linków do dokumentacji dotyczącej zaawansowanego tworzenia rozszerzeń.