Блог

У меня есть расширение Google Chrome, доступное с помощью кнопки. Предполагается, что расширение должно что-то «запускать», а затем, когда на него нажимают снова, оно должно «останавливаться». Таким образом, оно должно распознавать свое текущее состояние (а также отображать различные всплывающие окна в зависимости от состояния).

Есть ли способ отслеживать этот глобальный флаг или переменную?

Мой текущий manifest.json, который просто показывает простое всплывающее окно (диалоговое окно для состояния # 1):

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

Файл «popup1.html «это просто страница с кнопкой формы «ОК». При нажатии кнопки OK для этой глобальной переменной состояния будет установлено значение ON, а следующее нажатие кнопки расширения приведет к запуску другой страницы. Спасибо

Глобальная переменная будет повторно инициализирована при попытке открыть новое всплывающее окно. «localStorage» позволяет расширению сохранять данные на клиентском устройстве. Теперь оно поддерживает только данные сопоставления ключ-значение, например localStorage.currentState = «start».

Вы можете использовать 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";
        }
    });
});
  

Кстати, вы можете использовать инструмент разработки браузера (на вкладке ресурсов), чтобы проверить, сохранены ли данные должным образом.