0

I am writing a chrome extension and trying to implement a toggled button that will turn the extension on and off. However, when I run my chrome extension and click the button, nothing happens. I am currently stuck on what I'm doing wrong, and I would really appreciate your input. Thanks! Here are my files:

popup.js:

let changeColor = document.getElementById('changeColor');

chrome.storage.sync.get('color', function(data) {
  changeColor.style.backgroundColor = data.color;
  changeColor.setAttribute('value', data.color);
});


document.getElementById("buttonclick").addEventListener("click", handler)

function handler()
{
    chrome.storage.local.get({count: 0}, function (result) {
        var count = result.count;
        var property = document.getElementById('buttonclick');
        if (count == 0) {
            property.style.backgroundColor = "#4f8ff7"
            property.innerHTML = "<span>Test 1</span>"
            count = 1;
        }
        else {
            property.style.backgroundColor = "#a84237"
            property.innerHTML = "<span>Test 2</span>"
            count = 0;
        }
        chrome.storage.local.set({count: count});
    });
}

popup.html:

<!DOCTYPE html>
<html>
  <head>
  <link rel="StyleSheet" type="text/css" href="style_popup.css"/>
  </head>
  <body>
    <div class="navbar">
      <a href="mainpage.html" target = "_blank" class="active">View My Dashboard</a>
    </div>
    <h1 class="center">[Title]</h1>
    <button class="button" id="buttonclick" onclick="handler()">
      <span>Test 1</span>
    </button>
    <br> <img src="green_circle.jpg" height="140" width="150" id="centerimage"> <br>
    <p class="center"> [Title] is running! </p>
    <script src="popup.js" />
  </body>
</html>

Screenshot of my extension: Extension (the issue is that the Test 1 button isn't changing state)

s.kuznetsov
  • 13,325
  • 3
  • 8
  • 21
Vishnu Iyengar
  • 11
  • 1
  • The question is not why the button is not changing but why the `count` variable is always `0`. Try to focus on the local storage. You can investigate using the developer tools. There is the Application tab in it, where you can look at what is in the local storage. – Petr Fiedler Mar 04 '21 at 03:49

0 Answers0