Chrome扩展问题：content script值无法传递至Background Script并持久化

核心问题梳理 #

1. 存储键名大小写不匹配 #

• Content Script中，存储用的是小写'key'，但获取时用的是大写"Key"，导致result.Key返回undefined。
• Background Script的消息监听逻辑里，接收的消息字段是大写Key，但存储时错误调用了小写message.key，导致存储操作无效。

2. 异步操作顺序错误 #

• Content Script中，chrome.storage.local.get未放在set的回调函数内，存储操作可能还未完成就执行获取，无法拿到最新值。
• Background Script的KeyValue函数中，chrome.storage.local.get是异步操作，后续的console.log和chrome.tabs.create会先执行，此时Key还未被赋值，自然为undefined。

3. 冗余存储操作 #

Content Script和Background Script都执行了chrome.storage.local.set，属于重复操作，容易引发数据不一致，只需在其中一处执行即可。

修复后的代码 #

修复后的Content Script #

var KeyInput = document.getElementById("Key");
var SaveButton = document.getElementById("saveButton");

function SaveButtonclick() {      
    if(KeyInput.value !== ""){
        // 统一用大写Key作为存储键名
        chrome.storage.local.set({'Key': KeyInput.value}, function() {
            console.log("点击事件中的值: " + KeyInput.value);
            alert("已保存值: " + KeyInput.value);

            if(chrome.runtime.lastError) {
                console.error(
                    "存储失败: " + JSON.stringify(KeyInput.value) +
                    " 错误信息: " + chrome.runtime.lastError.message
                );
            }

            // 将get操作放在set的回调内，确保存储完成后再获取
            chrome.storage.local.get("Key").then((result) => {
                console.log("从存储中提取的值: " + result.Key);
            });
        });

        // 发送消息给Background，仅做通知无需重复存储
        chrome.runtime.sendMessage({messageType:"KeyData", Key:KeyInput.value});
    }
}

SaveButton.addEventListener('click', SaveButtonclick, false);

chrome.runtime.onSuspend.addListener(() => {
    console.log("扩展即将卸载。");
});

修复后的Background Script #

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if(message.messageType === "KeyData"){ 
        // 修正为message.Key，匹配消息中的字段名
        console.log("从消息监听器收到的值: " + message.Key);
        sendResponse({'message':"KeyDataSavedSuccessfully"});
        // 无需重复存储，Content Script已完成存储操作
    }
});

chrome.runtime.onInstalled.addListener(function() {
    chrome.contextMenus.create({
        id: "1",
        title: "保存！",
        contexts:["selection"]
    });
});

var KeyValue = function(word){
    var query = word.selectionText;
    // 将后续逻辑放在get的then回调内，确保拿到存储值后再执行
    chrome.storage.local.get("Key").then((result) => {
        const Key = result.Key;
        console.log("主脚本中获取到的值: " + Key);
        chrome.tabs.create({url: `https://example.com/v1/test?sid=${query}&Key=${Key}&test=true`}); 
    });
};

chrome.contextMenus.onClicked.addListener(KeyValue);

额外注意事项 #

• 确保在manifest.json中声明必要权限，否则存储、右键菜单等功能会失效：

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

• 调试时可通过Chrome扩展管理页面的「检查视图」，分别查看Content Script和Background Script的控制台输出，快速定位问题。

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