javascript 在typescript中使用chrome扩展api

sr4lhrrt  于 2023-05-16  发布在  Java
关注(0)|答案(8)|浏览(394)

我正在构建一个用TypeScript编写的Chrome扩展。我正在使用WebStorm,并在我的项目中添加了chrome-DefiniteltyTyped库。
然而,当我在我的typescript代码中写这段代码时:chrome.extension.getURL我得到一个错误:cannot find name 'chrome'
正因为如此,我的JavaScript文件没有生成,我不能在我的扩展中使用它。
你们有什么办法吗?

bcs8qyzn

bcs8qyzn1#

从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"
    ]
gywdnpxw

gywdnpxw2#

这应该可以正常工作:https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/chrome/index.d.ts
提示:确保添加了reference标记:
/// <reference path="pathTo/chrome.d.ts"/>

dgiusagp

dgiusagp3#

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

xlpyo6sf4#

你只需要安装类型定义就可以了,下面我们来安装一下:

yarn add @types/chrome --dev

或NPM

npm install @types/chrome --save-dev

现在使用免费的错误!

lh80um4z

lh80um4z5#

我在VS Code中尝试使用TypeScript开发Chrome扩展时遇到了下面的错误,我所要做的就是简单地运行:
npm install --save-dev @types/chrome
这将输入 "@types/chrome”:package.json 文件中 “devDependencies” 下的“0.0.120”
修复错误:
[tsl]C:\Users\my_user\Documents\my_chrome_extension\src\content.ts(28,3)中出现错误TS 2304:找不到名称“chrome”。

njthzxwz

njthzxwz6#

什么工作:

让typescript忽略这些违规代码,在上面添加这样的注解。
// @ts-ignore: saying 'chrome' is not found

什么不起作用:

  • 我遇到这个问题时安装了@types/chrome。
  • 在tsconfig.json中,在types下添加“chrome”并指定typesroot。
  • 添加引用路径注解和各种导入“chrome”的方法。
  • 在添加@ts-ignore注解之前尝试这些。*
    背景:

我正在使用Angular 11开发一个Chrome扩展。我需要访问chrome.runtime.sendMessage来向后台工作程序发送信息。

jslywgbw

jslywgbw7#

确保你安装了@types/chrome。我认为你不需要更新tsconfig的类型和类型根。然后通过访问全局可用的chrome类型来使用chrome中的类型定义,例如:

type getUrl = typeof chrome.runtime.getURL;

A bit more context in this GitHub issue

oxiaedzo

oxiaedzo8#

这也是我在VS Code中遇到的问题。
我在子目录中有一个TS项目,即:

project
|-> TS_folder
|-> non-TS_folder

尽管安装了@types/chrome,我还是得到了同样的错误。
幸运的是,我注意到VS Code没有在子目录中找到我的tsconfig.json。当我直接打开/project/TS_folder时,即让TS_folder成为VS Code窗口的根,所有错误都消失了。
VS Code missing tsconfig.json截图:

不幸的是,在VS Code中,它是超级可定制的编辑器,没有办法显式地指定tsconfig.json的路径。Issue有很大的吸引力,但现在已经锁定了相当长的一段时间。

相关问题