Question

我可以通过按钮访问Google Chrome扩展程序。扩展应该是＆＃34;开始＆＃34;然后，当它再次被点击时，它应该是＆＃34;停止＆＃34;。因此，它必须识别其当前状态（并根据状态显示不同的弹出窗口）。

有没有办法跟踪这个全局标志或变量？

我当前的manifest.json，它只显示一个简单的弹出窗口（状态＃1的对话框）：

{
  "name": "Test",
  "version": "1.0",
  "description": "Test",
  "manifest_version": 2,
  "browser_action": {
    "default_icon": "Test.png", 
    "default_popup": "popup1.html"
  }
}

文件＆＃34; popup1.html＆＃34;只是一个带有“确定”表单按钮的页面。单击“确定”按钮时，它会将此全局状态变量设置为“开”，下一个扩展按钮单击将启动另一个页面。感谢

Answer 1

当您尝试打开新弹出窗口时，将重新初始化全局变量。＆＃34; localStorage的＆＃34;允许扩展以在客户端设备上保存数据。它现在仅支持键值映射数据，例如， localStorage.currentState =＆＃34; start＆＃34;。

当用户打开弹出对话框时，您可以使用localStorage保存按钮状态并相应地更新按钮状态。

<强> HTML

<!--default status is start-->
<button id="toggle-btn">ON</button>

<强> JS

$(function(){
    //default value is "start"
    var currentState = localStorage.currentState || "start";
    //cache button DOM element reference
    var $toggleBtn = $("#toggle-btn");

    //update button status
    if(currentState==="stop"){
        $toggleBtn.text("OFF");
    }

    //register button click handler
    $toggleBtn.click(function(){
        if(currentState==="start"){
            $toggleBtn.text("OFF");
            localStorage.currentState="stop";
        }
        if(currentState==="stop"){
            $toggleBtn.text("ON");
            localStorage.currentState="start";
        }
    });
});

顺便说一句，您可以使用浏览器开发工具（在资源选项卡中）检查数据是否按预期存储。

Google Chrome扩展程序：切换开/关模式

1 个答案: