Chrome报Uncaught TypeError错误，编程新手求助排查原因

嘿，别担心，作为编程新手遇到这类错误太正常了，咱们一步步拆解解决：

第一个错误：Uncaught TypeError: Cannot read property ‘currentDate’ of undefined #

这个问题出在values.js的对象定义逻辑里。当你在创建kbValues对象字面量时，直接在currentTime属性里引用kbValues.currentDate——但此时kbValues还没完成变量赋值：JavaScript在执行对象字面量的过程中，变量kbValues处于未初始化状态，所以你访问kbValues.currentDate就会触发“读取undefined的属性”错误。

修复写法： #

我们可以先单独提取currentDate变量，再用它构建整个对象，这样就不会出现未初始化的问题，还能让代码更清晰：

// values.js 修改后
const currentDate = new Date();
var kbValues = {
  projectName: 'kittenbook',
  versionNumber: '0.0.1',
  currentDate: currentDate,
  currentTime: `${currentDate.getFullYear()}-${currentDate.getMonth() + 1}-${currentDate.getDate()} at ${currentDate.getHours()}:${currentDate.getMinutes()}:${currentDate.getSeconds()}`
};

这里用了ES6的模板字符串（${}）替代拼接，和你原来的功能完全一致，但可读性更高。

第二个错误：Uncaught TypeError: Cannot read property ‘projectName’ of undefined #

这个错误其实是第一个错误的连锁反应：因为第一个错误抛出后，JavaScript会终止后续代码执行，导致kbValues变量没有被完整创建。等到kittenbook.js里访问kbValues.projectName时，kbValues还是undefined，自然就报错了。

另外，你的kittenbook.js里还用到了未定义的userName变量，后续也会触发错误，记得补上定义：

// kittenbook.js 修改后
const userName = '你的用户名'; // 替换成你想要显示的名字
document.body.innerHTML = `<h1>Hello, ${userName}!</h1><p>${kbValues.projectName} ${kbValues.versionNumber} accessed on: ${kbValues.currentTime}</p>`;

最后检查文件结构 #

你的manifest.json里指定脚本在js文件夹下，确保你的文件结构和配置匹配：

扩展根目录/
├─ manifest.json
└─ js/
   ├─ values.js
   └─ kittenbook.js

这样修改后，两个错误应该都能解决啦，新手阶段踩这些坑都是必经的学习过程😉

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