How to create a switch / checkbox to turn on or off a chrome extension?

I am creating a chrome extension that has a content script that changes the style of dom text elements that it finds with regex. I want the popup of the extension to have switches that save state after closing.

For example - a turn on and off switches for the extension in the popup menu.

From what I've read online, I have to use chrome.storage to save the state of the checkboxes but I don't quite get how to read the state of the checkbox in the popup.js and how to store it.

HTML

 <input class = "power-switch" type="checkbox" id="toggle"/>
      <div class="toggle-wrap">
        <div style= "text-align: right;width: 190px;font-weight: bolder;">ON / OFF</div>
        <label class= "toggle-label"for="toggle"></label>
      </div>

CSS

*,
*::before,
*::after {
  transition: 400ms all ease-in-out 50ms;
  box-sizing: border-box;
  backface-visibility: hidden;
}

input[type="checkbox"] {
  display: none;
}

a{ color: rgba(43,43,43,1); text-decoration: none; padding: 10px; border-bottom: 2px solid rgba(43,43,43,1); }

a:hover{ background: rgba(43,43,43,1); color: rgba(255,255,255,1); }


/*Button is :CHECKED*/

input[type="checkbox"]:checked ~ div {
  background: rgba(73,168,68,1);
  box-shadow: 0 0 2px rgba(73,168,68,1);
}

input[type="checkbox"]:checked ~ div label {
  left: 27px;
  /* 110px */
  transform: rotate(360deg);
}


/*shared*/

.toggle-wrap,
.toggle-label {
  border-radius: 50px;
}


/*'un':checked state*/

.toggle-wrap {
  height: 26px;
  width: 50px;
  background: rgba(43, 43, 43, 1);
  position: relative;
  /* top: calc(50vh - 50px);
  left: calc(50vw - 100px); */

  box-shadow: 0 0 2px rgba(43,43,43,1);

}

.toggle-label {
  height: 20px;
  /* 80 */
  width: 20px;
  /* 80 */
  background: rgba(255, 255, 255, 1);
  position: absolute;
  top: 3px;
  /* 10 */
  left: 3px;
  /* 10 */
  cursor: pointer;
}

.toggle-label::before {
  content: '';
  height: 16px;
  /* 60 */
  width: 4px;
  position: absolute;
  top: calc(50% - 8px);
  /* - 30 px*/
  left: calc(50% - 2px);
  /*- 2.5px */
  transform: rotate(45deg);
}

.toggle-label::after {
  content: '';
  height: 4px;
  width: 16px;
  /* 60 */
  position: absolute;
  top: calc(50% - 2px);
    /*- 2.5px */
  left: calc(50% - 8px);
    /* - 30 px*/
  transform: rotate(45deg);
}

.toggle-label::before,
.toggle-label::after{
  background: rgba(43,43,43,1);
  border-radius: 5px;
}

/* pesduo class on toggle */

input[type="checkbox"]:checked ~ .toggle-wrap .toggle-label::before{
  height: 14px;
    /* 50px */
    top: calc(55% - 7px);
    /* 25px */
    left: calc(60% - 2.5px);
    background: rgba(73,168,68,1);
}
input[type="checkbox"]:checked ~ .toggle-wrap .toggle-label::after{
  width: 7px;
  /* 20px */
      top: calc(95% - 9px);
      /* -25px */
      left: calc(22.5% - 2px);
      /* 2.5px */
      background: rgba(73,168,68,1);

}

I'm not quite sure if the CSS is needed for the the example.