如何将 Chrome 扩展 Api 与 Angular 结合使用?

2024-01-07

我正在开发一个 chrome 扩展,我有一个“background.js" 它会过滤 url 并从我的 api 获取数据。当条件满足时,我将从 " 发送一条消息background.js“。我想抓住它Angular component.

背景.js

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

I ran npm install --save @types/chrome.

应用程序组件.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?


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

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

如果仍然不起作用,则在 tsconfig.json 类型中添加“Chrome”。

compilerOptions: ["types": [ "Chrome" ] ]
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 Chrome 扩展 Api 与 Angular 结合使用? 的相关文章

随机推荐

  • 使用powershell和svn删除未版本控制的文件

    我正在尝试编写一个构建脚本来使用 Powershell 签出代码 我需要能够使用 SVN 存储库中的适当更改来替换对工作副本所做的任何修改 这还包括删除在存储库中删除但未在工作副本中删除的所有文件 不幸的是 我无法进行干净的签出 因为每次运
  • Xdebug 3 docker mac PhpStorm 损坏的管道

    I see There was a problem sending 179 bytes on socket 11 Broken pipe 在 xdebug log 中看不到原因 这几天一直在兜圈子 尝试各种东西 我究竟做错了什么 X调试3
  • HTML 中的绝对路径不起作用

    我正在尝试使用小型 JavaScript 代码构建 HTML 模板 这是内容 在根目录下 我构建了两个文件 索引 html
  • 检查密码强度的最佳方法是什么?

    确保用户提供的密码是注册或更改密码表单中的强密码的最佳方法是什么 我的一个想法 用Python def validate password passwd conditions met 0 conditions total 3 if len
  • PK在深色模式和浅色模式下绘制不同的结果

    使用时PKDrawing在暗模式下生成的图像图像来自矩形 比例 https developer apple com documentation pencilkit pkdrawing 3237277 imagefromrect返回白色的钢笔
  • WPF 异步任务 阻塞 UI

    我已经与Task类型 一切都很好Task什么也不返回 例如 XAML
  • Python、Windows 和多重处理

    我有一个最初在 Linux 上构建的 Python 程序 现在我正尝试将其移植到 Windows 我在包含所有依赖项的虚拟环境中运行该程序 我的程序使用 pip install find linkswheelsmy module 作为轮子安
  • 为什么这个普通的 js 函数在 d3v3 和 d3v4 中返回不同的结果

    这是一个基于一些从令人惊叹的 d3 js v3 到 v4 的模板的 MWE 数据位于 csv 文件中 两个示例都加载相同的文件 干净 day movie1 movie2 movie3 movie4 movie5 movie6 1 20 8
  • 识别发生特定模式变化的行

    简介 背景 我需要分析 spss 数据表中的受访者数据 但我认为最好将这些数据复制到 Excel 或 Google 表格中 以进行我即将描述的特定分析 600 多名参与者被要求回答 100 个问题 每个参与者在数据中都有自己的行 他们对问题
  • 为什么我会收到“拆分包”警告?

    我正在构建一个 kar 文件 但是当我运行时mvn package我收到此错误 INFO maven bundle plugin 2 4 0 bundle default bundle common WARNING Bundle se em
  • 如何重命名物理数据库文件

    我使用 tsql 来分离数据库 如下所示 EXEC sp detach db dbname my db 然后我使用 PHP 来重命名物理文件 我能够重命名 mdf 文件 但不能重命名 ldf 文件 我什至尝试过dos命令REN但这对于 ld
  • R Shiny - 错误:没有名为“shinyjs”的包

    当我在本地运行我的应用程序时 它运行得很好 但是当我将它托管在闪亮应用程序io出现这个错误 发生了错误 应用程序无法启动 value 3L 中的错误 没有名为 shinyjs 的包 调用 本地 tryCatch gt tryCatchLis
  • 如何在巨大的 XML 文件中进行命令行 XPath 查询?

    我有一个 XML 文件集合 其中一些文件非常大 最多约 5000 万个元素节点 我在用xmllint用于验证这些文件 由于流 API 即使对于巨大的文件 它也能很好地工作 xmllint loaddtd stream valid path
  • distanceFromLocation 方法如何工作?

    我经常使用distanceFromLocation方法用于CLLocation对象来获取与其他位置的距离 枚举 CLLocations 数组 然后使用此方法将每个位置与我的参考位置进行比较 我很想知道使用的处理 内存影响distanceFr
  • Makefile 中的通配符目标

    如何压缩以下 Makefile 目标 GRAPHDIR Complex png GRAPHDIR Complex dot dot GRAPHDIR Complex dot Tpng o GRAPHDIR Complex png GRAPHD
  • Searchkick + Bloodhound + Typeahead 用于自动完成

    我正在尝试实施一个简单的自动完成功能对于单个属性 Model searchkick text start name autocomplete name 重新索引行为后Rails 控制台没问题 2 2 0 p0 002 gt Doctor s
  • Spring Boot Yarn - 传递命令行参数

    我正在尝试在 Spring Boot Yarn 应用程序中传递命令行参数 但遇到了困难 我知道我可以在 yml 文档中设置这些spring yarn appmaster launchcontext arguments但如何从命令行呢 喜欢j
  • 结合和敲除中的可见结合有什么区别?

    ko 绑定和 data bind visible sometext 绑定 两种绑定都执行相同的操作 哪一种使用效率最高 哪一种最好 虚拟元素 不能用于更改元素的样式 因为没有绑定 dom 元素 e g 当您无法添加额外元素时 对于控制流程很
  • LOGO 编程语言的 EBNF 或 BNF

    有谁知道我在哪里可以获得 BNF 或 EBNFLOGO http en wikipedia org wiki Logo 28programming language 29编程语言 BNF 语法在某些情况下可能不太有用 编写一个与现有 历史实
  • 如何将 Chrome 扩展 Api 与 Angular 结合使用?

    我正在开发一个 chrome 扩展 我有一个 background js 它会过滤 url 并从我的 api 获取数据 当条件满足时 我将从 发送一条消息background js 我想抓住它Angular component 背景 js