Question

我想弄清楚如何为我的 chrome 扩展程序创建播放/暂停功能。我已经想通了，但它可以工作，但是为了可用性，我现在试图让弹出窗口：

如果在关闭弹出窗口之前选中该复选框。
在关闭弹出窗口之前，将 popup.js 写入的内容保留到 span 标签中。

我的 popup.html 是：

    <script src="popup.js"></script>
    <div class="container">
        <div class="checkbox">
            <p>Check the box to pause the extension</p>
            <input type="checkbox" id="switcher" name="switcher">
            <p><span id="extensionStatus"></span></p>
        </div>
        <a id="submit" href="#">Save</a>
    </div>

我的 popup.js 是：

    document.addEventListener('DOMContentLoaded', function() {
        var link = document.getElementById('submit');
        link.addEventListener('click', function() {
            var status;
            var switcher = document.getElementById('switcher');
            var updateStatus = document.getElementById("extensionStatus");

            if(switcher.checked == true) {
                status = "paused";
            } else {
                status = "play";
            }

            chrome.storage.sync.set({'status': status});

            chrome.storage.sync.get('status', function (result) {
                status = result.status;
                updateStatus.innerHTML = "Current Status: " + status;

                if(status == "paused") {
                    switcher.checked = true;
                }
            });
        });
    });

我设置必须在存储中设置值，因为我还使用该值在内容脚本文件上执行其他代码。

基本上，当弹出窗口打开时，写入innerHTML的行和将复选框设置为选中的行运行正常，然后一旦关闭弹出窗口并重新打开，会话就会重置。

我知道它在 popup.js 中需要类似的东西，但我不太确定在 background.js 中的函数中放什么，因为我不能/不知道如何从背景.js：

    var backgroundPage = chrome.runtime.getBackgroundPage();
    backgroundPage.savePopup();

Answer 1

我不知道扩展存储是如何工作的，但这里有一个适用于本地存储的演示。也许它可以帮助您进行扩展。

Demo

document.addEventListener('DOMContentLoaded', function() {

    if (localStorage.getItem('status') == 'paused') {
      switcher.checked = true;
    }
    
    var link = document.getElementById('submit');
    
    link.addEventListener('click', function() {
    
      var status;
      var switcher = document.getElementById('switcher');
      var updateStatus = document.getElementById("extensionStatus");
    
      console.log('staus:', localStorage.getItem('status'));
    
    
      if (switcher.checked == true) {
        status = "paused";
      } else {
        status = "play";
      }
    
      localStorage.setItem('status', status);
    
    
    });
});

Chrome 扩展弹出窗口在关闭时重置

1 个答案:

Demo