Question

我正在开发chrome扩展程序，我有一个“ background.js”，它可以过滤网址并从我的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.”

如何从Angular Component中使用Chrome Api？

Answer 1

添加行

///<reference types="chrome"/>

到TS文件的顶部（最好是第1行）。（请勿在开始时忽略3个错误）

也运行命令

npm install --save @types/chrome

之后，一切都会开始起作用。

Answer 2

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

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

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

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

Answer 3

对于我来说，我安装了npm install --save @types/chrome

因此文件停止显示错误Cannot find name 'chrome' when build

然后我正尝试使用命令ng build来构建库，但是由于没有找到镶边，所以它被破坏了，所以我做了什么？

我在文件///<reference types="chrome"/>的顶部添加了这一行public-api.ts

注意：引用前必须添加三个斜杠（///)。

如何在Angular中使用Chrome Extension Api？

3 个答案: