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

Posted 2023-03-05

【中文标题】如何使用 WebStorm 进行 Chrome 扩展开发？

【英文标题】：How do I use WebStorm for Chrome Extension Development?

【发布时间】：2012-12-09 11:11:35

【问题描述】：

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

有没有办法可以将 chrome 变量添加到 Inspector 以便它可以在我键入时自动完成？我猜我需要将 Chromium 添加为外部库，但我不确定从哪里开始。

【参考方案1】：

首次设置

打开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 如下所示：

【讨论】：

在 Intellij 中同样有效

谢谢！现在，google-apps-script 和 google.visualization 也可用了。

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

原来是 IntelliJ IDEA 2017.1 youtrack.jetbrains.com/issue/WEB-26160#u=1490671035044987654323@中的一个bug

应该注意WebStorm需要重启。

【参考方案2】：

更新 2：

现在支持开箱即用，请参阅complete answer below。

更新：

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

另请参阅feature request for WebStorm 以从 IDE 自动添加此库。

---

您需要在某处获取 Chrome API 的 JavaScript 库，或 use a stub to get basic completion。

库或存根can be configured in WebStorm。

---

我找到了JSON files with the Extension API。可以编写一个脚本，从这些 JSON 文件构建 JS 存根，存根可能看起来像上面 GitHub 上链接的基本版本，但是通过自动生成，它们将包含几乎完整的 API 和 JSDoc cmets，以便可以查看 documentation like here直接在 IDE 中。

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

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

【讨论】：

谢谢，我最喜欢这个主意。实际上，我最终克隆了 Chromium Git Repo 并添加了文件夹 /chrome/renderer/resources/extensions，它为我提供了我想要检查的大部分内容。

sirlancelot - 对我不起作用......你能在这里发布一些在将此目录作为库添加到 WebStorm（或 IntelliJ）后自动完成的狙击手吗？

我下载了Chrome Extension，但为了摆脱WebStorm 中的Unresolved variable 警告，我必须在chrome_extension.js 中添加以下行：var chrome = 并将其作为库包含在我的项目中.

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

【参考方案3】：

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

【参考方案4】：

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