在打字稿中使用 chrome 扩展 api

Question

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

chrome-DefiniteltyTyped

库。

但是，当我在我的打字稿代码中写这个时：

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

你只需要安装 Type definition 让它工作，让我们安装它：

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 中的错误