Chrome扩展程序：弹出窗口重新打开时记住复选框的值 [英] Chrome Extension: Remembering a checkbox value when popup is reopened

问题描述

新手这里很抱歉，如果这是非常基本的。我做了一个扩展，加载时只有一个复选框/开关。第一次打开它时将被取消选中，但当扩展程序关闭并重新打开时，我希望显示它是否已被检查。

复选框在background.js中启动一个计时器并取消选中它。除了保存复选框的状态以外，我还有所有这些工作。

弹出窗口的相关HTML

 < div class =onoffswitch> 
< input type =checkboxname =onoffswitchclass =onoffswitch-checkboxid =notification/> 
< label class =onoffswitch-labelfor =notification> 
< span class =onoffswitch-inner>< / span> 
< span class =onoffswitch-switch>< / span> 
< / label> 
< / div> 
  

popup.js的相关部分

 document.addEventListener（'DOMContentLoaded'，function（）{
 document.getElementById（notification）。addEventListener（'click'，runTimer）; 
 console.log （DOM已加载）; 
}）; 
 
函数runTimer（）{... 
  

在html中，my复选框设置为未选中。我正忙着把它放到popup.js中。

$ p $ var switchState = document.getElementById（notification）。checked;
chrome.storage.sync.set（{$ b $'value'：switchState
}，function（）{
console.log（Switch Saved as+ switchState）;
}）;

如果我关闭并重新打开扩展程序，我可以保存复选框值。我的问题是，当我打开扩展名时，html接管并从头开始创建复选框，未选中。

如果我知道扩展名已经打开过一次，所以我现在应该使用从上次打开它时的复选框值？复制代码从 Google的选项示例并将其转换为适合您的代码：

  //使用存储在chrome.storage.sync中的首选项恢复复选框状态
函数restoreOptions（）{
 //使用默认值=假。 
 chrome.storage.sync.get（{
 value：false 
}，function（items）{
 document.getElementById（'notification'）。checked = items.value; 
}）; 
} 
  

然后你的 DOMContentLoaded 处理函数变为：

$ p $ document.addEventListener（'DOMContentLoaded'，function（）{
restoreOptions（）;
document.getElementById（notification）。addEventListener（'click'，runTimer）;
console.log（DOM Loaded）;
}）;


请注意，使用 chrome.storage.sync 会将复选框的状态存储在您计算机上不同的Chrome浏览器中，但不会与该人员同步。您可能希望使用 chrome.storage.local 来限制复选框状态到该机器的存储。此外，您可能希望在Chrome启动时第一次运行扩展程序时清除状态。

Newbie here so sorry if this is pretty elementary. I'm making an extension that simply has a checkbox/switch when loaded. It is to be unchecked the first time you open it but when the extension is closed and reopened, I would like it to display whether it was checked or not.

The checkbox starts a timer in the background.js and unchecking it stops it. I have all this working, except to save the state of the checkbox

Relevant HTML for the popup

<div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="notification" />
            <label class="onoffswitch-label" for="notification">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div>

Relevant part of popup.js

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("notification").addEventListener('click', runTimer);
    console.log("DOM Loaded");
});

function runTimer() {...

In the html, my checkbox is set to unchecked. I was toying around with putting this into the popup.js

var switchState = document.getElementById("notification").checked;
    chrome.storage.sync.set({
        'value' : switchState
    }, function () {
        console.log("Switch Saved as " + switchState);
    });

I figure that would save the checkbox value so I could use it if I closed and reopened the extension. My issue is though that when I open the extension, the html takes over and creates the checkbox from scratch, unchecked.

How do I override this if I know that the extension has been opened once before and so I should now use the checkbox value from when I last had it open?

解决方案

Copying the code from Google's options example and transforming it to fit your code:

// Restores checkbox state using the preferences stored in chrome.storage.sync
function restoreOptions() {
    // Use default value = false.
    chrome.storage.sync.get({
        value: false
    }, function (items) {
        document.getElementById('notification').checked = items.value;
    });
}

Then your DOMContentLoaded handler becomes:

document.addEventListener('DOMContentLoaded', function () {
    restoreOptions();
    document.getElementById("notification").addEventListener('click', runTimer);
    console.log("DOM Loaded");
});

Note that the use of chrome.storage.sync will store the state of the checkbox across not only different runs of Chrome on your machine, but all those which sync with that person. You may desire to use chrome.storage.local to limit storage of the checkbox state to that machine. In addition, you may desire to clear the state when the extension first runs when Chrome is started.

这篇关于Chrome扩展程序：弹出窗口重新打开时记住复选框的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！