如何在Chrome扩展页面与弹窗之间共享存储？

方法1：直接使用chrome.storage.local（最推荐） #

你提到的“隔离环境”是个误解——同一个扩展下的所有页面（包括index.html、popup.html、service worker等）都属于同一个扩展上下文，完全可以直接访问同一个chrome.storage.local实例，这是最直接高效的方案。

实现步骤： #

1. 在manifest.json中声明storage权限：

{
  "permissions": ["storage"]
}

2. index.html的JS代码存储表单数据：

// index.html中的脚本
document.querySelector('#submit-btn').addEventListener('click', () => {
  const formData = {
    a: document.querySelector('#field-a').value,
    b: document.querySelector('#field-b').value,
    c: document.querySelector('#field-c').value
  };
  chrome.storage.local.set({ formData }, () => {
    console.log('表单数据已存储');
  });
});

3. popup.html的JS代码读取并显示数据：

// popup.html中的脚本
document.addEventListener('DOMContentLoaded', () => {
  chrome.storage.local.get('formData', (result) => {
    if (result.formData) {
      document.querySelector('#show-a').textContent = result.formData.a;
      document.querySelector('#show-b').textContent = result.formData.b;
      document.querySelector('#show-c').textContent = result.formData.c;
    }
  });
});

如果需要实时同步（比如index.html修改数据后，已打开的popup自动更新），可以监听存储变更事件：

// popup中添加监听
chrome.storage.onChanged.addListener((changes, areaName) => {
  if (areaName === 'local' && changes.formData) {
    const newData = changes.formData.newValue;
    document.querySelector('#show-a').textContent = newData.a;
    // 更新其他字段
  }
});

方法2：使用Chrome扩展消息传递机制 #

如果需要主动触发数据传递（比如index.html提交表单后立即通知popup），可以用扩展的消息API：

场景1：index.html主动向已打开的popup发送数据 #

// index.html提交表单后发送消息
chrome.runtime.sendMessage({ 
  type: 'formUpdated', 
  data: { a, b, c } 
}, (response) => {
  response && console.log('popup已接收数据');
});

// popup中监听消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'formUpdated') {
    document.querySelector('#show-a').textContent = message.data.a;
    // 更新其他字段
    sendResponse({ status: 'success' });
  }
});

场景2：popup打开时主动向index.html请求数据 #

如果index.html页面处于打开状态，popup可以主动请求最新数据：

// popup中的脚本
document.addEventListener('DOMContentLoaded', () => {
  // 获取扩展内的index.html页面实例
  chrome.runtime.getViews({ type: 'tab' }).forEach(view => {
    if (view.location.href.includes('/public/index.html')) {
      view.postMessage({ type: 'requestFormData' }, '*');
    }
  });
});

// 监听index.html返回的消息
window.addEventListener('message', (event) => {
  if (event.data.type === 'formDataResponse') {
    document.querySelector('#show-a').textContent = event.data.data.a;
    // 更新其他字段
  }
});

// index.html中的脚本
window.addEventListener('message', (event) => {
  if (event.data.type === 'requestFormData') {
    const formData = {
      a: document.querySelector('#field-a').value,
      b: document.querySelector('#field-b').value,
      c: document.querySelector('#field-c').value
    };
    event.source.postMessage({ type: 'formDataResponse', data: formData }, event.origin);
  }
});

方法3：使用Service Worker作为中间层 #

如果需要更复杂的状态管理，可以借助扩展的Service Worker中转数据：

// index.html提交表单后发送消息给Service Worker
chrome.runtime.sendMessage({ 
  type: 'saveFormData', 
  data: { a, b, c } 
});

// service-worker.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'saveFormData') {
    chrome.storage.local.set({ formData: message.data });
  } else if (message.type === 'getFormData') {
    chrome.storage.local.get('formData', (result) => {
      sendResponse(result.formData);
    });
    return true; // 异步响应需返回true
  }
});

// popup中向Service Worker请求数据
document.addEventListener('DOMContentLoaded', () => {
  chrome.runtime.sendMessage({ type: 'getFormData' }, (formData) => {
    formData && (document.querySelector('#show-a').textContent = formData.a);
    // 更新其他字段
  });
});

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