Tutorial grafis pengalaman pertama pengembangan Ekstensi Adobe Html5

Adobe memproduksi berbagai lini produk perangkat lunak pengolah multimedia, meliputi pengeditan audio dan video, pemrosesan gambar, desain grafis, pascaproduksi film dan televisi, serta bidang lainnya. Untuk memperluas fungsi perangkat lunak, Adobe memberi pengembang dua cara untuk meningkatkan fungsi perangkat lunak: plug-in dan ekstensi. Tahun lalu, dua plugin Premiere dikembangkan menggunakan SDK yang disediakan secara resmi, yang digunakan untuk mengimpor file multimedia dalam format khusus dan melihat pratinjau streaming video. Baru-baru ini saya mengalami perkembangan Adobe Extension.

Plugin Adobe umumnya digunakan untuk menyediakan fungsi yang mendekati level dasarnya. Untuk alasan efisiensi, SDK plug-in resmi yang disediakan didasarkan pada bahasa C++. Adobe Extension cenderung menyediakan ekstensi untuk aplikasi lapisan atas, yang diimplementasikan dalam bentuk Flash di era Adobe CS.

Di era Adobe CC, implementasi HTML5 disediakan, yang memungkinkan pengembang berinteraksi dengan HTML5, CSS3, Javascript, dan bahkan NodeJS untuk pengembangan. Karena Adobe telah menyematkan CEF di Premiere Pro, Adobe dapat mengurai dan merender HTML5 secara efisien serta menjalankan program Nodejs. Nodejs dapat mewujudkan pemanggilan fungsi sistem, yang tidak terlalu mudah! Pada artikel ini, saya merangkum secara kasar perjalanan penggunaan HTML5 untuk mengembangkan ekstensi Adobe. Ekstensi yang ingin kita buat sangatlah sederhana, seperti terlihat pada gambar di bawah ini:

Ini adalah ekstensi PremierePro yang dikembangkan oleh Pond5, situs web perdagangan materi video asing terkenal. Ekstensi ini memungkinkan pengguna untuk masuk ke situs web dalam versi Pro, mengunduh materi pratinjau, membeli materi definisi tinggi, mengimpor video secara otomatis, atau mengganti video secara otomatis. Hal ini menghilangkan kebutuhan pengguna untuk membuka browser untuk masuk ke situs web, sehingga sangat meningkatkan pengalaman pengguna. Plugin serupa dikembangkan oleh shutterstock:

Adobe secara resmi meluncurkan IDE untuk mengembangkan Ekstensi Adobe Html5 berdasarkan gerhana. Oleh karena itu, pertama-tama kami mengonfigurasi lingkungan pengembangan sesuai dengan proses berikut:

Unduh Eclipse, sebaiknya versi 3.6 atau lebih tinggi, dan Extension Builder

Instal Adobe Premiere Pro CC 2014/2015. Konfigurasikan aplikasi target dan Manajer Layanan elicpse

Aktifkan mode debug: tambahkan bidang 'PlayerDebugMode' di registri

Konfigurasi selesai, dan sekarang Anda dapat menggunakan gerhana untuk membuat proyek templat ekstensi. Proyek template yang dihasilkan sangat sederhana, hanya dengan satu tombol default di panel:

Dalam pengembangan Ekstensi Adobe Html5, file terpenting adalah manifest.xml. File ini menjelaskan informasi dasar ekstensi ini sehingga program host Adobe dapat mengenali dan memuatnya secara normal. Isi umumnya adalah sebagai berikut:

Diantaranya, BundleName, BundleId, dan BundleVersion ditentukan oleh pengembang, biasanya berdasarkan iterasi versi normal. Yang terpenting adalah isi dari dua tag HostList dan RequiredRuntimeList. HostList menentukan program host mana yang didukung ekstensi ini (seperti PremierePro, After Effects, dll.). Kode berikut menunjukkan bahwa beberapa program host dapat dimuat:

Hanya Photoshop Extended yang didukung di sini, dan ID Host-nya sesuai dengan PHXS. ID Host dan versi program host lainnya adalah sebagai berikut:

Perhatikan bahwa Versi menggunakan bentuk tanda kurung siku [14.0, 14.9], yang menunjukkan bahwa ekstensi ini mendukung Photoshop Extended versi 14.0-14.9. Versi Photoshop Extended yang lebih tinggi dari ini atau lebih rendah dari versi ini tidak akan memuat ekstensi ini. Namun, bagaimana jika Anda ingin menentukan bahwa semua versi di atas versi tertentu didukung? Misalnya, jika Anda ingin mendukung PremierePro CC 2014 atau lebih tinggi, bagaimana cara menentukan Versi ini? Cukup tulis nomor versi terendah:

Selain itu, ada label RequiredRuntimeList. Tag ini menentukan versi runtime CEP. Yang disebut CEP adalah singkatan dari Common Extensibility Platform. Ini menyediakan kumpulan layanan inti untuk memfasilitasi pengembang mengeksekusi kode Extendscript, mendeteksi variabel lingkungan program host, dan memproses peristiwa yang dikirim antara ekstensi dan host. Sebelumnya, kumpulan layanan ini disebut Creative Suite Extensible Services, atau disingkat CSXS. Oleh karena itu, singkatan CSXS masih dapat dilihat di beberapa file konfigurasi. Versi awal CEP adalah 4.x, dan sejauh ini telah berkembang menjadi 5 versi utama. Versi terbaru adalah 8.x, yang mendukung program host Adobe CC 2018 terbaru.

Seperti yang ditunjukkan di atas, jika kita ingin mendukung program host versi CC generasi pertama, Versi RequiredRuntime harus disetel ke 4.0. Jika tidak, ekstensi tidak dapat dimuat secara normal. Selain itu, jika Anda ingin mengakses sistem file dalam ekstensi, Anda harus menentukan parameter tambahan:

Saat kami mengembangkan, kami perlu menyesuaikan kode ekstensi kapan saja. Program host Adobe mengabaikan ekstensi yang tidak ditandatangani dan tidak memuatnya. Oleh karena itu, kita perlu mengaktifkan mode debugging sehingga kita tidak perlu menandatangani ekstensi selama pengembangan:

Di Mac, buka file ~/Library/Preferences/com.adobe.CSXS.6.plist dan tambahkan baris dengan nama kunci PlayerDebugMode, ketik String, dan nilai disetel ke 1. Di Windows, buka kunci registri: HKEY_CURRENT_USER /Software/Adobe/CSXS.6, tambahkan pasangan nilai kunci bernama PlayerDebugMode, ketik String, nilai 1.

Catatan: Jika versi program host berbeda, file terkait mungkin juga berbeda. Misalnya, di CC2017, Anda perlu mengubah bagian terkait di atas menjadi CSXS.7

Alat debugging chrome membantu mengamati keluaran ekstensi dan menjelajahi struktur DOM ekstensi, yang sangat membantu untuk debugging. Mengaktifkan alat debugging chrome juga sangat sederhana. Buat file bernama .debug di direktori root folder ekstensi dan tulis konten berikut:

Daftar ini mengilustrasikan berbagai port yang digunakan saat men-debug program host yang berbeda. Mengambil Pond5 sebagai contoh, isi file .debug-nya adalah sebagai berikut:

Saat menentukan ekstensi Premiere debugging, portnya adalah 8089. Seperti yang ditunjukkan di bawah ini:

Selama pengembangan, Anda mungkin perlu menonaktifkan CEF dari cache konten web. Anda dapat langsung menghapus folder yang sesuai dengan ekstensi secara manual di lokasi berikut:

Windows: C:/Users/USERNAME/AppData/Local/Temp/cep_cache/Mac: /Users/USERNAME/Library/Logs/CSXS/cep_cache

Tentu saja, beberapa pengembang Adobe juga mengatakan untuk menentukan parameter CEF <Parameter>--disable-application-cache</Parameter> untuk menonaktifkan caching CEF, tetapi sepertinya tidak berhasil setelah saya mencobanya. Folder ekstensi Ekstensi disimpan di dua lokasi, seluruh sistem dan pribadi pengguna. Jika Anda menginstal Ekstensi di seluruh sistem, file Ekstensi akan disimpan di lokasi berikut: Di Mac,:/Library/Application Support/Adobe/CEP/extensionsDi Windows:C:/Program Files (x86)/Common Files/Adobe/ CEP/ekstensi

Dengan cara ini, semua pengguna sistem saat ini dapat memuat Ekstensi ini. Itu juga dapat diinstal hanya untuk pengguna saat ini, dan lokasinya adalah sebagai berikut:

Di Mac: ~/Library/Application Support/Adobe/CEP/extensionsDi Windows: C://AppData/Roaming/Adobe/CEP/extensions Kemasan tanda tangan

Saat menerbitkan Ekstensi, seluruh paket harus ditandatangani. Anda perlu menggunakan alat ZXPSignCmd di sini, yang dapat diunduh dari situs resminya. Pertama, untuk menandatangani kita memerlukan sertifikat digital. Sertifikat ini dapat kita beli dari lembaga penerbit sertifikat pihak ketiga yang memerlukan dana dalam jumlah tertentu. Anda juga dapat membuat sertifikat yang ditandatangani sendiri untuk menandatangani ekstensi. Mari kita melalui proses dengan cara terakhir:

Ini akan menghasilkan sertifikat yang ditandatangani sendiri di direktori saat ini, dan kemudian kita dapat menggunakan sertifikat ini untuk menandatangani paket:

Ketika alat ZXPSignCmd menandatangani, itu akan menghasilkan file META-INF di direktori ekstensi, yang menyimpan informasi tanda tangan. Kemudian, alat ini akan mengemas dan mengompresi seluruh direktori menjadi file *.zxp. Ini adalah file perluasan yang pada akhirnya perlu kami publikasikan. ^_^

Analisis Rutin Pond5 dan Shutterstock Dengan menganalisis implementasi Pond5 dan shutterstock secara cermat, kita dapat meringkas logika eksekusi umum dari jenis ekstensi ini:

(1) Buka panel ekstensi di program host dan temukan ekstensi yang dimuat melalui Window-Extensions

(2) Skrip Ekstensi akan menganalisis apakah pengguna menggunakannya untuk pertama kali. Jika ini adalah pertama kalinya, biarkan pengguna memilih lokasi penyimpanan materi video. Hal ini biasanya dilakukan melalui kotak dialog pop-up. Informasi lokasi yang dipilih oleh pengguna umumnya disimpan di direktori home pengguna melalui file xml. Jika pengguna tidak menggunakan ekstensi untuk pertama kalinya, file xml di direktori home akan langsung dimuat dan diuraikan.

(3) Pengguna mengklik materi video tertentu untuk memulai pengunduhan. Proses ini umumnya dapat dicapai melalui nodejs. Namun, fungsi panggilan balik unduhan harus diatur.

(4) Setelah pengunduhan berhasil, jalankan fungsi panggilan balik dan impor file video yang diunduh ke program host. Langkah ini diterapkan dengan memanggil skrip extendscript. Untuk penulisan skrip tertentu, silakan lihat di sini. Mengacu pada rutinitas ini, kami menerapkan Adobe Extension yang mirip dengan Pond5 dan Shutterstock:

Di atas adalah tutorial grafis untuk pengalaman pertama pengembangan Ekstensi Adobe Html5 yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!