Как сохранить состояние значка расширения Firefox локально

#javascript #html #firefox-addon

#javascript #HTML #firefox-аддон

Вопрос:

У меня есть расширение firefox, которое может изменять значок расширения в меню параметров html при нажатии на изображение значка.

options.html

 <body>
    <section class="browser-icons">
      <img id="black-trash" img src="../icons/black_trash.png" title="Black trash"/>
      <img id="red-trash" img src="../icons/red_trash.png" title="Red trash"/>
    </section>

options.js

 const blackTrash = document.getElementById("black-trash"); 
const redTrash = document.getElementById("red-trash");
    
function setBlack() {
  browser.browserAction.setIcon({path:"../icons/black_trash.png"});
}
function setRed() {
  browser.browserAction.setIcon({path: "../icons/red_trash.png"});
}
    
blackTrash.addEventListener("click", setBlack);
redTrash.addEventListener("click", setRed);

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

Как мне сохранить состояние значка локально?

Ответ №1:

Взгляните: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage

Я точно не знаю, но попробуйте localStorage для этого —

 function setBlack() {
  browser.browserAction.setIcon({path:"../icons/black_trash.png"});
  localStorage.setItem('icon', '../icons/black_trash.png');
}

Чтобы вызвать это, вам понадобится только localStorage.getItem('icon');

Я не знаю, решит ли это вашу проблему, но мы тоже здесь, чтобы учиться 😉

1. Спасибо! Эта реализация работает хорошо. Знаете ли вы, есть ли способ получить текущее состояние файла значка перед его локальным сохранением?

2. Я рекомендую вам использовать значки с помощью cdn, например, для хранения ваших значков в службах сайта загрузки, потому что это напрямую отражается на постоянстве вашего приложения.