Неожиданное поведение в расширении Chrome и «localStorage»-свойство

#javascript #google-chrome #google-chrome-extension

#javascript #google-chrome #google-chrome-extension

Вопрос:

Я создаю довольно простое расширение Chrome: когда «активно», оно должно копировать некоторый исходный код всякий раз, когда content.js отправляет правильные данные:

background.js

 ...
// when active, listen for content.js and copy content into clipboard
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.from === "content" amp;amp; active === true) {
            copyTextToClipboard(request.message)
        }
});
  

Установка расширения «активный» выполняется щелчком по значку расширения на вкладке Chrome:

background.js

 ...
// turn the logo color and set activity status upon clicking the extension logo in the tab

chrome.browserAction.onClicked.addListener(function() {
    active = !active;
    localStorage.setItem("active_stored", active);
    if (active) {
        chrome.browserAction.setIcon({path: "icon_yellow.png"})
    } else {
        chrome.browserAction.setIcon({path: "icon_grey.png"})
    }
});
...
  

Он почти работает так, как ожидалось (т. Е. щелчок по наборам значков active=true или false , обозначенный соответствующим изменением логотипа расширения).
Однако я хочу сохранить статус активности с помощью localStorage , чтобы он оставался неизменным даже после завершения работы Chrome.

Итак, я добавил следующий код:

background.js:

 ...
// turn the logo color and set activity status upon starting up Chrome browser
let active = localStorage.getItem("active_stored");
chrome.runtime.onStartup.addListener(function () {
    if (active) {
        chrome.browserAction.setIcon({path: "icon_yellow.png"})
    } else {
        chrome.browserAction.setIcon({path: "icon_grey.png"})
    }
});
...
  

Однако при перезапуске Chrome, независимо от состояния, в котором я оставил active , отображается логотип «active», а переменной присваивается значение true (что я нахожу странным, но я мог бы с этим смириться), но исходный код не копируется! Нажатие на значок дважды, то есть деактивация и активация, приведет к ожидаемому поведению!

Может кто-нибудь сказать мне, где я ошибаюсь в этом?

PS: Изначально я пробовал это с chrome.storage.set и chrome.storage.get , но использование функции обратного вызова действительно смутило меня. После прочтения нескольких статей и других вопросов я чувствую, что это может быть необходимо для решения этой проблемы. Пожалуйста, позвольте мне, если а) это действительно единственный способ сделать это и б) как правильно интегрировать эту функциональность. Спасибо!

Ответ №1:

Проблема в том, что значения в localStorage сохраняются как string , что означает, что оба "true" и "false" строки являются истинными значениями.

Чтобы преобразовать значения из localStorage в boolean , используйте что-то вроде этого:

 let active = JSON.parse(localStorage.getItem("active_stored"));