JS 后台脚本不会在刷新时启动答案

【问题标题】：JS background script doesn't start on refreshJS 后台脚本不会在刷新时启动
【发布时间】：2022-09-24 20:51:07
【问题描述】：

我正在尝试为我的扩展程序实现暗模式功能，现在我在重新加载后面临暗模式问题。当我单击按钮时，它会完美地更改网站，但在刷新网站后，我需要单击扩展图标，以便可以加载我保存的选项。这是 background.js 的内容，manifest.json 有 \"background\": { \"scripts\": [ \"background.js\" ]。使用 chrome.storage.local.set 和 chrome.storage.local.get 在控制台上出现错误。我希望一切都清楚：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\": [
    \"tabs\",
    \"downloads\",
    \"webNavigation\",
    \"http://*/*\",
    \"https://*/*\", 
    \"downloads\",
    \"storage\"
  ]

在 ManifestV2 扩展中，您可以使用 chrome.declarativeContent API 和 RequestContentScript 操作来使内容脚本自动运行。在 ManifestV3 中，它只是在 chrome.scripting API 中注册内容脚本和取消注册内容脚本。

标签： javascript google-chrome-extension

【解决方案1】：

问题在于您的 background.js 脚本。在您执行darkMode === 'enabled' 时，darkMode 变量尚未初始化。它应该在页面加载时从localStorage 读取已保存的首选项。要解决此问题，您可以查看 chrome.webNavigation.onCompleted 事件。代码现在应该如下所示：

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

【讨论】：