Chrome扩展Manifest V3本地存储读取及响应头获取问题求助

问题一：Content Script读取本地存储返回undefined的解决 #

你在Popup中通过chrome.storage.local.set保存输入值，但Content Script读取时始终得到undefined，可按以下步骤排查解决：

1. 确认存储是否成功触发
   先检查saveValue函数是否被正确调用——比如输入框的change或submit事件有没有绑定。可以打开Chrome扩展管理页（chrome://extensions/），进入你的扩展详情→「查看视图」→「Storage」，查看valuesInput是否存在对应值。如果没有，说明保存逻辑未执行，先补全事件绑定：

   // popup.js中添加输入框事件监听
   document.getElementById('values-input').addEventListener('blur', (e) => {
     saveValue(e.target.value);
   });
   

2. Content Script中正确读取存储
   chrome.storage.local.get是异步操作，必须通过回调或async/await处理，不能同步取值：

   // Content Script中读取（回调写法）
   chrome.storage.local.get('valuesInput', (result) => {
     if (result.valuesInput) {
       console.log('读取到的值:', result.valuesInput);
     } else {
       console.log('未找到存储的值');
     }
   });
   
   // 或async/await写法（更简洁）
   async function getSavedValue() {
     const result = await chrome.storage.local.get('valuesInput');
     return result.valuesInput;
   }
   // 调用示例
   getSavedValue().then(val => console.log(val));
   

3. 确认权限配置
   确保manifest.json中已正确声明storage权限：

   {
     "permissions": ["storage"]
   }
   

问题二：获取当前标签页完整响应头并展示 #

Popup中直接获取响应头会拿到自身上下文的内容，无法获取目标网页的响应头，需借助webRequestAPI在Service Worker中监听处理：

1. 更新manifest.json权限配置
   添加webRequest、tabs权限及目标域名的主机权限：

   {
     "manifest_version": 3,
     "background": {
       "service_worker": "background.js"
     },
     "permissions": ["webRequest", "tabs"],
     "host_permissions": ["<all_urls>"] // 可替换为你需要监听的特定域名，如"https://*/*"
   }
   

2. Service Worker中监听并存储响应头
   在background.js中监听主文档请求的响应头，按标签ID存储：

   const tabHeaders = {};
   
   // 监听响应头接收事件
   chrome.webRequest.onHeadersReceived.addListener(
     (details) => {
       // 只处理主文档请求（过滤资源请求）
       if (details.type === 'main_frame') {
         tabHeaders[details.tabId] = details.responseHeaders;
       }
     },
     { urls: ["<all_urls>"] },
     ["responseHeaders"] // 指定需要获取的字段
   );
   
   // 接收Popup的消息请求，返回对应标签页的响应头
   chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if (request.action === 'getHeaders') {
       chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
         const activeTabId = tabs[0].id;
         sendResponse(tabHeaders[activeTabId] || null);
       });
       return true; // 标记为异步响应
     }
   });
   

3. Popup中请求响应头并传递给Content Script
   在popup.js中获取响应头，再通知Content Script在页面DOM中添加展示元素：

   document.addEventListener('DOMContentLoaded', async () => {
     const headers = await chrome.runtime.sendMessage({ action: 'getHeaders' });
     if (headers) {
       // 查找cache-control字段
       const cacheControl = headers.find(header => header.name.toLowerCase() === 'cache-control');
       if (cacheControl) {
         // 发送消息给Content Script，让其在页面中展示
         chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
           chrome.tabs.sendMessage(tabs[0].id, {
             action: 'showCacheControl',
             value: cacheControl.value
           });
         });
       }
     }
   });
   

4. Content Script中添加DOM元素展示
   在content.js中接收消息，创建悬浮div展示字段值：

   chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if (request.action === 'showCacheControl') {
       const div = document.createElement('div');
       div.style.cssText = `
         position: fixed;
         top: 10px;
         right: 10px;
         padding: 10px 15px;
         background: #ffffff;
         border: 1px solid #e0e0e0;
         border-radius: 4px;
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         z-index: 99999;
         font-size: 14px;
       `;
       div.textContent = `Cache-Control: ${request.value}`;
       document.body.appendChild(div);
     }
   });
   

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