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

Question

我刚购买了WebStorm 5，并一直在享受其检查功能。但是在开发Chrome扩展时，遇到了一个问题：它无法识别chrome变量：

我能否将chrome变量添加到检查器中，以便在我输入时进行自动完成？我猜我需要将Chromium添加为外部库，但我不知道从哪里开始。

- matpie

Answer 1

首次设置

1. 打开“设置”对话框（文件 > 设置）

2. 点击 语言和框架 > Javascript > 库

3. 点击 下载

4. 确保选择了 TypeScript 社区存根

5. 从列表中选择 chrome（可以通过输入 chrome 快速找到）

6. 点击 下载并安装

7. 点击 确定 关闭“设置”对话框。

---

以下是第2-6步的说明：

---

在后续项目中

在任何后续项目中，只需执行以下操作：

1. 再次打开“设置”对话框（文件 > 设置）

2. 再次点击 语言和框架 > Javascript > 库

3. 选中 chrome-DefinitelyTyped

4. 点击 确定 关闭对话框。

---

以下是第2-4步的说明：

- Miscreant

---

在Intellij中同样有效。 - Oskar Ferm

需要更新回答，因为IntelliJ IDEA 2017.1在“TypeScript社区存根”下不显示“chrome”。有什么办法可以添加它吗？ - Reem

原来是 IntelliJ IDEA 2017.1 中的一个 bug https://youtrack.jetbrains.com/issue/WEB-26160#u=1490671035044 - Reem

需要说明的是，WebStorm需要重新启动。 - Tyler Crompton

@TylerCrompton 不过现在不是了。 - kraxor

Answer 2

更新2：

现在该功能已经默认支持，详见下面的完整回答。

更新：

有一个更完整的存根文件可以作为库添加以获得代码补全。它是Closure Compiler项目的一部分。下载chrome_extensions.js。

还可以查看WebStorm的特性请求，从IDE自动添加此库。

---

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

在WebStorm中可以配置库或存根，详见此处。

---

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

在这种情况下，JSON => JavaScript对象存根映射非常简单，编写这种转换器不应该花费超过一天（或者对于熟练的编码人员几个小时）。

如果有人开始实施，请在此处发布结果的链接。

- CrazyCoder

---

谢谢，我最喜欢这个想法。实际上，我最终克隆了Chromium Git代码库，并添加了文件夹 /chrome/renderer/resources/extensions，这为我的检查工作提供了大部分所需内容。 - matpie

sirlancelot - 对我不起作用...你能在这里发布一些片段吗？在将此目录作为WebStorm（或IntelliJ）库添加后，是否具有自动完成功能？ - Michal Bernhard

我下載了 Chrome 擴展程式，但為了消除 WebStorm 中的 未解決的變數 警告，我必須在 chrome_extension.js 中添加以下行：var chrome = {}，並將其作為庫包含在我的項目中。 - M.K. Safi

还有一个比较新的（2013年12月）vsdoc文件，位于https://code.google.com/p/chrome-api-vsdoc。它具有对象、方法和参数描述（TypeScript版本缺少）。由于vsdoc使用XML进行文档注释，因此在使用Ctrl-Q查看时，描述会有点混乱，但仍然可读且可用。只需将下载的vsdoc添加为Webstorm中的自定义JS库即可。 - Boris B.

chrome_extension.js 的新 URL：https://raw.githubusercontent.com/google/closure-compiler/master/contrib/externs/chrome_extensions.js - Tuan Ha

Answer 3

WebStorm应该有一天能够直接接受json定义，以启用对已定义函数的自动完成。同时，您可以使用程序https://github.com/QuickrWorld/jsgen将json文件转换为js，以启用chrome扩展API的自动完成。

- Amitabh

Answer 4

关于编写 AppScript，像 DriveApp、SpreadsheetApp 这样的函数和类，在 WebStorm 或 Intellij 中有一个名为 google-app-script 的插件。
安装方法与上述相同。另外，您应该将 .gs 文件标记或打开为 JavaScript。（2017 年 7 月）

- Mingzhong