angular2 chrome扩展chrome.runtime.sendMessage来自typescript

我正在尝试使用Angular 2编写一个Chrome扩展

在我的

app.component.ts

中，我有以下内容：

import { Component } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  showHeading = true;
  heroes = ['Magneta', 'Bombasto', 'Magma', 'Tornado'];
  toggleHeading() {
    this.showHeading = !this.showHeading;
  }
  injectHello(){
    chrome.runtime.sendMessage({action:"inject"});
  }
}

问题是，当我尝试使用编译时，会出现以下错误：

错误位于/dev/quickstart/app/app.component.ts:14:12: 类型“typeof chrome”上不存在属性“runtime”

显然，我的angular应用程序不知道chrome.runtime。解决这个问题的最佳方法是什么

我已经了解了如何使用

tsc

编译chrome-app.d.ts，但我需要使用它来绕过内容安全策略

因此，我使用

node\u modules/.bin/ngc-p tsconfig aot.json

而不是

tsc

。有什么帮助吗？

好的，修好了

解决方案分为三个部分

首先，我需要一些额外的文件。我将以下所有内容放入名为

chrome

的文件夹中：


-->我将其重命名为filesystem.d.ts
-->我将其重命名为filewriter.d.ts

每个文件的顶部注释都有一些修改，以使文件相互了解：

chrome-app.d.ts

//
/// 

index.d.ts
/// 
文件系统d.ts
/// 

在

app.component.ts

内部，我需要在顶部添加此项：

//

从'@angular/core'导入{Component}

为了进行编译，我遵循以下步骤：

node\u modules/.bin/ngc-p tsconfig aot.json

node\u modules/.bin/rollup-c rollup config.js

---

瞧

文件中的内容是什么？链接断了

/// <reference path="index.d.ts"/>
/// <reference path="filesystem.d.ts"/>

index.d.ts
/// <reference path="filesystem.d.ts" />


filesystem.d.ts
/// <reference path="filewriter.d.ts" />