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

104

我刚刚购买了WebStorm 5，到目前为止，它真的很享受它的检测功能。开发Chrome扩展程序时遇到的一个难题是它无法识别该chrome变量：

未解析的变量或类型chrome

有什么方法可以将chrome变量添加到检查器中，以便在键入时可以自动完成？我猜想我需要将Chromium添加为外部库，但是我不确定从哪里开始。

— 马皮
source

215

首次设置

打开Settings对话框（File> Settings）
点击Languages & Frameworks> Javascript>Libraries
请点击 Download
确保TypeScript community stubs已选择
chrome从列表中选择（只需键入即可快速找到chrome）
请点击 Download and Install
单击OK以关闭“设置”对话框。

步骤2-6如下图所示：

在后续项目中

在任何后续项目中，您只需：

Settings再次打开对话框（File> Settings）
点击Languages & Frameworks> Javascript> Libraries再次
检查一下 chrome-DefinitelyTyped
单击OK关闭对话框。

步骤2-4如下所示：

— 恶棍
source

3

在Intellij

— Oskar Ferm上

2

由于IntelliJ IDEA 2017.1在“ TypeScript社区存根”下没有显示“ chrome”，因此需要更新的答案。知道如何添加吗？

— Reem

1

它原来是在IntelliJ IDEA的错误2017.1 youtrack.jetbrains.com/issue/WEB-26160#u=1490671035044

— 雷姆

1

在Mac上，名称不是设置而是设置。但是您可以使用command+,

— Ulysse BN

4

可能应该注意，WebStorm将需要重新启动。

— 泰勒·克伦普顿

42

更新2：

现在支持开箱即用，请参见下面的完整答案。

下载库

更新：

有一个更完整的存根文件，可以将其添加为库以完成代码。这是Closure Compiler项目的一部分。下载chrome_extensions.js。

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

您需要在某处获取Chrome API的JavaScript库，或使用存根获得基本完成。

可以在WebStorm中配置库或存根。

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

在这种情况下，JSON => JavaScript对象存根映射非常简单，编写此类转换器的时间不应超过一天（对于熟练的编码人员来说，则无需花费数小时）。

如果有人继续执行它，请在此处发布指向结果的链接。

— 疯狂编码器
source

谢谢，我最喜欢这个主意。实际上，我最终克隆了Chromium Git Repo，并添加了文件夹/chrome/renderer/resources/extensions，这给了我检查所需的大部分东西。

— matpie 2012年

sirlancelot-对我不起作用...您可以在此目录中将此目录添加为WebStorm（或IntelliJ）库后发布具有自动完成功能的窥探器吗？

— Michal Bernhard

2

我下载了Chrome扩展程序，但是要摆脱Unresolved variableWebStorm 中的警告，我必须在中添加以下行chrome_extension.js：，var chrome = {}并将其作为库包含在我的项目中。

— MK萨菲2014年

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

— 鲍里斯·B。

2

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

— 阿弥陀
source

1

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

— 明忠
source