Chrome Extension Popup Resets On Closing

user_7763082 0
Viewed 462

I'm trying to figure out how to make a play/pause functionality for my chrome extension. I've figured it out and it works however, for usability I now am trying to get the popup window to:

  1. Keep the checkbox checked if it was before closing the popup.
  2. Keep the content that popup.js wrote into a span tag before closing the popup.

My popup.html is:

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

And my popup.js is:

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

I set have to set the value in storage as I also use the value to do other code on content-script file.

Basically where the line that writes the innerHTML and then the line that sets the checkbox to checked run fine when the popup is open and then as soon as you close the popup and reopen obviously the session resets.

I know it needs something like this in the popup.js instead but I am not quite sure what to put in the function in the background.js as I can't/don't know how to access the popup DOM from background.js:

    var backgroundPage = chrome.runtime.getBackgroundPage();
    backgroundPage.savePopup();
google-chrome-extension javascript
1 Answers

I don't know how extension storage works but here's a demo which works with local storage. Maybe it can help you with the extension.

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);
    
    
    });
});
user_5590790
Related