Chrome.storage.onChangedストアnewValue

Question

私のcontent.js私はexternal_connectable でウェブページからトークンを送り、background.js.Myの2番目のcontent.jsでそのトークンを設定し、他のウェブページを実行してトークンを呼び出します私はbackground.jsでそのトークンを設定します。トークンが変更されたときに私はonChangedメソッドをlistenし、私はボタンをクリックするとnewValueを与えます。 ボタンをクリックするとnewValueが表示されますが、問題はトークンが変更されたときです。もう一度クリックすると2トークン古いトークンと新しいトークンが再び3トークンに変更されます。

var x = localStorage.getItem("token"); 
chrome.runtime.sendMessage("dcjcfafcmfgklldlfehalaedlaaboemo",{data: x }); 

backgrond.js：

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
    if (request.data) 

    chrome.storage.local.set({'token_data': request.data}); 

    }); 

content.js（私の英語

PSはその

content.js（background.jsにトークンを送信する）ための悪い気の毒です第2のウェブページ呼び出しトークン）：

$(document).ready(function() { 
    $(".info-more").append($("<a class='my-button'></a>")); 



    chrome.storage.onChanged.addListener(function(changes, namespace) { 

     $('.my-button').on('click',function(){ 

     console.log(changes.token_data); 

    }); 
}); 

}); 

Answer 1

新しいメッセージのたびにクリックハンドラを設定するので、より多くの値が得られます。

だけメッセージリスナーの外にクリックハンドラを移動：

第二content.js：私のコードが正しく実行されていることについて

$(document).ready(function() { 
    $(".info-more").append($("<a class='my-button'></a>")); 

    var token; 
    chrome.storage.onChanged.addListener(function(changes, namespace) { 
     token = changes.token_data; 
    }); 

    $('.my-button').on('click',function(){ 
     console.log(token); 
    }); 

});