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.

— matpie
sumber

215

Penyiapan Pertama Kali

Buka Settingsdialog ( File> Settings)
Klik Languages & Frameworks> Javascript>Libraries
Klik Download
Pastikan TypeScript community stubsdipilih
Pilih chromedari daftar (Anda dapat menemukannya dengan cepat hanya dengan mengetik chrome)
Klik Download and Install
Klik OKuntuk menutup dialog Pengaturan.

Langkah 2-6 diilustrasikan di bawah ini:

Dalam Proyek Selanjutnya

Dalam proyek berikutnya, Anda hanya:

Buka Settingsdialog lagi ( File> Settings)
Klik Languages & Frameworks> Javascript> Librarieslagi
Memeriksa chrome-DefinitelyTyped
Klik OKuntuk menutup dialog.

Langkah 2-4 ditunjukkan di bawah ini:

— 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