Chrome 擴展 chrome.storage.local.set 值未從內容腳本傳遞到后台腳本

Question

我正在嘗試將輸入值從內容腳本傳遞到后台腳本並保留此值，直到在擴展中發生更改。

但是，該值保存在內容腳本中，但在后台腳本中不可用。

這是分機 HTML：

<input type="text" class="InputControl form-control" id="Key"/>
<button class="save-to-key" id="saveButton" type="button">Save</button>

這是基於按鈕點擊觸發的內容腳本：

//use strict';
var KeyInput = document.getElementById("Key");
var SaveButton = document.getElementById("saveButton");


function SaveButtonclick() {      
    

    if(KeyInput.value!==""){
        chrome.storage.local.set({'key': KeyInput.value}, function() {

            chrome.runtime.sendMessage({messageType:"KeyData",Key:KeyInput.value});
            console.log(" click event value " + KeyInput.value);
            alert("Value currently is set by script  " + KeyInput.value);
            //window.close();

             if(chrome.runtime.lastError) {
               console.error(
                 "Error setting'key to " + JSON.stringify(KeyInput.value) +
                 ": " + chrome.runtime.lastError.message
               );
             }
           });

           chrome.storage.local.get("Key").then((result) => {
            console.log("extracted from storage" + result.Key);// this is undefined for some reason
              
          });
        }
    }
 //document.addEventListener('DOMContentLoaded', SaveButtonclick  , false);
 SaveButton.addEventListener('click',SaveButtonclick,false);

 chrome.runtime.onSuspend.addListener(() => {
    console.log("Unloading.");
});

這是后台腳本：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if(message.messageType=="KeyData"){ 
        chrome.storage.local.set({"Key":message.key});
        console.log("Value currently is from message listeners "+message.key);
        sendResponse({'message':"KeyDataSavedSuccessfully"})
    }
});

chrome.runtime.onInstalled.addListener(function() {
    chrome.contextMenus.create({
        id: "1",
        title: "Save!",
        contexts:["selection"] // ContextType
       });
});



var KeyValue = function(word){
    var query = word.selectionText;
    var Key;
    chrome.storage.local.get("Key").then((result) => {
     Key=result.Key;
  });
  console.log("Value currently is  Main Script and get defaultvalues function is" + Key);
  chrome.tabs.create({url: "https://example.com/v1/test?sid="+query+"&Key="+Key+"&test=true"}); 
};

chrome.contextMenus.onClicked.addListener(KeyValue);

希望你能幫忙。

Answer 1

我注意到我哪里出錯了。 我不是在等待結果，因此該值未定義。

我在這里更改了擴展腳本：

    //use strict';
    var KeyInput = document.getElementById("Key");
    var SaveButton = document.getElementById("saveButton");
    
    
    function SaveButtonclick() {      
        
    
        if(KeyInput.value!==""){
            chrome.storage.local.set({'key': KeyInput.value}, function() {
    
                
chrome.runtime.sendMessage({messageType:"KeyData",Key:KeyInput.value},function (response) {
                console.log("message sent to backgroud "+JSON.stringify(response));
                 
            });
                console.log(" click event value " + KeyInput.value);
                alert("Value currently is set by script  " + KeyInput.value);
                //window.close();
    
                 if(chrome.runtime.lastError) {
                   console.error(
                     "Error setting key to " + JSON.stringify(KeyInput.value) +
                     ": " + chrome.runtime.lastError.message
                   );
                 }
               });
    
               chrome.storage.local.get("Key").then((result) => {
                console.log("extracted from storage" + result.Key);// this is undefined for some reason
                  
              });
            }
        }
     //document.addEventListener('DOMContentLoaded', SaveButtonclick  , false);
     SaveButton.addEventListener('click',SaveButtonclick,false);
    
     chrome.runtime.onSuspend.addListener(() => {
        console.log("Unloading.");
    });

我在后台腳本中更改了這部分：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
        if(message.messageType=="KeyData"){ 
var Keyvaluetosave=message.Key;
            chrome.storage.local.set({"Key":Keyvaluetosave});
            console.log("Value currently is from message listeners "+Keyvaluetosave);
            sendResponse({'message':"KeyDataSavedSuccessfully"})
        }
    });
    
    chrome.runtime.onInstalled.addListener(function() {
        chrome.contextMenus.create({
            id: "1",
            title: "Save!",
            contexts:["selection"] // ContextType
           });
    });
    
    
        var KeyValue = function(word){
            var query = word.selectionText;
            var Key;
            chrome.storage.local.get("Key").then((result) => {
             Key=result.Key;
             console.log("Value currently is  Main Script and get defaultvalues function is" + Key);
             chrome.tabs.create({url: "https://example.com/v1/test?sid="+query+"&Key="+Key+"&test=true"});  
          });
          
        };

我確實在此處輸入了某些部分……但這確實解決了問題……值已通過。 如果有人可以改進這一點，那么請這樣做。 太感謝了...！