如何在Angular中使用Chrome Extension Api? [英] How to use Chrome Extension Api with Angular?

问题描述

我正在开发chrome扩展程序，我有一个"background.js"，它可以过滤url并从我的api中获取数据.当条件满足时，我正在从"background.js"发送一条消息.我想从Angular component抓到它.

I am working on a chrome extension, I have a "background.js" which it filters the url and fetchs data from my api. When the conditions is meet I am sending a message from "background.js". And I want to catch it from 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."

But WebStorm says, ".../node_modules/@types/chrome/index.d.ts' is not a module. "

如何从Angular Component中使用Chrome Api?

推荐答案

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

重要提示:引用前必须添加三个斜杠.

IMPORTANT: Must add three slashes before reference.

如果仍然无法正常运行，请在tsconfig.json类型中添加"Chrome".

If still it doesn't work then add "Chrome" in tsconfig.json types.

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

这篇关于如何在Angular中使用Chrome Extension Api?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！