Extensão do Chrome: acessando o localStorage no script de conteúdo

Então, eu tenho uma página de opções onde o usuário pode definir certas opções e salvá-lo em localStorage: options.html

Agora, eu também tenho um script de conteúdo que precisa obter as opções que foram definidas na página options.html , mas quando tento acessar o localStorage do script de conteúdo, ele não retorna o valor da página de opções.

Como faço para que meu script de conteúdo obtenha valores de localStorage, da página de opções ou até mesmo da página de plano de fundo?

Atualização 2016:

O Google Chrome lançou a API de armazenamento: http://developer.chrome.com/extensions/storage.html

É muito fácil de usar como as outras APIs do Chrome e você pode usá-lo em qualquer contexto de página no Chrome.

  // Save it using the Chrome extension storage API. chrome.storage.sync.set({'foo': 'hello', 'bar': 'hi'}, function() { console.log('Settings saved'); }); // Read it using the storage API chrome.storage.sync.get(['foo', 'bar'], function(items) { message('Settings retrieved', items); }); 

Para usá-lo, certifique-se de defini-lo no manifesto:

  "permissions": [ "storage" ], 

Existem methods para “remover”, “limpar”, “getBytesInUse” e um ouvinte de events para ouvir o armazenamento alterado “onChanged”

Usando o localStorage nativo ( resposta antiga de 2011 )

Os scripts de conteúdo são executados no contexto de páginas da Web, não de extensões. Portanto, se você estiver acessando o localStorage a partir do seu conteudo, será o armazenamento dessa página da Web, não o armazenamento da página de extensão.

Agora, para permitir que seu script de conteúdo leia seu armazenamento de extensão (no qual você os define na sua página de opções), é necessário usar a transferência de mensagens de extensão.

A primeira coisa que você faz é dizer ao seu script de conteúdo para enviar uma solicitação à sua extensão para buscar alguns dados, e esses dados podem ser sua extensão localStorage:

contentscript.js

 chrome.runtime.sendMessage({method: "getStatus"}, function(response) { console.log(response.status); }); 

background.js

 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if (request.method == "getStatus") sendResponse({status: localStorage['status']}); else sendResponse({}); // snub them. }); 

Você pode fazer uma API com base nisso para obter dados genéricos de localStorage para seu script de conteúdo ou, talvez, obter a matriz localStorage inteira.

Espero que tenha ajudado a resolver seu problema.

Para ser chique e genérico …

contentscript.js

 chrome.runtime.sendMessage({method: "getLocalStorage", key: "status"}, function(response) { console.log(response.data); }); 

background.js

 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if (request.method == "getLocalStorage") sendResponse({data: localStorage[request.key]}); else sendResponse({}); // snub them. }); 

Às vezes, pode ser melhor usar a API chrome.storage . É melhor que o localStorage porque você pode:

  • armazenar informações do seu script de conteúdo sem a necessidade de passar mensagens entre o script de conteúdo e a extensão;
  • armazene seus dados como objects JavaScript sem serializá-los para JSON ( localStorage armazena apenas strings ).

Aqui está um código simples demonstrando o uso de chrome.storage. O script de conteúdo obtém a URL da página visitada e o registro de data e hora e os armazena, o popup.js obtém a partir da área de armazenamento.

content_script.js

 (function () { var visited = window.location.href; var time = +new Date(); chrome.storage.sync.set({'visitedPages':{pageUrl:visited,time:time}}, function () { console.log("Just visited",visited) }); })(); 

popup.js

 (function () { chrome.storage.onChanged.addListener(function (changes,areaName) { console.log("New item in storage",changes.visitedPages.newValue); }) })(); 

“Alterações” aqui é um object que contém valor antigo e novo para uma determinada chave. O argumento “AreaName” refere-se ao nome da área de armazenamento, ‘local’, ‘sync’ ou ‘managed’.

Lembre-se de declarar permissão de armazenamento no manifest.json.

manifest.json

 ... "permissions": [ "storage" ], ... 

Outra opção seria usar a API do chromestorage. Isso permite o armazenamento de dados do usuário com synchronization opcional entre as sessões.

Uma desvantagem é que é assíncrona.

https://developer.chrome.com/extensions/storage.html

Intereting Posts