Extension Chrome - enregistrement des détails de connexion pour le popup

Question

Je travaille sur une extension Chrome qui nécessitera que l'utilisateur se connecte à un compte afin de voir leur contenu. Ce que je veux faire, c'est empêcher l'utilisateur de se connecter à chaque fois en sauvegardant une sorte de cookie ou localStorage avec les données de connexion/session pertinentes une fois qu'il se connecte. Jusqu'à présent, après un peu de recherche, il semble que l'utilisation de l'API de stockage local Google Chromes serait la meilleure façon de le faire (ce serait génial si quelqu'un pouvait le confirmer).

Mon problème est avec le réglage et l'obtention du stockage local. J'ai installé un scénario de stockage local factice ici juste pour essayer d'obtenir Chrome pour stocker tout type de stockage local pour l'extension:

Popup.js:

function setCookie(){ 
    chrome.extension.sendMessage({name: 'setLoginCookie'}, function(otherResponse) { 
     console.log(otherResponse) 
    }) 
} 

function getCookie(){ 
    chrome.extension.sendMessage({name: 'getloginCookie'}, function(response) { 
     alert(response) 
    }) 
} 

event.js:

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) { 

    if (request.name == 'setLoginCookie') { 
     var obj = {test:"test"}  
     chrome.storage.sync.set(obj, function() { 
      alert('Data saved'); 
     });   
    }  

    if (request.name == 'getLoginCookie') { 
      chrome.storage.sync.get('test', function(data) { 
       sendResponse({ screenshotUrl: data.test }); 
     })  
    } 
    return true; 

}); 

Lorsque la fonction setCookie est exécutée, j'obtiens l'alerte 'data saved!' ce qui m'indiquerait qu'il a fonctionné mais quand je vérifie le stockage local sur mes extensions dev outils de chrome il n'y a rien là et si j'appelle la fonction getCookie alors il ne ramasse rien.

Voici les autorisations dans mon manifest.json:

"permissions": [ 
    "storage", 
    "cookies",  
    "tabs", 
    "<all_urls>", 
    "pageCapture", 
    "downloads"  
    ], 

Ai-je utilisé ici la mauvaise approche? Est-ce que l'utilisation chrome.storage.sync peut-être où je me suis trompé?

Merci

Answer 1

chrome.storage.sync n'est pas la même chose que le stockage local, vous ne verrez pas les données enregistrées en utilisant cette méthode dans les outils de dev Local Storage.

Vous avez une différence de message. Vous utilisez {name: 'getloginCookie'} pour envoyer le message et l'instruction if vérifie getLoginCookie. La différence est l dans le paramètre que vous passez à la fonction sendMessage.

Answer 2

quand je vérifie le stockage local sur mes extensions outils de dev de Chrome il n'y a rien

Dev Tools ne pas exposer chrome.storage à l'intérieur. L'élément "Stockage local" expose localStorage à la place.

Pour inspecter le chrome.storage d'un poste, vous pouvez utiliser Storage Area Explorer extension ou simplement appeler le chrome.storage.sync.get(null, (data) => { console.log(data) }) à partir de la console.

---

Remarque: vous ne devez pas déléguer le travail avec chrome.storage à votre page d'événement. chrome.storage est directement accessible à partir de tous les contextes d'extension - arrière-plan, popup, options, scripts de contenu. Ne couchez pas sur la messagerie juste pour cela.