在打字稿中使用 chrome 扩展 api

Question

我正在构建一个用 TypeScript 编写的 chrome 扩展。我正在使用 WebStorm 并在我的项目中添加了 chrome-DefiniteltyTyped 库。

然而，当我在我的打字稿代码中写这个时：chrome.extension.getURL 我收到一个错误：cannot find name 'chrome'.

因此，我的 javascript 文件没有生成，我不能在我的扩展中使用它。

你们有什么解决办法吗？

Answer 1

那应该没问题：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/chrome/index.d.ts

提示：确保添加了 reference 标签：

/// <reference path="pathTo/chrome.d.ts"/>

Answer 2

从打字稿 2（或 2.x，不确定）开始，您应该从 @types 导入 chrome 类型。

在package.json中：

"devDependencies": {
    ...
    "@types/chrome": "0.0.35", // or just npm install --save-dev @types/chrome

并在 tsconfig 中：

    "types": [
        //(various types, e.g. jquery, core-js),
        "chrome"
    ]

Answer 3

在 VS Code 中尝试使用 TypeScript 开发 Chrome 扩展时，我运行遇到了以下错误，而我所要做的只是运行:

npm install --save-dev @types/chrome

这将在 "devDependencies" 下输入 "@types/chrome": "0.0.120" =]package.json 文件.

修正错误：

[tsl] ERROR in C:\Users\my_user\Documents\my_chrome_extension\src\content.ts(28,3) TS2304: Cannot find name 'chrome'.

Answer 4

你只需要安装类型定义就可以了，让我们安装它：

yarn add @types/chrome --dev

或 NPM

npm install @types/chrome --save-dev

现在使用无误！

Answer 5

跨 Chrome 和 Firefox

的类型

由于扩展 API 现在在 Chrome 和 Firefox 中基本相同，您可以在这两种情况下使用 @types/chrome。

1.安装

yarn add @types/chrome --dev

2。更新 tsconfig

{
  "compilerOptions": {
    ....
    "types": ["chrome"]
  }
}

3。获取浏览器api函数

export function getBrowserInstance(): typeof chrome {
  // Get extension api Chrome or Firefox
  const browserInstance = window.chrome || (window as any)['browser'];
  return browserInstance;
}

Answer 6

什么起作用了：

通过在上面添加这样的注释，让打字稿忽略有问题的代码。

// @ts-ignore: saying 'chrome' is not found

什么不起作用：

当我运行遇到这个问题时，我安装了 @types/chrome。
在 tsconfig.json 中，在类型下添加“chrome”并指定 typesroot.
添加参考路径注释和各种方法导入“chrome”。

在添加@ts-ignore 评论之前尝试这些。

背景：

我正在使用 Angular 11 开发 chrome 扩展。我需要访问 chrome.runtime.sendMessage 以将信息发送给后台工作人员。

在打字稿中使用 chrome 扩展 api

Using chrome extension apis in typescript

javascript

google-chrome

google-chrome-extension

webstorm

typescript

跨 Chrome 和 Firefox