Как использовать Chrome Extension Api с Angular?

Question

Я работаю над расширением Chrome, у меня есть "background.js", который фильтрует URL и получает данные из моего API. Когда условия выполняются, я отправляю сообщение от "background.js". И я хочу поймать это от Angular component.

background.js

...
chrome.pageAction.show(tab.id, () => {
            chrome.runtime.sendMessage({data: dataFromAPI})
        });
...

Я побежал npm install --save @types/chrome.

app.component.ts

import {Component} from '@angular/core';
import {chrome} from '@types/chrome';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor() {
    chrome.runtime.onMessage.addListener( data => console.log(data));
  }

}

Но WebStorm говорит: ".../node_modules/@types/chrome/index.d.ts' is not a module."

Как использовать Chrome Api от Angular Component?

Answer 1

/// <reference types="chrome"/>
import {chrome} from '@types/chrome';
// Remove chrome import

ВАЖНО: перед ссылкой необходимо добавить три косых черты.

Если все равно это не работает, добавьте Chrome в тип tsconfig.json.

compilerOptions: ["types": [ "Chrome" ] ]