Uprawnienie
"permissions":["storage"] pozwala rozszerzeniu na dostęp do lokalnej pamięci przeglądarki, co umożliwia przechowywanie danych użytkownika. Oto kilka przykładów, jak można to wykorzystać:Jak działa storage ?
Zapisywanie ustawień użytkownika
- Przykład: Rozszerzenie do zmiany motywów przeglądarki może zapisywać preferencje użytkownika dotyczące kolorów i układu, aby były one stosowane przy każdym uruchomieniu przeglądarki.
Przechowywanie danych offline
- Przykład: Rozszerzenie do zarządzania zadaniami może przechowywać listy zadań lokalnie, dzięki czemu użytkownik ma do nich dostęp nawet bez połączenia z internetem.
Cache’owanie danych
- Przykład: Rozszerzenie do przeglądania wiadomości może cache’ować ostatnie artykuły, aby przyspieszyć ich ładowanie przy ponownym otwarciu przeglądarki.
Synchronizacja danych między urządzeniami
- Przykład: Rozszerzenie do zakładek może synchronizować zakładki między różnymi urządzeniami użytkownika, zapisując je w lokalnej pamięci przeglądarki.
Przykład użycia
Przykładowe rozszerzenie: Zapisywanie preferencji użytkownika
Plik manifest.json
{
"manifest_version": 3,
"name": "Preferencje Użytkownika",
"version": "1.0",
"permissions": [
"storage"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
}
Plik background.js
chrome.runtime.onInstalled.addListener(() => {
// Ustawienie domyślnych wartości preferencji
chrome.storage.sync.set({ color: 'blue' }, () => {
console.log('Domyślny kolor ustawiony na niebieski.');
});
});
Plik popup.html
<!DOCTYPE html>
<html>
<head>
<title>Preferencje Użytkownika</title>
<style>
body {
font-family: Arial, sans-serif;
}
.color-option {
margin: 5px 0;
}
</style>
</head>
<body>
<h1>Wybierz kolor</h1>
<div class="color-option">
<input type="radio" id="blue" name="color" value="blue" checked>
<label for="blue">Niebieski</label>
</div>
<div class="color-option">
<input type="radio" id="red" name="color" value="red">
<label for="red">Czerwony</label>
</div>
<button id="save">Zapisz</button>
<script src="popup.js"></script>
</body>
</html>
Plik popup.js
document.getElementById('save').addEventListener('click', () => {
const color = document.querySelector('input[name="color"]:checked').value;
chrome.storage.sync.set({ color }, () => {
console.log('Kolor zapisany:', color);
});
});
// Wczytanie zapisanej wartości przy otwarciu popupu
chrome.storage.sync.get('color', (data) => {
if (data.color) {
document.getElementById(data.color).checked = true;
}
});
Jak to działa:
manifest.json: Definiuje uprawnienia i pliki rozszerzenia.background.js: Ustawia domyślną wartość preferencji przy instalacji rozszerzenia.popup.html: Tworzy interfejs użytkownika do wyboru koloru.popup.js: Zapisuje wybrany kolor w pamięci przeglądarki i wczytuje go przy otwarciu popupu.
Mam nadzieję, że to wyjaśnienie jest pomocne!
Czy masz jeszcze jakieś pytania dotyczące storage lub innych uprawnień w rozszerzeniach ?
Komentarze
Prześlij komentarz