angular2 chrome extension chrome.runtime.sendMessage from typescript

Question

I'm trying to write a Chrome Extension using Angular 2.

In my app.component.ts, I have the following:

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"});
  }
}

The problem is that when I try to compile using Ahead of Time compilation, I get this error:

Error at /dev/quickstart/app/app.component.ts:14:12: Property 'runtime' does not exist on type 'typeof chrome'.

Apparently, my angular app does not know about chrome.runtime. What is the best way to resolve this?

I've seen this stack overflow answer about compiling chrome-app.d.ts with tsc, but I need to use Ahead of Time compilation to get around the Content Security Policy.

Therefore, I use node_modules/.bin/ngc -p tsconfig-aot.json instead of tsc. Any help?

Answer 1

OK, fixed it.

Solution is in 3 parts.

1. First, I needed some extra files. I put all of the following into a folder called chrome:
   chrome-app.d.ts
   index.d.ts
   filesystem/index.d.ts --> I renamed this to filesystem.d.ts
   filewriter/index.d.ts --> I renamed this to filewriter.d.ts

2. There were a few modifications to the top comments in each to make the files know about each other:

   chrome-app.d.ts

/// <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" />

3. Inside app.component.ts, I needed this at the top:
   ///<reference path="chrome/chrome-app.d.ts" />
   import { Component } from '@angular/core';

4. To compile, I followed the Angular 2 docs:

   node_modules/.bin/ngc -p tsconfig-aot.json
node_modules/.bin/rollup -c rollup-config.js

Voila