[SOLVED] Clear storage data from popup when close browser

Clear storage data from popup when close browser

I want develop ( Chrome Extension with ) a popup with persistent data when close popup, but I want delete storage data when close browser.

This example save current status of button [start/stop] , but I want reset storage data when close the browser, how to delete storage data when close browser ?

Goal about this code example

When close popup save correctly status ( work )
When close browser, clean current status and set to start ( I need to implement )

I read this solution, but is not clear how to implement in my case

let button = document.querySelector('button');
let options = document.querySelector("#btn-start");

chrome.storage.local.get(['button'], function(status) {
    console.log('Value currently is ' + status.button);
    console.log(typeof(status.button))
      
    if ( status.button === 'Stop') {
        setButtonStop();
    }
});

button.addEventListener("click", changeButtonStatus);

function changeButtonStatus(){
    let buttonStatus = document.querySelector("button").innerText;
    let status = '';

      if ( buttonStatus === 'Start')
        status = setButtonStop();
    
    if ( buttonStatus === 'Stop')
        status = setButtonStart();    

    chrome.storage.local.set({button: status }, function() {
        console.log('Value is set to ' + [status]);
    });
}

function setButtonStop () {
    options.setAttribute("id", "btn-stop");
    button.innerText = "Stop"; 
    return button.innerText; 
}

function setButtonStart () {
    options.setAttribute("id", "btn-start");
    button.innerText = "Start";
    return button.innerText;
}

a:link,
a:visited,
a:hover,
a:active  {
    text-decoration: none;
} 

/* Popup Window */
#modal-popup {
    display: flex;
    flex-direction: column;
    background: gainsboro;
}

#btn-start button {
    width: 100%;
    background: green;
    color:white;
}

#btn-start button:active {
    border-color: green;
    background: rgb(0, 255, 0);
    color: black;
}

#btn-stop button {
    width: 100%;
    background: red;
    color:white;
}

#btn-stop button:active {
    border-color: red;
    background: rgb(148, 0, 0);
    color: rgb(255, 255, 255);
}



#btn-options button {
    width: 100%;
    background: white;
    border: 0;
}

#btn-options button:active {
    background-color: transparent;
    animation: rotate 5s infinite;
}

@keyframes rotate {
    0% {
      transform: rotate(-45deg)
    }
    100% {
      transform: rotate(45deg)
    }
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="app.css">
    <title>Popup</title>
</head>
<body>
    <div id="modal-popup">
        <div id="btn-start"><button type="button" name="control">Start</button></div>
        <div id="btn-options"><button type="button" name="options"><a href="#">⚙️</a></button><div>   
    </div> 
    <script src="popup.js"></script>
</body>
</html>

{
    "name": "popup tutorial #1",
    "description": "persistent data settings",
    "version": "0.0.1",
    "manifest_version": 3,
    "permissions": ["storage"],  
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "/images/16.png",
            "32": "/images/32.png",
            "48": "/images/48.png",
            "128": "/images/128.png"
        }
    }, 
    "icons": {
      "16": "/images/16.png",
      "32": "/images/32.png",
      "48": "/images/48.png",
      "128": "/images/128.png"
    }  
}

Solution

use chrome.storage.session instead chrome.storage.local