Javascript 如何使用 WebStorm 进行 Chrome 扩展开发？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13997468/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use WebStorm for Chrome Extension Development?
提问by matpie
I just bought WebStorm 5 and so far have been really enjoying its Inspection features. One hitch I've run in to when developing my Chrome extension is that it doesn't recognize the chromevariable:
我刚刚购买了 WebStorm 5，到目前为止我真的很喜欢它的检查功能。我在开发 Chrome 扩展程序时遇到的一个问题是它无法识别chrome变量：
Is there a way I can add the chromevariable to the Inspector so that it can autocomplete as I type? I'm guessing I would need to add Chromium as an External Library but I'm unsure where to start.
有没有办法可以将chrome变量添加到 Inspector 以便它可以在我输入时自动完成？我猜我需要将 Chromium 添加为外部库，但我不确定从哪里开始。
回答by Miscreant
First Time Setup
首次设置
Open the
Settingsdialog (File>Settings)Click
Languages & Frameworks>Javascript>LibrariesClick
DownloadMake sure
TypeScript community stubsis selectedSelect
chromefrom the list (you can find it quickly by just typingchrome)Click
Download and InstallClick
OKto close the Settings dialog.
打开
Settings对话框 (File>Settings)点击
Languages & Frameworks>Javascript>Libraries点击
Download确保
TypeScript community stubs被选中chrome从列表中选择（只需键入即可快速找到chrome）点击
Download and Install单击
OK以关闭“设置”对话框。
Steps 2-6 illustrated below:
步骤 2-6 如下图所示：
In Subsequent Projects
在后续项目中
In any subsequent project, you just:
在任何后续项目中，您只需：
Open the
Settingsdialog again (File>Settings)Click
Languages & Frameworks>Javascript>LibrariesagainCheck
chrome-DefinitelyTypedClick
OKto close the dialog.
Settings再次打开对话框 (File>Settings)再次单击
Languages & Frameworks>Javascript>Libraries查看
chrome-DefinitelyTyped单击
OK以关闭对话框。
Steps 2-4 shown below:
步骤 2-4 如下所示：
回答by CrazyCoder
UPDATE 2:
更新 2：
It's now supported out of the box, see the complete answer below.
UPDATE:
更新：
There is a more complete stub file that can be added as a library to get code completion. It's a part of the Closure Compiler project. Download chrome_extensions.js.
有一个更完整的存根文件可以添加为库以获取代码完成。它是 Closure Compiler 项目的一部分。下载chrome_extensions.js。
See also the feature request for WebStormto add this library automatically from the IDE.
另请参阅WebStorm的功能请求以从 IDE 自动添加此库。
You need to get the JavaScript library for the Chrome API somewhere, or use a stub to get basic completion.
您需要在某处获取 Chrome API 的 JavaScript 库，或者使用存根来获取基本完成。
Library or a stub can be configured in WebStorm.
可以在 WebStorm 中配置库或存根。
I found the JSON files with the Extension API. One can write a script that will build JS stubs from these JSON files, the stubs can look like the basic version linked on GitHub above, but with the automatic generation they will contain almost complete API and JSDoc comments so that documentation like herecan be viewed directly in the IDE.
我找到了带有 Extension API的JSON 文件。可以编写一个脚本，从这些 JSON 文件构建 JS 存根，存根看起来像上面 GitHub 上链接的基本版本，但是通过自动生成，它们将包含几乎完整的 API 和 JSDoc 注释，以便可以查看像这里这样的文档直接在IDE中。
JSON => JavaScript object stubs mapping is pretty straightforward in this case and writing this kind of converter should not take more than a day (or several hours for the skilled coder).
在这种情况下，JSON => JavaScript 对象存根映射非常简单，编写这种转换器应该不会超过一天（或者对于熟练的编码人员来说需要几个小时）。
If someone goes ahead and implements it, please post the link to the results here.
如果有人继续并实施它，请在此处发布结果链接。
回答by Amitabh
WebStorm should one day accept json definitions directly to enable autocomplete for the functions defined. Meanwhile, you can use the program at https://github.com/QuickrWorld/jsgento convert the json files to js to enable auto-complete for the chrome extension APIs.
WebStorm 应该有一天会直接接受 json 定义，以便为定义的函数启用自动完成功能。同时，您可以使用https://github.com/QuickrWorld/jsgen上的程序将 json 文件转换为 js 以启用 chrome 扩展 API 的自动完成功能。
回答by Mingzhong
For writing AppScript, functions and classes such as DriveApp, SpreadsheetApp, there is a plugin in WebStorm or Intellij called google-app-script.
The installation method is the same as above. On the other hand, you should mark or open the .gs file as JavaScript. (July 2017)
为了编写 AppScript、函数和类（例如DriveApp、SpreadsheetApp ），WebStorm 或 Intellij 中有一个名为 google-app-script 的插件。
安装方法同上。另一方面，您应该将 .gs 文件标记或打开为 JavaScript。（2017 年 7 月）
