Chrome扩展Manifest V3：网页标签与扩展界面的数据传递问题

方法1：Popup主动请求数据 #

当Popup打开时，主动向Background或存储模块获取已保存的页面标题。

实现步骤： #

1. 在Background中存储数据
   优先用chrome.storage.local存储（避免Background Service Worker闲置回收导致内存数据丢失）：

   // background.js
   chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message.type === 'sendTitle') {
       chrome.storage.local.set({ pageTitle: message.title });
     }
   });
   

2. Popup启动时获取数据
   在Popup的JS中，页面加载完成后读取存储或向Background请求：

   // popup.js
   document.addEventListener('DOMContentLoaded', () => {
     // 方式1：直接读取存储
     chrome.storage.local.get('pageTitle', (result) => {
       if (result.pageTitle) {
         document.getElementById('title-display').textContent = result.pageTitle;
       }
     });
   
     // 方式2：向Background请求内存中的数据（需Background维护变量）
     chrome.runtime.sendMessage({ type: 'getTitle' }, (response) => {
       if (response.title) {
         document.getElementById('title-display').textContent = response.title;
       }
     });
   });
   

   对应的Popup HTML结构：

   <!-- popup.html -->
   <div>当前页面标题：<span id="title-display"></span></div>
   <script src="popup.js"></script>
   

   若用方式2，需在Background中添加消息监听：

   // background.js
   let currentPageTitle = '';
   
   chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message.type === 'sendTitle') {
       currentPageTitle = message.title;
     } else if (message.type === 'getTitle') {
       sendResponse({ title: currentPageTitle });
     }
     return true; // 异步响应必须返回true，否则sendResponse会失效
   });
   

方法2：Background主动推送数据到Popup #

如果需要标题更新时实时同步到已打开的Popup，可通过存储变化监听实现：

// popup.js
document.addEventListener('DOMContentLoaded', () => {
  // 初始化获取数据
  chrome.storage.local.get('pageTitle', (result) => {
    updateTitle(result.pageTitle);
  });

  // 监听存储变化，实时更新界面
  chrome.storage.onChanged.addListener((changes, areaName) => {
    if (areaName === 'local' && changes.pageTitle) {
      updateTitle(changes.pageTitle.newValue);
    }
  });
});

function updateTitle(title) {
  document.getElementById('title-display').textContent = title || '无数据';
}

关键注意点 #

• Manifest V3的Background是Service Worker，内存数据会在闲置时被回收，优先使用chrome.storage.local做持久化存储。
• 消息传递时要明确类型标识（如type: 'sendTitle'），避免不同业务消息混淆。
• 异步响应消息时，Background的onMessage回调必须返回true，确保sendResponse能正常执行。

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