Chrome扩展开发问题：存储网页元素后跨站填充显示undefined

问题原因及修复方案 #

1. 核心错误：存储对象键值写反 #

你在content_nomsg.js中定义的storArray键值配置错误：
原代码中cx_name: "cxname"的含义是：创建一个键为cx_name、值为固定字符串cxname的属性，而你在content2.js中读取的是cxname键，该键在存储对象中不存在，所以返回undefined。

如果要将页面获取的cx_name变量值存入cxname键，需要将键值对反过来写为cxname: cx_name。

2. 潜在错误：页面元素取值逻辑有误 #

你使用.value获取custh1元素的内容，.value仅适用于input、textarea等表单输入类元素，如果custh1是h1、div等普通文本展示元素，需要替换为.textContent才能拿到文本内容，否则也会得到undefined。

3. 优化建议：增加空值判断 #

可以在存取值时增加空值判断，避免元素不存在、存储未初始化等场景下的报错。

修正后代码 #

content_nomsg.js #

// 兼容表单元素和普通文本元素的取值逻辑
const cxNameEle = document.getElementById("custh1");
const cx_name = cxNameEle ? (cxNameEle.value || cxNameEle.textContent.trim()) : "";

console.log("source page ran", "获取到的姓名：", cx_name);

var storArray = {
    cxname: cx_name,
    ///cx_problem: cxprblm,
    ///integ_id: intid
};

// 可选增加存储完成回调，确认存储成功
chrome.storage.local.set({'newStorage': storArray}, () => {
    console.log("存储完成", storArray);
});

content2.js #

console.log("target content2 ran");

chrome.storage.local.get('newStorage', function (items) {
    console.log("读取到的存储内容：", items); 
    // 判空后再赋值
    if (items?.newStorage?.cxname) {
        document.querySelector("#home-search__textbox").value = items.newStorage.cxname;
    }
    ///document.getElementById("lastName").value = items.newStorage.src_lname; 
});

调试方法 #

你可以通过Chrome开发者工具快速验证：

• 源页面打开控制台，看content_nomsg.js打印的cx_name是否是预期值
• 打开扩展的管理页面，点击对应扩展的「服务工作进程」打开后台控制台，在「应用」面板找到「Chrome 本地存储」下的你的扩展，查看存储的键值是否正确
• 目标页面打开控制台，看content2.js打印的存储内容是否符合预期

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