在打字稿中使用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"
    ]

我想你的意思是 npm install --save-dev @types.chrome？--save 将导致它被添加到依赖项，而不是 devDependencies。 (3认同)

Answer 2

提示:确保reference添加了标记:

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

新链接:https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/chrome/index.d.ts (2认同)
对我不起作用...例如，当我调用 `chrome.storage` 时，它是未定义的...想知道我们是否必须在某处添加权限... (2认同)

Answer 3

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

yarn add @types/chrome --dev

或 NPM

npm install @types/chrome --save-dev

现在使用没有错误！

Answer 4

跨 Chrome 和 Firefox 的类型

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

1.安装

yarn add @types/chrome --dev

2.更新tsconfig

yarn add @types/chrome --dev

3.获取浏览器api函数

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