Question

我创建了一个带有弹出框的chrome扩展，其中有一个按钮，当单击时会触发一个更改按钮文本的js。一切正常，但如果我第二次点击按钮，没有任何反应，我必须关闭并重新打开弹出窗口才能使其正常工作。我怎么能解决它？

这是我的popup.html：

$(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
        }
    });

});

这里是toggle.js（处理js进程）：

{{1}}

Answer 1

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

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

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

应该这样做。

第二次按下后，Chrome扩展程序弹出式按钮不会更改

1 个答案: