如何将 Chrome 扩展 Api 与 Angular 一起使用？

Question

我正在开发一个 chrome 扩展，我有一个“ background.js”，它可以过滤 url 并从我的 api 获取数据。当条件满足时，我会从“ ”发送消息background.js。我想从 捕获它Angular component。

背景.js

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

我跑了npm install --save @types/chrome。

应用程序组件.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.”

如何使用 Angular 组件中的 Chrome Api？

Answer 1

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

重要提示：必须在引用前添加三个斜杠。

如果仍然不起作用，请在 tsconfig.json 类型中添加“Chrome”。

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