如何在Angular 9的TypeScript代码中获取Chrome扩展版本？

错误原因 #

你调用的chrome.getExtension()并非Chrome扩展的官方API，这是导致报错的直接原因。要获取已安装扩展的版本号，需使用Chrome提供的management API。

实现步骤 #

1. 配置扩展权限 #

在你的Chrome扩展的manifest.json中添加management权限，否则无法调用相关API：

{
  "manifest_version": 2, // 或3，根据你的扩展版本调整
  "name": "你的扩展名称",
  "version": "1.0.0",
  "permissions": [
    "management"
  ]
}

2. 安装Chrome类型定义（TypeScript必备） #

因为Angular使用TypeScript，需要安装Chrome扩展的类型声明包来避免类型错误：

npm install @types/chrome --save-dev

3. 在Angular组件中实现获取逻辑 #

在你的TypeScript代码中，使用chrome.management.get()方法获取指定ID的扩展信息，从中提取版本号：

// 组件示例代码
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-extension-version',
  templateUrl: './extension-version.component.html',
  styleUrls: ['./extension-version.component.css']
})
export class ExtensionVersionComponent implements OnInit {
  extensionVersion: string | null = null;
  extensionId = 'knldjmfmopnpolahpmmgbagdohdnhkik'; // 目标扩展ID

  ngOnInit(): void {
    this.getExtensionVersion();
  }

  getExtensionVersion(): void {
    // 检查chrome对象是否存在（避免非Chrome环境报错）
    if (chrome?.management) {
      chrome.management.get(this.extensionId, (extensionInfo) => {
        // 处理成功情况
        this.extensionVersion = extensionInfo.version;
      }, (error) => {
        // 处理错误，比如扩展未安装、权限不足等
        console.error('获取扩展版本失败:', error);
        this.extensionVersion = null;
      });
    } else {
      console.error('当前环境不支持Chrome扩展API');
    }
  }
}

注意事项 #

• 如果你的扩展使用Manifest V3，权限配置和API调用逻辑基本一致，但需确认management权限在V3中是否可用（目前是支持的）。
• 确保目标扩展已安装在Chrome浏览器中，否则chrome.management.get()会返回错误。
• 在Angular中使用Chrome API时，要注意环境判断，避免在非Chrome浏览器或扩展之外的环境执行代码导致报错。

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