React Chrome扩展中chrome.storage.sync存储数据无法读取问题求助

问题场景 #

使用React开发Chrome扩展时，遇到chrome.storage.sync存储的API密钥无法在content script中读取的问题。相关代码如下：

FormComponent.tsx（存储API密钥） #

import React,{useState,useEffect,useRef,useCallback} from "react";

export default function FormComponent() {
    const [apikey, setApikey] = useState('');
    const [isSending, setIsSending] = useState(false)
    const isMounted = useRef(true)
    
    useEffect(() => {
        chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
            const currentTabID = tabs.length === 0 ? 0 : tabs[0].id!;
            chrome.tabs.sendMessage(currentTabID, { access: true },response => {
                setIsSending(response);        
            });
          });        
    }, [])
    
    const sendRequest = useCallback(async () => {
      if (isSending) return
      setIsSending(true)
      // API请求逻辑
      if (isMounted.current)
        setIsSending(false)
    }, [isSending])
    
    const submitForm = (event: React.FormEvent<HTMLFormElement>) => {
      event.preventDefault();  
      chrome.storage.sync.set({'some_os_key': apikey}, function() {
        sendRequest();
      });         
    }

    return (
        <React.Fragment>
            <form onSubmit={submitForm}>
            <div className="mb-6">
                <label htmlFor="success" className="block mb-2 text-sm font-medium text-green-700 dark:text-green-500">Your apikey</label>
                <input 
                value={apikey}
                onChange={(e) => setApikey(e.target.value)}
                type="text"
                 id="success" 
                 className="bg-green-50 border border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-green-500" placeholder="apikey goes here.."/>
            </div>
            <div className="rounded-md shadow">
                <button 
                className="w-full flex items-center justify-center rounded-md border border-transparent bg-sky-500 px-5 py-1 text-sm font-medium text-white hover:bg-sky-600">🎁 Validate Key</button>
            </div>                
            </form>
        </React.Fragment>
    );
}

feature.ts（content script中读取密钥） #

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.access === true) {
    chrome.storage.sync.get(["some_so_key"], (result) => {
      console.log(`localstorage apikey goes here = ${JSON.stringify(result)}`);
    });
    return true;
  }
});

核心问题 #

存储时使用的键名是some_os_key，但读取时误用了拼写不同的some_so_key，导致无法匹配到对应的数据。

解决方法 #

1. 统一键名 #

将存储和读取的键名保持完全一致，建议使用语义化命名（比如api_key）避免拼写错误。

修改FormComponent.tsx中的存储代码

const submitForm = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();  
  // 统一键名为api_key（或自定义的一致名称）
  chrome.storage.sync.set({'api_key': apikey}, function() {
    sendRequest();
  });         
}

修改feature.ts中的读取代码

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.access === true) {
    // 和存储时的键名保持一致
    chrome.storage.sync.get(["api_key"], (result) => {
      console.log(`存储的API密钥：${JSON.stringify(result)}`);
    });
    return true;
  }
});

2. 额外检查（避免潜在问题） #

确保扩展manifest.json中已声明storage权限，否则chrome.storage.sync操作会静默失败：

{
  "permissions": ["storage", "tabs"]
}

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