JS background script doesn't start on refresh

Losiox 0
Viewed 34

I'm trying to implement dark mode feature to my extension and now I'm facing a problem with dark mode after reloading. When I click on the button it changes the website perfectly but after a refresh of the site, I need to click on the extension icon so my saved option can be loaded. Here is content of background.js and manifest.json has "background": { "scripts": [ "background.js" ]. Using chrome.storage.local.set and chrome.storage.local.get gives me error on console. I hope everything is clear :D


const darkModeToggle = document.querySelector('.button_mode');

const enableDarkMode = () => { 
 
 chrome.tabs.executeScript({
   file: 'appOn.js'
})
 localStorage.setItem('darkMode', 'enabled');
}

const disableDarkMode = () => {  
 chrome.tabs.executeScript({
   file: 'appOff.js'
})
 
 localStorage.setItem('darkMode', null);
}


if (darkMode === 'enabled') {
 enableDarkMode();
} 
darkModeToggle.addEventListener('click', () => {

 darkMode = localStorage.getItem('darkMode'); 
 
 if (darkMode !== 'enabled') {
   enableDarkMode();
 } else {  
   disableDarkMode(); 
 }
});

permissions from manifest

"permissions": [
    "tabs",
    "downloads",
    "webNavigation",
    "http://*/*",
    "https://*/*", 
    "downloads",
    "storage"
  ]
google-chrome-extension javascript
1 Answers

The problem is with your background.js script. At the point where you're doing darkMode === 'enabled', darkMode variable isn't initialised yet. It should read the already saved preference from the localStorage on page load. To fix this, you could look at chrome.webNavigation.onCompleted event. The code should look like this now:

const darkModeToggle = document.querySelector('.button_mode');

const enableDarkMode = () => { 
  chrome.tabs.executeScript({
    file: 'appOn.js'
  })
  localStorage.setItem('darkMode', 'enabled');
}

const disableDarkMode = () => {  
  chrome.tabs.executeScript({
    file: 'appOff.js'
  })
  localStorage.setItem('darkMode', null);
}

chrome.webNavigation.onCompleted.addListener(
  (details) => {
    darkMode = localStorage.getItem('darkMode');
    if (darkMode === 'enabled') {
      enableDarkMode();
    }
  }
)

darkModeToggle.addEventListener('click', () => {
  darkMode = localStorage.getItem('darkMode');
  if (darkMode !== 'enabled') {
    enableDarkMode();
  } else {  
    disableDarkMode(); 
  }
});
user3uh80
Related