如何在Angular组件中使用chrome.storage？解决未定义报错问题

出现ERROR TypeError: Cannot read properties of undefined (reading 'sync')的核心原因是全局对象chrome未被正确识别或无法访问，以下是针对性的解决步骤：

1. 确认运行环境 #

你的Angular代码必须作为Chrome扩展的一部分运行，普通网页（非扩展）的浏览器环境中不存在全局chrome对象，自然无法调用chrome.storage相关API。

2. 配置扩展Manifest权限 #

在Chrome扩展的manifest.json中，必须声明storage权限，否则chrome.storage会被禁用：

{
  "manifest_version": 3, // 或Manifest V2
  "name": "你的扩展名称",
  "version": "1.0",
  // 其他必要配置
  "permissions": [
    "storage"
  ]
}

配置完成后，重新加载Chrome扩展（在扩展管理页面点击"重新加载"按钮）。

3. 添加Chrome扩展类型声明 #

Angular的TypeScript环境默认不识别chrome对象的类型，需安装官方类型声明包：

npm install @types/chrome --save-dev

安装后，TypeScript会自动识别chrome及其下属API的类型，避免编译阶段的类型报错。

4. 运行时环境校验（可选） #

为了避免在非扩展环境执行代码时报错，可以在调用API前增加环境判断：

loadData() {
  if (typeof chrome !== 'undefined' && chrome?.storage?.sync) {
    chrome.storage.sync.get({dataKey: []}, (result) => {
      // 处理获取到的数据
      console.log(result.dataKey);
    });
  } else {
    console.error("当前环境不支持Chrome扩展Storage API");
  }
}

额外注意事项 #

• 如果你的组件是作为Content Script注入到网页中，且Manifest V3启用了isolated_world（默认开启），Content Script无法直接访问chrome.storage，需要通过消息通信与Background Script交互，由Background Script读取Storage后返回数据。

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