javascript - Chrome 扩展程序弹出按钮在第二次按下后没有变化

Question

我创建了一个带有弹出窗口的 chrome 扩展，其中有一个按钮，单击该按钮会触发一个 js 来更改按钮的文本。一切都按预期工作，但如果我第二次单击该按钮，则什么也不会发生，我必须关闭并重新打开弹出窗 Eloquent 能使其工作。我该如何解决它？

这是我的 popup.html:

    <script src="jquery.js"></script>
<script src="toggle.js"></script>
<h3 style="text-align: center;"><strong><span style="color: #ff0000;">My Extension</span></strong></h3>
<p style="text-align: center;"><b>Switch</b></p>
<p style="text-align: center;"><button id='toggle-btn'>OFF</button></p>

这里是toggle.js(处理js进程):

$(function(){

if(!localStorage.getItem('currentState')) {
  localStorage.setItem('currentState', "stop");
}

var $toggleBtn = $("#toggle-btn");
var currentState = localStorage.getItem('currentState');

if(currentState == "stop"){
    $toggleBtn.text("OFF");
} else if (currentState == "start"){
    $toggleBtn.text("ON");
  }

 $toggleBtn.click(function(){
        if(currentState == "start"){
            $toggleBtn.text("OFF");
            localStorage.setItem('currentState', "stop");
            //OTHER ACTIONS
        } else {
            $toggleBtn.text("ON");
            localStorage.setItem('currentState', "start");
            //OTHER ACTIONS
        }
    });

});

Answer 1

您不会更改点击处理程序中的 currentState 值本身，而只会更改 localStorage。这就是为什么当您重新打开弹出窗口时它会起作用，因为 currentState 被分配给 localStorage 的值。

localStorage.setItem('currentState', "stop");
currentState = "stop";

localStorage.setItem('currentState', "start");
currentState = "start";

应该可以解决问题。