调用chrome.storage.local.set报错Cannot read properties of undefined的解决求助

这个错误的核心是全局对象chrome未被定义，导致无法访问chrome.storage.local。以下是针对性的排查和解决步骤：

1. 确认代码运行环境 #

chrome.storage是Chrome扩展专属API，只能在扩展的背景页、弹出页、内容脚本、选项页等合法上下文里调用。如果你的代码是在普通网页中执行，必然会出现这个错误——普通网页没有chrome全局对象。

2. 检查manifest.json的配置细节 #

即使你已经添加了storage权限，仍需注意：

• 若使用Manifest V3，确保manifest_version字段设为3，且根权限里包含"storage"：

  {
    "manifest_version": 3,
    "permissions": ["storage"],
    // 其他扩展配置...
  }
  

• 如果是内容脚本需要访问storage，在V3中需在content_scripts的permissions里额外声明：

  {
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"],
        "permissions": ["storage"]
      }
    ]
  }
  

• 确认manifest文件没有语法错误，扩展已在Chrome扩展管理页（chrome://extensions/）正常启用，无加载失败提示。

3. 校验代码执行时机 #

避免在扩展上下文未初始化完成时调用API：

• 背景页中，建议在chrome.runtime.onInstalled或DOM加载完成后执行代码：

  chrome.runtime.onInstalled.addListener(() => {
    chrome.storage.local.set({ key: "value" }, () => {
      console.log("数据已存储");
    });
  });
  

• 弹出页或选项页中，确保DOM加载完成后再执行存储逻辑，比如监听DOMContentLoaded事件。

4. TypeScript项目的类型配置补充 #

虽然你已安装@types/chrome，仍需在tsconfig.json的compilerOptions中明确引入chrome类型：

{
  "compilerOptions": {
    "types": ["chrome"]
  }
}

同时确认你的TS项目是基于Chrome扩展的工程，而非普通网页项目。

5. 重新加载扩展排查 #

打开Chrome扩展管理页，启用开发者模式，点击"重新加载"按钮刷新扩展，排查是否存在加载异常导致chrome对象未注入的情况。

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