Trabalhar em uma extensão da Web é uma experiência interessante: o senhor experimenta a Web enquanto trabalha com APIs de extensão especiais. Uma dessas APIs é a storage — a variante de extensão da Web da persistência. Vamos explorar como o senhor pode usar a session e local em suas extensões web do Manifest V3!

Como ativar o armazenamento de extensões

A extensão storage API não está disponível por padrão. Para ativar a storage API, o senhor precisa citá-la na seção manifest.json de sua extensão:

{
  // more....
  "manifest_version": 3,
  "name": "__MSG_appName__",
  "permissions": [
    "storage",
    // more....
  ],
  // more....
}

Adicionando storage ao permissions que é uma matriz de nível superior manifest.json de nível superior, fornece ao session e local recursos de armazenamento para sua extensão.

Obter, definir e remover valores de armazenamento

Muito parecido com o tradicional localStorage e sessionStorage APIs, o armazenamento de extensão fornece get, set, e remove operações:

// set
await chrome.storage.session.set({ name: "David", color: "green" });

// get 
const { name, color } = await chrome.storage.session.get(["name", "color"]);

// remove
await chrome.storage.session.remove(["name", "color"]);

Alguns aspectos a serem observados:

  • get requer um argumento de matriz, não um único valor como o localStorage e sessionStorage
  • set precisa ser um formato de objeto
  • remove também é uma matriz, assim como o get
  • O senhor pode usar chrome.storage.local ou chrome.storage.session dependendo de como o
  • Todos os métodos da API de armazenamento de extensão são baseados em promessas, com await ou formatos de retorno de chamada

Limpar todo o armazenamento

Caso o senhor deseje limpar todos os dados do armazenamento local ou de sessão, há um clear método:

await chrome.storage.session.clear();

Usando clear é eficaz, mas o senhor deve ter certeza de que realmente deseja limpar tudo — clear pode se tornar um problema de manutenção.

O armazenamento é uma parte essencial da maioria das extensões da Web. Embora a API seja simples, o formato assíncrono e os nomes dos métodos são diferentes.