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

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

Unresolved variable or type chrome

有没有一种方法，我可以添加 chrome变量的检查，以便它可以自动完成，因为我键入？我猜我需要添加 Chromium 作为外部库，但我不确定从哪里开始。

34494 次浏览
小开

更新2 :

它现在已经支持开箱即用了，参见 完整答案如下。

Download library

更新 :

还有一个更完整的存根文件，可以将其作为库添加以完成代码。这是闭包编译器项目的一部分。下载 Chrome _ ext.js。

另请参阅从 IDE 自动添加此库的 网络风暴的功能请求。

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

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

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

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

如果有人继续并实现它，请在这里张贴到结果的链接。

小开

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

小开
最佳答案

第一次安装

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

  2. 按 Languages & Frameworks > Javascript > Libraries

  3. 按 Download

  4. 确保选择了 TypeScript community stubs

  5. 从列表中选择 chrome(只需键入 chrome即可快速查找)

  6. 按 Download and Install

  7. 单击 OK关闭设置对话框。

步骤2-6如下所示:

Webstorm Screenshot

在以后的项目中

在以后的项目中，你只需要:

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

  2. 再次单击 Languages & Frameworks > Javascript > Libraries

  3. 检查 chrome-DefinitelyTyped

  4. 单击 OK关闭对话框。

步骤2-4如下:

Webstorm screenshot

小开

对于编写 AppScript、函数和类，如 DriveApp、 电子表格应用，在 WebStorm 或 Intellij 中有一个名为 google-app-script 的插件。
安装方法与上面相同。另一方面，您应该标记或打开。Gs 文件作为 JavaScript。(二零一七年七月)


提交答案