Chrome扩展localStorage跨组件状态无法保存的问题求助

我在Chrome扩展中通过popup的切换按钮控制所有标签页自定义按钮的显隐，使用background做中转，但遇到两个问题：

• 切换状态后，其他标签页按钮状态未同步
• 新标签页打开popup时，localStorage读取值为null，疑似读取时机过早

1. 替换localStorage为Chrome扩展全局存储API #

localStorage是上下文隔离的，popup、background、content script各自拥有独立的localStorage空间，这是状态不同步的核心原因。改用chrome.storage.local，它是扩展全局共享的存储。

修改popup.js的状态读写： #

document.addEventListener('DOMContentLoaded', function() {
  const toggleButton = document.getElementById('toggleButton');

  // 从全局存储获取初始状态并设置按钮
  chrome.storage.local.get('toggleButtonState', (result) => {
    const buttonState = result.toggleButtonState ?? true; // 默认显示按钮
    toggleButton.checked = !buttonState; // 对应原逻辑的buttonState = !toggleButton.checked
  });

  // 按钮点击事件
  toggleButton.addEventListener('click', function() {
    const buttonState = !toggleButton.checked;
    console.log('toggleButtonState in popup', buttonState);
    // 先更新全局存储，再通知后台转发状态
    chrome.storage.local.set({ toggleButtonState: buttonState }, () => {
      chrome.runtime.sendMessage({ type: 'toggleButtonState', buttonState });
    });
  });
});

修改background.js的消息处理： #

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.type === 'toggleButtonState') {
    console.log('toggleButtonState in background', request.buttonState);
    // 查询所有标签页
    chrome.tabs.query({}, function(tabs) {
      tabs.forEach(function(tab) {
        // 尝试发送消息，未注入content script则动态注入并执行状态设置
        chrome.tabs.sendMessage(tab.id, request, (error) => {
          if (error) {
            chrome.scripting.executeScript({
              target: { tabId: tab.id },
              func: (state) => {
                const button = document.getElementById('your-button-id'); // 替换为你的按钮ID
                button.style.display = state ? 'block' : 'none';
              },
              args: [request.buttonState]
            });
          }
        });
      });
    });
  }
});

修改bottom_button.js的状态处理： #

// 处理显隐逻辑
function handleToggleButtonMessage(showButton) {
  const button = document.getElementById('your-button-id'); // 替换为你的按钮ID
  button.style.display = showButton ? 'block' : 'none';
}

// 监听后台消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.type === 'toggleButtonState') {
    handleToggleButtonMessage(request.buttonState);
    console.log('toggleButtonState in bottom_button', request.buttonState);
  }
});

// 初始化时从全局存储获取状态
chrome.storage.local.get('toggleButtonState', (result) => {
  const initialState = result.toggleButtonState ?? true;
  console.log('initialButtonState', initialState);
  handleToggleButtonMessage(initialState);
});

2. 移除popup中重复的DOMContentLoaded监听 #

原popup代码中有两个DOMContentLoaded监听，会导致重复发送消息，合并为一个即可（如上面修改后的popup.js所示）。

3. 确保新标签页的content script能获取最新状态 #

新标签页打开时，content script初始化时直接从chrome.storage.local读取状态，不依赖popup的消息，这样即使popup没打开，新标签页也能正确显示按钮状态。

关键注意事项 #

• 在manifest.json中声明必要权限：

  "permissions": ["storage", "tabs", "scripting"]
  

• 如果content script通过content_scripts字段注入，确保匹配所有需要的URL；动态注入则需处理好注入时机。

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