Bagaimana cara menggunakan WebStorm untuk Pengembangan Ekstensi Chrome?

104

Saya baru saja membeli WebStorm 5 dan sejauh ini benar-benar menikmati fitur Inspeksinya. Satu halangan yang saya hadapi saat mengembangkan ekstensi Chrome saya adalah ia tidak mengenali chromevariabel:

Variabel yang belum terselesaikan atau ketik chrome

Apakah ada cara untuk menambahkan chromevariabel ke Inspektur sehingga dapat dilengkapi secara otomatis saat saya mengetik? Saya rasa saya perlu menambahkan Chromium sebagai Perpustakaan Eksternal tetapi saya tidak yakin harus mulai dari mana.

javascript autocomplete google-chrome-extension intellij-idea webstorm matpie
sumber

Jawaban:

215

Penyiapan Pertama Kali

  1. Buka Settingsdialog ( File> Settings)

  2. Klik Languages & Frameworks> Javascript>Libraries

  3. Klik Download

  4. Pastikan TypeScript community stubsdipilih

  5. Pilih chromedari daftar (Anda dapat menemukannya dengan cepat hanya dengan mengetik chrome)

  6. Klik Download and Install

  7. Klik OKuntuk menutup dialog Pengaturan.

Langkah 2-6 diilustrasikan di bawah ini:

Tangkapan Layar Webstorm

Dalam Proyek Selanjutnya

Dalam proyek berikutnya, Anda hanya:

  1. Buka Settingsdialog lagi ( File> Settings)

  2. Klik Languages & Frameworks> Javascript> Librarieslagi

  3. Memeriksa chrome-DefinitelyTyped

  4. Klik OKuntuk menutup dialog.

Langkah 2-4 ditunjukkan di bawah ini:

Tangkapan layar badai web

Bajingan
sumber
3
Bekerja dengan baik di Intellij
Oskar Ferm
2
Jawaban yang diperbarui diperlukan karena IntelliJ IDEA 2017.1 tidak menampilkan "chrome" di bawah "bertopik komunitas TypeScript". Ada ide bagaimana menambahkannya?
Reem
1
Ternyata itu adalah bug di IntelliJ IDEA 2017.1 youtrack.jetbrains.com/issue/WEB-26160#u=1490671035044
Reem
1
Di mac, namanya bukan pengaturan tetapi preferensi. Tetapi Anda dapat mengaksesnya menggunakancommand+,
Ulysse BN
4
Mungkin harus dicatat bahwa WebStorm perlu direstart.
Tyler Crompton
42

UPDATE 2 :

Sekarang didukung di luar kotak, lihat jawaban lengkap di bawah ini .

Unduh perpustakaan

PERBARUI :

Ada file rintisan yang lebih lengkap yang dapat ditambahkan sebagai pustaka untuk mendapatkan penyelesaian kode. Ini adalah bagian dari proyek Closure Compiler. Unduh chrome_extensions.js .

Lihat juga permintaan fitur WebStorm untuk menambahkan pustaka ini secara otomatis dari IDE.

Anda perlu mendapatkan pustaka JavaScript untuk Chrome API di suatu tempat, atau menggunakan rintisan untuk menyelesaikan dasar .

Library atau stub dapat dikonfigurasi di WebStorm .

Saya menemukan file JSON dengan Extension API . Seseorang dapat menulis skrip yang akan membangun JS stubs dari file JSON ini, stub tersebut dapat terlihat seperti versi dasar yang ditautkan di GitHub di atas, tetapi dengan pembuatan otomatis akan berisi komentar API dan JSDoc yang hampir lengkap sehingga dokumentasi seperti di sini dapat dilihat langsung di IDE.

JSON => Pemetaan rintisan objek JavaScript cukup mudah dalam kasus ini dan menulis jenis konverter ini tidak boleh lebih dari satu hari (atau beberapa jam untuk pembuat kode yang terampil).

Jika seseorang melanjutkan dan menerapkannya, silakan posting tautan ke hasil di sini.

CrazyCoder
sumber
Terima kasih, saya paling suka ide ini. Saya benar-benar akhirnya mengkloning Chromium Git Repo dan menambahkan folder /chrome/renderer/resources/extensionsyang memberi saya sebagian besar dari apa yang saya inginkan untuk Inspeksi.
matpie
sirlancelot - tidak bekerja untuk saya ... dapatkah Anda memposting di sini beberapa snipper yang memiliki pelengkapan otomatis setelah menambahkan dir ini sebagai perpustakaan ke WebStorm (atau IntelliJ)?
Michal Bernhard
2
Saya mengunduh Ekstensi Chrome tetapi untuk menghilangkan Unresolved variableperingatan di WebStorm, saya harus menambahkan baris berikut ke chrome_extension.js: var chrome = {}dan memasukkannya sebagai perpustakaan dalam proyek saya.
MK Safi
Ada juga file vsdoc (Desember 2013) yang cukup baru di code.google.com/p/chrome-api-vsdoc . Ini memiliki objek, metode dan deskripsi parameter (yang tidak dimiliki versi TypeScript). Deskripsi sedikit rusak saat dilihat dengan Ctrl-Q karena vsdoc menggunakan XML untuk anotasi dokumen, tetapi masih dapat dibaca dan digunakan. Cukup tambahkan vsdoc yang diunduh sebagai pustaka JS khusus di Webstorm.
Boris B.
2

WebStorm suatu hari nanti harus menerima definisi json secara langsung untuk mengaktifkan pelengkapan otomatis untuk fungsi yang ditentukan. Sementara itu, Anda dapat menggunakan program di https://github.com/QuickrWorld/jsgen untuk mengonversi file json ke js untuk mengaktifkan pelengkapan otomatis untuk API ekstensi chrome.

Amitabh
sumber
1

Untuk penulisan AppScript, fungsi dan class seperti DriveApp , SpreadsheetApp , ada plugin di WebStorm atau Intellij yang disebut google-app-script.
Cara instalasinya sama seperti di atas. Di sisi lain, Anda harus menandai atau membuka file .gs sebagai JavaScript. (Juli 2017)

Mingzhong
sumber