How can I apply cookie inside popup?

Add-ons Development
#1

How can I save some user changes inside popup after reopening popup? For example when I entered some value into input inside popup and closed popup I expect that value should stay here in input. But input stay empty. One more example: I want to toggle active class by click on buttons inside popup so I could change styles for active items and save current active item after closing and opening popup. Please help me find out how can I use cookies for such cases or any other ways?

#2

The popup gets re-created from the .html-file youv’e specified every time it is opened and gets destroyed when it is closed.
If you want to save some state, you can ether do so in the background page (and use messages to read/set it) or you can use the browser.storage.sync API (after you’ve added the “storage” permission to your manifest).

#3

Maybe you can also display an iframe in your popup and save that iframe in your background page

#4

How can it help me to save some data?

#5

NilkasG, could you explain please how can I use such HTML from storage in my popup script for reproducing saved data? Can it be JSON format instead HTML?

#6

Sorry, In Firefox you’d need to use storage.local, which holds JSON data:

#7

http://prnt.sc/chk3ji - I have such code in popup.js and in content-script.js. So when I click some button in popup I trigger some options and write them in my storage object. After this I send message and listen it in content-script.js. These parameters go to content scripts well and I receive console message with current state of my changed parameters. But when I try to get my storage object after reopening my popup I get only empty object without my saved parameters… How can I solve this?
PS: I am not very good developer and I may not know some points of javascript…

#8

Storage.get() gives you a copy of the storage content. Changing that copy won’t change the stored values. Use Storage.set() to do so.
(Btw, content scripts can access the storage themselves)

#9

Found this solution:

chrome.runtime.getBackgroundPage((page) => {
  if (page.popupContent) {
    document.querySelector("#content").value = page.popupContent;
  }
});

function setState() {
  console.log(document.querySelector("#content").value);
  chrome.runtime.getBackgroundPage((page) => {
    page.popupContent = document.querySelector("#content").value;
  });
}

document.querySelector("#content").addEventListener("keyup", setState, false);

( Post on GitHub )