我正在开发一个 chrome 扩展程序，我有一个“background.js”，它可以过滤 url 并从我的 api 获取数据。当条件满足时，我从“background.js”发送消息。我想从 Angular 组件 中捕获它。
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' 不是模块。”
如何从 Angular 组件使用 Chrome Api？
最佳答案
/// <reference types="chrome"/>
import {chrome} from '@types/chrome';
// Remove chrome import
重要提示:必须在引用前添加三个斜杠。
如果仍然不起作用，则在 tsconfig.json 类型中添加“Chrome”。
compilerOptions: ["types": [ "Chrome" ] ]
关于javascript - 如何在 Angular 中使用 Chrome Extension Api？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53169721/