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

我正在开发一个chrome扩展，我有一个“

background.js

”，它过滤url并从我的api获取数据。当条件满足时，我将从“

background.js

”发送一条消息。我想从

角度分量

捕捉它

background.js

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

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

}

我运行了

npm安装--save@types/chrome

应用程序组件.ts

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

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\u modules/@types/chrome/index.d.ts”不是一个模块。

”

如何从Angle Component使用Chrome Api？添加行

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

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

---

在那之后一切都会开始工作。

在我的例子中，我安装了

npm安装--save@types/chrome

因此，文件停止显示错误

在生成时找不到名称“chrome”

然后我尝试使用命令

ngbuild

来构建库，但是它被破坏了，因为它没有找到chrome，所以我做了什么

我在文件

public api.ts

---

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

chrome.pageAction.show仅显示图标，它不会打开页面操作本身，因此这些脚本不会运行，您无法在那里发送消息。只有当用户单击图标时，才会显示pageAction弹出窗口并可以接收消息。谢谢，您是否建议使用任何solition来激活pageAction并从background.js发送数据，而且主要问题是“ng build”不起作用。错误：“src/app/app.component.ts（11,5）中的错误：错误TS2304:找不到名称‘chrome’。”你找到解决办法了吗？这里也有同样的问题