如何创建开关/复选框来打开或关闭 chrome 扩展？

Question

我正在创建一个 chrome 扩展，它有一个内容脚本，可以更改它使用正则表达式找到的 dom 文本元素的样式。 我希望扩展的弹出窗口具有关闭后保存状态的开关。

例如 - 在弹出菜单中打开和关闭扩展程序的开关。

根据我在网上阅读的内容，我必须使用chrome.storage 来保存复选框的状态，但我不太明白如何在 popup.js 中读取复选框的状态以及如何存储它.

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);

}

我不太确定该示例是否需要 CSS。

Answer 1

您需要检查元素的checked 属性。

const checkbox = document.getElementById("checkbox"),
text = document.getElementById("text");

checkbox.onchange = function() {
  //this is referring to checkbox
  text.innerHTML = this.checked;
};

<input type="checkbox" id="checkbox" />
<p id="text">false</p>

对于存储值，这里是来自google 的示例：

//setting data
chrome.storage.sync.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

//getting data 
chrome.storage.sync.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

Answer 2

另外，您可以这样做并将主题存储在本地存储中

<div class="switchtodark ">
            <span>SWITCH TO <a href="javascript:change()" id="dark">DARK</a></span>
        </div>

function change() {
    const darkMode = document.getElementById("dark");

    darkMode.addEventListener('click', () => {
        document.body.classList.toggle('dark');
        localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
    });

};
if (localStorage.getItem('theme') === 'dark') {
    document.body.classList.add('dark');
}

CSS

.maintext h1 {
  font-size: 120px;
  z-index: 1000;
  color: #171717;
}

.dark .maintext h1 {
  color: white;
}