storage

This is the standard way to save any data for your extension. It's superior to using localStorage because it's asynchronous, accessible from service workers, and can sync across devices.

Examples:

• Storing user preferences for how the extension should behave.
• Caching data fetched from a server to reduce network requests.
• Keeping track of the extension's state (e.g., whether a toggle is on or off).

{
  "name": "My Storage Extension",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

Why is it not risky?

This is a very safe permission. It simply allows an extension to save its own settings and data. For example, a to-do list extension would use this to save your list of tasks.

The data is stored in a private sandbox that only that specific extension can access. No other website or extension can read it. It does not give the extension permission to read any of your personal data from other websites.

This example saves a user's chosen color from a popup and retrieves it when the popup is opened again.

// In your popup.js script

const colorPicker = document.getElementById('colorPicker');
const saveButton = document.getElementById('saveButton');

// Load the saved color when the popup opens
document.addEventListener('DOMContentLoaded', () => {
  chrome.storage.sync.get(['favoriteColor'], (result) => {
    if (result.favoriteColor) {
      colorPicker.value = result.favoriteColor;
      document.body.style.backgroundColor = result.favoriteColor;
    }
  });
});

// Save the color when the button is clicked
saveButton.addEventListener('click', () => {
  const color = colorPicker.value;
  chrome.storage.sync.set({ favoriteColor: color }, () => {
    console.log('Favorite color is set to', color);
    document.body.style.backgroundColor = color;
  });
});