如何在 Angular 中使用 Chrome 扩展 API？答案

【问题标题】：How to use Chrome Extension Api with Angular?如何在 Angular 中使用 Chrome 扩展 API？
【发布时间】：2018-11-06 10:08:50
【问题描述】：

我正在开发 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.”

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

【问题讨论】：

chrome.pageAction.show 仅公开图标，它不会打开 pageAction 本身，因此这些脚本没有运行，您无法在那里发送消息。只有当用户单击该图标时，才会显示 pageAction 弹窗并可以接收消息。
谢谢，您是否推荐任何解决方案来激活 pageAction 并从 background.js 发送数据，主要问题是“ng build”不起作用。错误：“src/app 中的错误/app.component.ts(11,5): 错误 TS2304: 找不到名称 'chrome'。"
您找到解决方案了吗？同样的问题

标签： javascript angular typescript google-chrome-extension

【解决方案1】：

添加行

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

到您的 TS 文件的最顶部（最好是第 1 行）。（不要省略开头的 3 个斜线）

同时运行命令

npm install --save @types/chrome

之后一切都会开始运作。

【讨论】：

【解决方案2】：

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

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

如果还是不行，那么在 tsconfig.json 类型中添加“Chrome”。

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

【讨论】：

我们可以在这里删除 chrome 导入并仅保留 ///
@mayurkukadiya 是的。再次检查答案。提到了。
如果我删除 import 语句，那么它会给我一个错误 chrome is not defined..
我实际上正在寻找 Iphone 和 iOS 设备不支持 chrome 类型的解决方案。所以问...
在 compilerOptions 中，您必须在类型中添加“chrome”。并在您的文件中添加引用。

【解决方案3】：

就我而言，我安装了npm install --save @types/chrome

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

然后我正在尝试使用命令ng build 构建库，但它被破坏了，因为它没有找到 chrome，所以我做了什么？

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

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

【讨论】：

如果我们想在 Angular 项目中使用 chrome API 怎么办。不在角度库中。我没有任何 public-api.ts 文件。