Question

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

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

因此，我的javascript文件未生成，我无法在扩展程序中使用它。

你们有什么解决方案吗？

Answer 1

从typecript 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

您只需安装类型定义即可使其正常运行，让我们安装它：

yarn add @types/chrome --dev

或NPM

npm install @types/chrome --save-dev

现在使用时没有错误！

Answer 4

尝试在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 \ src \ content.ts（28,3）中的错误 TS2304：找不到名称“ chrome”。

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;
}

在打字稿中使用chrome扩展api

5 个答案:

Chrome和Firefox中的类型