Chrome扩展暗黑模式刷新失效，Background脚本及Storage调用异常求助

核心问题 #

1. 后台脚本操作DOM错误：你把popup按钮的DOM操作写在了background.js里，但后台脚本运行在独立的背景环境，无法访问popup的DOM元素，这部分逻辑必须放在popup对应的JS文件中。
2. 存储方案错误：localStorage无法在扩展的后台、popup、内容脚本之间共享数据，应该改用Chrome扩展官方的chrome.storage.localAPI，且该API是异步的，不能像localStorage那样同步调用。
3. 缺少页面加载监听：没有监听页面刷新/加载完成事件，导致刷新后无法自动应用已保存的暗黑模式设置，必须点击扩展图标触发popup代码才生效。

修正后的代码实现 #

1. 新增popup.html（扩展弹出界面）

<!DOCTYPE html>
<html>
<head>
  <style>
    .button_mode { padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; }
  </style>
</head>
<body>
  <button class="button_mode">切换暗黑模式</button>
  <script src="popup.js"></script>
</body>
</html>

2. 重构popup.js（处理按钮交互与存储）

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

// 初始化按钮显示状态
chrome.storage.local.get('darkMode', (result) => {
  const darkMode = result.darkMode;
  darkModeToggle.textContent = darkMode === 'enabled' ? '关闭暗黑模式' : '开启暗黑模式';
});

const enableDarkMode = () => {
  // 向当前激活标签页注入启用脚本
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.tabs.executeScript(tabs[0].id, {file: 'appOn.js'});
  });
  chrome.storage.local.set({darkMode: 'enabled'});
  darkModeToggle.textContent = '关闭暗黑模式';
};

const disableDarkMode = () => {
  // 向当前激活标签页注入禁用脚本
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.tabs.executeScript(tabs[0].id, {file: 'appOff.js'});
  });
  chrome.storage.local.set({darkMode: null});
  darkModeToggle.textContent = '开启暗黑模式';
};

// 按钮点击事件监听
darkModeToggle.addEventListener('click', () => {
  chrome.storage.local.get('darkMode', (result) => {
    const darkMode = result.darkMode;
    darkMode !== 'enabled' ? enableDarkMode() : disableDarkMode();
  });
});

3. 修正background.js（监听页面加载自动应用设置）

// 监听页面加载完成事件，自动注入对应脚本
chrome.webNavigation.onCompleted.addListener((details) => {
  // 排除Chrome内部页面
  if (!details.url.startsWith('chrome://')) {
    chrome.storage.local.get('darkMode', (result) => {
      const scriptFile = result.darkMode === 'enabled' ? 'appOn.js' : 'appOff.js';
      chrome.tabs.executeScript(details.tabId, {file: scriptFile});
    });
  }
}, {url: [{urlMatches: 'http://*/*'}, {urlMatches: 'https://*/*'}]});

// 监听标签页更新事件，覆盖页面刷新等场景
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && !tab.url.startsWith('chrome://')) {
    chrome.storage.local.get('darkMode', (result) => {
      const scriptFile = result.darkMode === 'enabled' ? 'appOn.js' : 'appOff.js';
      chrome.tabs.executeScript(tabId, {file: scriptFile});
    });
  }
});

4. 更新manifest.json（确保popup配置正确）

{
  "manifest_version": 2,
  "name": "暗黑模式扩展",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs",
    "downloads",
    "webNavigation",
    "http://*/*",
    "https://*/*",
    "storage"
  ]
}

关键说明 #

• 所有DOM操作必须放在popup的JS文件中，后台脚本仅负责监听全局事件和跨页面逻辑。
• 统一使用chrome.storage.local存储设置，确保扩展各上下文（后台、popup、内容脚本）能共享数据。
• 通过webNavigation.onCompleted和tabs.onUpdated监听页面加载/刷新事件，实现自动应用暗黑模式设置，无需手动点击扩展图标。

内容的提问来源于stack exchange，提问作者Losiox