如何使用 WebStorm 进行 Chrome 扩展开发?

我刚刚购买了WebStorm 5,到目前为止,我一直非常喜欢它的检查功能。我在开发Chrome扩展程序时遇到的一个问题是它无法识别变量:chrome

Unresolved variable or type chrome

有没有办法将变量添加到检查器,以便它可以在我键入时自动完成?我想我需要添加Chromium作为外部库,但我不确定从哪里开始。chrome


答案 1

首次设置

  1. 打开对话框 (SettingsFile > Settings)

  2. 点击Languages & Frameworks > Javascript > Libraries

  3. 点击Download

  4. 确保已选中TypeScript community stubs

  5. 从列表中选择(您只需键入chromechrome)

  6. 点击Download and Install

  7. 单击此项可关闭“设置”对话框。OK


步骤 2-6 如下图所示:

Webstorm Screenshot


在后续项目中

在任何后续项目中,您只需:

  1. 再次打开对话框 (SettingsFile > Settings)

  2. 再次单击> >Languages & FrameworksJavascriptLibraries

  3. 检查chrome-DefinitelyTyped

  4. 单击此项可关闭对话框。OK


步骤 2-4 如下所示:

Webstorm screenshot


答案 2

更新 2

它现在开箱即用,请参阅下面的完整答案

Download library

更新

有一个更完整的存根文件可以添加为库来获取代码完成。它是闭包编译器项目的一部分。下载chrome_extensions.js

另请参阅 WebStorm 的功能请求,以从 IDE 自动添加此库。


您需要在某个地方获取Chrome API的JavaScript库,或者使用存根来获得基本完成

库或存根可以在WebStorm中配置


我找到了带有扩展API的JSON文件。可以编写一个脚本,从这些JSON文件构建JS存根,存根可以看起来像上面GitHub上链接的基本版本,但是通过自动生成,它们将包含几乎完整的API和JSDoc注释,以便可以直接在IDE中查看此处的文档

JSON =>在这种情况下,JavaScript对象存根映射非常简单,编写这种转换器应该不会超过一天(或熟练的编码人员需要几个小时)。

如果有人继续实施它,请在此处发布结果的链接。