在 TypeScript 中使用 Google Chrome 扩展 API

Question

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

chrome-DefiniteltyTyped

库。

但是，当我在 TypeScript 代码中编写此内容时：

chrome.extension.getURL

我收到错误：

cannot find name 'chrome'

。

因此，我的 JavaScript 文件未生成，并且我无法在我的扩展中使用它。

有解决办法吗？

Answer 1

从 typescript 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 2

应该可以正常工作：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/chrome/index.d.ts

提示：确保您添加了

reference

标签：

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

Answer 3

Chrome 和 Firefox 上的类型

由于 Chrome 和 Firefox 的扩展 API 现在基本相同，因此您可以在这两种情况下使用

@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 4

您只需要安装类型定义即可使其工作，让我们安装它：

yarn add @types/chrome --dev

或NPM

npm install @types/chrome --save-dev

现在使用没有错误！

Answer 5

当我尝试在 VS Code 中使用 TypeScript 开发 Chrome 扩展时，我刚刚遇到了以下错误，我所要做的就是简单地运行：

npm install --save-dev @types/chrome

这将在您的 package.json 文件中的 “devDependencies” 下输入 "@types/chrome": "0.0.120"。

修正错误：

[tsl] C:\Users\my_user\Documents\my_chrome_extension\sr 中出现错误