如何創建一個開關/復選框來打開或關閉 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;
}