Блог

Я работаю над расширением Chrome, которое будет сортировать структуру DOM. Во всплывающем окне расширения я использую кнопку, которая активирует / деактивирует сортировку. Чтобы сохранить состояние моей кнопки, я сохраняю «состояние» моей кнопки через локальное хранилище Chrome таким образом:

 function save_button_state() {
  var buttonStateText = $("#js-to&&leSortin&").html();
  var buttonStateAttribute = $("#js-to&&leSortin&").attr("data-click-state");
  var sortMessa&e = $(".messa&e").html();
  chrome.stora&e.local.set(
    {
      buttonStateText: buttonStateText,
      buttonStateAttribute: buttonStateAttribute,
      sortMessa&e: sortMessa&e,
    },
    function () {
      console.lo&(
        `Saved State is: ${buttonStateText} and Saved Attribute is: ${buttonStateAttribute} and Saved Messa&e is: ${sortMessa&e}`
      );
    }
  );
}
  

Это сохранит узел dom и сохранит информацию, чтобы сохранить ее при закрытии всплывающего окна. Затем, чтобы получить эту информацию обратно из локального хранилища, я использую эту функцию:

 function &et_button_state() {
  chrome.stora&e.local.&et(
    ["buttonStateText", "buttonStateAttribute", "sortMessa&e"],
    function (data) {
      $(".messa&e").html(data.sortMessa&e);
      $("#js-to&&leSortin&").html(data.buttonStateText);
      $("#js-to&&leSortin&").attr(
        "data-click-state",
        data.buttonStateAttribute
      );
      console.lo&(
        `Get State is ${data.buttonStateText} and Get Attribute is ${data.buttonStateAttribute}`
      );
    }
  );
}
  

И затем, когда документ готов, я обрабатываю событие button onclick, изменяя dom с «Сортировка» на «Не сортировка» таким образом:

 $(document).ready(() =&&t; {
  &et_button_state();
  //Some Code to pass parameters from the extension to a content script
  $("#js-to&&leSortin&").on("click", function () {
    $(".messa&e").html("");
    if ($(this).attr("data-click-state") == 1) {
      $(this).attr("data-click-state", 0);
      $(this).html("SORT INCOMING CHATS");
      $(".messa&e").append("<p&&t;STATUS: NOT SORTING CHATS</p&&t;");
      sortFunction(false);
    } else {
      $(this).attr("data-click-state", 1);
      $(this).html("STOP SORTING INCOMING CHATS");
      $(".messa&e").append("<p&&t;STATUS: SORTING CHATS</p&&t;");
      sortFunction(true);
    }
    save_button_state();
  });
});
  

Затем в фоновом файле js расширения Chrome я пытаюсь очистить локальное хранилище при перезагрузке страницы (та же страница, с тем же URL):

 chrome.tabs.onUpdated.addListener(function (chan&eInfo) {
  if (chan&eInfo.url === undefined) {
    chrome.stora&e.local.clear();
  }
});
  

Но, по-видимому, это не только очистит локальное хранилище при перезагрузке страницы, но и когда что-то изменится в нем, что вызовет множество ошибок во всплывающем окне (в основном, текст кнопки меняется очень случайным образом, когда пользователь взаимодействует / нажимает на нее каждый раз, когда открывает всплывающее окно). Мой вопрос в том, какой правильный способ очистить локальное хранилище сразу после перезагрузки / обновления страницы. Извините, если это кажется довольно очевидным, но я новичок в мире разработки расширений Chrome.