title: Chrome extension State management
body: <p>I am currently making a chrome extension (This is my first chrome extension) that you can take small notes with and want to keep the user input. I am keeping the user input inside of input classes. How would I be able to store the chrome extension state so that when I reopen it, it will stay the same? Here is the code that I have written so far.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//selectors
  const addbutton = document.querySelector(".add");
  const addlist = document.querySelector(".note-list");
  const noteList = document.querySelector(".note-list")
  
  //event listners
  addbutton.addEventListener('click', addNote);
  
  //functions
  function addNote(event){
      //prevent page refresh
      event.preventDefault();
      //note div
      const noteDiv = document.createElement('div');
      noteDiv.classList.add('note');
      //create li
      const newNote = document.createElement('li');
      newNote.classList.add('noteitem');
      noteDiv.appendChild(newNote);
      //create input
      const newInput = document.createElement('input');
      newInput.classList.add('noteInput')
      newNote.appendChild(newInput);
      //append to list
      noteList.appendChild(noteDiv);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&amp;display=swap');
  *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      outline: none;
  }
  body{
      height: 500px;
      width: 400px;
  }
  
  h1{
      font-family: "Montserrat", sans-serif;
      font-size: 20px;
      font-weight: lighter;
      padding-top: 10px;
      padding-bottom: 10px;
      
  }
  main{
      text-align: center;
  }
  .title{
      box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.685);
  }
  .mainpage{
      padding-top: 20px;
  }
  
  .add{
      font-family: "Montserrat", sans-serif;
      font-size: 25px;
      font-weight: 400px;
      background-color: #00FF33;
      width:40px ;
      height: 40px;
      border-radius: 10px;
      border: none;
      transition: ease 0.5s;
  }
  
  .add:hover{
      background-color: #00c026;
  }
  
  .note-container{
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .note-list{
      min-width: 30%;
      list-style: none;
  }
  
  .note{
      margin: 0.5rem;
      background: whitesmoke;
      font-size: 1.5rem;
      display: flex;
      justify-content: space-between;
      border-radius: 7px;
  }
  .noteitem{
      padding: 0.5rem 2rem;
  }
  
  .noteInput{
      display: block;
      margin-right: auto;
      margin-left: auto;
      border: none;
      background-color: whitesmoke;
      font-size: 20px;
      max-height: 200px;
      
  }
  
  .note li{
      flex: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Mini Note&lt;/title&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;main&gt;
          &lt;div class="title"&gt;
              &lt;h1&gt;Mini note app&lt;/h1&gt;
          &lt;/div&gt;
          &lt;section class="mainpage"&gt;
              &lt;button class="add"&gt;+&lt;/button&gt;
              &lt;div class="note-container"&gt;
                  &lt;ul class="note-list"&gt;&lt;/ul&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/main&gt;
      &lt;script src="/popup.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thank you</p>