エクステンションのChromeストレージの値にアクセスできない機能

Question

私は、指定されたページのプライオリティを、ユーザーがその額を稼ぐために必要とする時間に変換するクロムエクステンションに取り組んでいます。拡張機能は、ポップアップウィンドウからユーザーの給与情報を取り込み、クロームストレージに設定します。その部分は正常に動作します。

問題が発生しているのは、その値にアクセスし、その値を使って計算を実行することです。 JSは値をよく解析してconvert関数を呼び出しますが、クロムストレージから検索する代わりに、計算でプレースホルダの1時間単位の値1のみを使用します。代わりに、すべての解析後にクロームストレージにアクセスするように見えます（これはコンソールログがいつ実行されるかに基づいています）。

何が原因なのか考えていますか？私は$（document）.ready（関数）の最後に呼び出すために、解析全体を独自の関数に移動しようとしましたが、それでもchromeストレージから値を取得しませんでした。 content.jsで

：

function convert(price){ 
    var hourly = 1; 
    chrome.storage.sync.get('hourly', function(result){ 
     hourly = result.hourly; 
     console.log(hourly); 
    }); 
    return price/hourly; 
} 

var elements = document.getElementsByTagName('*'); 

for (var i = 0; i < elements.length; i++) { 
var element = elements[i]; 

    for (var j = 0; j < element.childNodes.length; j++) { 
     var node = element.childNodes[j]; 

     if (node.nodeType === 3) { 
      var text = node.nodeValue; 
      if (text[0] == '$'){ 
       if (/\s/.test(text)){ 
        var price = text.substring(0, text.indexOf(' ')); 
        var priceNum = text.substring(1, text.indexOf(' ')); 
        var time = convert(parseFloat(priceNum)); 
        var timeStr = time.toFixed(2); 
        if (text.length > 5){ 
         var remainder = text.substring(4); 
         var nextPrice = remainder.indexOf('$'); 
         if (nextPrice != -1){ 
          var priceTwo = remainder.substring(nextPrice); 
         } 
         var priceTwo = null; 
        } 
       } 
       else { 
        var price = text.substring(0); 
        var priceNum = text.substring(1); 
        var time = convert(parseFloat(priceNum)); 
        var timeStr = time.toFixed(2); 
       } 
      } 
      var replacedText1 = text.replace(price, timeStr); 
      if (replacedText1 !== text) { 
       element.replaceChild(document.createTextNode(replacedText1 + ' hours'), node); 
      } 
     } 
    } 
} 

Answer 1

chrome.storage.sync.get戻ると、コールバックによって、非同期になります。あなたは約束でchrome.storage.sync.getをラップすることによって、結果を取得した後、then機能で外部の解決データを受信することができます。

function convert(price){ 
    var hourly = 1; 
    return new Promise(function(resolve, reject) { 
     chrome.storage.sync.get('hourly', function(result){ 
      hourly = result.hourly; 
      resolve(price/hourly); 
     }); 
    }); 
} 

var elements = document.getElementsByTagName('*'); 

for (var i = 0; i < elements.length; i++) { 
var element = elements[i]; 

    for (var j = 0; j < element.childNodes.length; j++) { 
     var node = element.childNodes[j]; 

     if (node.nodeType === 3) { 
      var text = node.nodeValue; 
      if (text[0] == '$'){ 
       if (/\s/.test(text)){ 
        var price = text.substring(0, text.indexOf(' ')); 
        var priceNum = text.substring(1, text.indexOf(' ')); 
        if (text.length > 5){ 
         var remainder = text.substring(4); 
         var nextPrice = remainder.indexOf('$'); 
         if (nextPrice != -1){ 
          var priceTwo = remainder.substring(nextPrice); 
         } 
         var priceTwo = null; 
        } 
       } 
       else { 
        var price = text.substring(0); 
        var priceNum = text.substring(1); 
       } 
      } 
      convert(parseFloat(priceNum)).then(function(time) { 
       var timeStr = time.toFixed(2); 
       var replacedText1 = text.replace(price, timeStr); 
       if (replacedText1 !== text) { 
        element.replaceChild(document.createTextNode(replacedText1 + ' hours'), node); 
       } 
      }); 
     } 
    } 
}